Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts 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,
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.
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
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 to paginate 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/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?