Creation of a desired pagination section with multiple pages using the Storefront API.

Hi

I have a question regarding to blog articles storefront API and pagination. Refer to https://shopify.dev/docs/api/usage/pagination-graphql I understand that we are able to create only pagination section with only 1 page with next/prev action. Is there another way to create a desired pagination section similar to using liquid markup and liquid object approach https://shopify.github.io/liquid-code-examples/example/accessible-pagination

Thanks,

1 Like

Hi Lujbek,

The pagination method used in the Liquid Code Examples is designed for Liquid storefronts - your best bet is to build out your own pagination using React or whichever framework you’re using. I believe the pagination from the GraphQL docs are more for paginating results from data received from the Admin API so might not fit your use case, which sounds more front-end.

You’ll be using the Storefront API, so this doc on Pagination with Hydrogen will be helpful.

Hi @Liam

Base on Pagination Doc the pagination is based on a relative cursor so we are just able to create a pagination section with 1 page and next/prev action (since we have no returned total item or total page). I want to create a pagination section with multiple pages and can be retrieve data from an arbitrary page. Is it possible ?

Hi Liam,

I got you mean, I understand that we can build our own pagination but Storefront API use cursors topaginate through lists of data. So we are just able to render a pagination that only fetch Next data or Prev data ( I didn’t try Pagination component from @Shopify_77 /hydrogen yet, but I guess it only have prev/next as attached image I shared) . Assume that we have 100 products and paginate 10 products per page. So I want to have a pagination section like 1 2 3 4 5 6…> 10. And we can fetch data with page arbitrary. Let me know if I’m wrong

Thanks

No news for that feature?