How to paginate with DatoCMS GraphQL API? (total page count, end of results)

🆘 Support
1

I’ve read the DatoCMS docs on GraphQL pagination (https://www.datocms.com/docs/content-delivery-api/pagination) which explains the first (page size) and skip (page offset) properties.

But, how would one render full pagination controls? Such as:

I haven’t paginated with GraphQL before. Reading their docs (https://graphql.org/learn/pagination/), they recommend additional API properties. That’s what I’m used to on traditional REST API endpoints too: some sort of totalCount property so I can calculate how many pages to expect, and whether a “next” page is available.

But I’m looking through the DatoCMS docs and the API explorer, and not seeing similar properties (totalCount, cursor, hasNextPage, etc).

Is there a way to render client pagination controls with DatoCMS GraphQL?

2

hello @alex.burner right, I’m going to amend the documentation right now, we haven’t mentioned there that you can query the meta object like this:

_allYourModelMeta {
  count
}

to get the total count of the records, that should solve your problem, right?

3

Yes, perfect! Thank you, that’s the missing piece to make this all work

1 Like
4

This doesn’t actually seem possible to do? the graphql explorer refuses to accept this!

5

Did you add the query container?

Like

query MyQuery {
  _allPagesMeta {
    count
  }
}

It should work?

1 Like
6

Hello @alex.burner how did you manage to do this? currently I am facing the same issue, with the difference I never did a pagination with graph or without, I was looking into tutorials for vue 3, however so far are apply for different cases and use a kind of end point url with a page parameter to manage the next and prev, so a different logic, if someone can suggest a good example, similar, will be really appreciate it.

7

hey @maria.arce we have an example in React here: https://github.com/datocms/react-graphql-demo/blob/master/src/components/Home.js

Maybe you can translate from that one?

8

Hello @mat_jack1 , thank you, will take a look !

1 Like