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

lujbek
Tourist
10 0 0

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,

Replies 4 (4)

Liam
Shopify Staff
2731 299 769

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

lujbek
Tourist
10 0 0

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 ?

lujbek
Tourist
10 0 0

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
 

lujbek_0-1700585882641.png

 

theocerutti
Visitor
1 0 0

No news for that feature?