GraphQL pagination using page number

Developing with Prismic
,
1

Hi, we are building the blog/news part of our website. We need to paginate on all blog entries and we have page numbers in our design. We are currently using GraphQL to query the content.
After checking the documentation (Query Data with GraphQL - Prismic), we couldn't find a way to load contents on a specific page of the result set. We were able to iterate with like 10 blogs per page, but GraphQL does not seem to have a way to load an arbitrary page from the result set.

Can you please guide us on the way to implement pagination properly?

Thanks.

4

Hi Ekin,

Welcome to the community!

I'll be happy to help you with this. Can you tell me what framework you are using to build you application?

Thanks.

5

Hi,

We are using TypeScript and React. I'm trying to prepare a GraphQL query to be used by the front end developer using the GraphQL API browser.

Thank you,

ekin

9

Hello Eikin!

We have a sample project that uses GraphQl and has built-in pagination.

Here you can see a preview of how the site looks like.

Let us know if you find this example useful :grinning_face_with_smiling_eyes:

10

The full pagination is what we need to do. But the sample is loading all content from CMS and does the pagination on the client side. This is not something we would like to do, it will not scale well with hundreds of contents (code line: react-graphql-pagination-example/FullPagination.js at dc5a8082f2526cd06f94011dde0fd30f965b4988 · prismicio/react-graphql-pagination-example · GitHub).

Is there any way to query a specific page using GraphQL?

11

Any comments on GraphQL page=x support?

12

It depends on what you need to retrieve. You can query documents by their metadata (id, uid, lang, tags) or using a content field, like a number or a Rich Text field

13

Hi, we need the equivalent solution using page and pageSize parameters described on JS-API page for GraphQL-API.

14

I understand.

The cursor-based pagination is still the best option you can use to paginate your results and retrieve more than this initial 20 documents in GraphQL

15

Hi @ekin.sokmen ,

As you've seen this sort of pagination isn't possible with the GraphQL API and the only workaround is to build the pagination into your app clientside. I can see why this can be tricky to implement and maybe not so performant in your case.

I've tagged this as a feature request and passing the info to our dev team. Though this isn't something that they are working on at the minute. If/when this ever changes they will contact you here.

Thanks.

16

Hi,

We've switched to using JavaScript Prismic API instead of GraphQL. It was the only viable option for now.

Thank you,

ekin

17

OK, thanks for letting us know.