Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Products storefront graphQL pagination best practice

Products storefront graphQL pagination best practice

PeterGeorge
Shopify Partner
44 2 2

Hi.
I searched the entire forum, and still can't find a good solution.
People keep saying use the "pageInfo" (hasNextPage and endCursor).
My case is we have about 3000 products in one single collection. 
Let's say,
1. In each page we are showing 50 products.
2. And client click page number 35.
So, the offset/afterCursor should be: 1750.
In order to use less API call, I am going to do the API call to fetch 250(max) products each time. Then need 7 times(1750%250). and use the latest one for next call until HasNextPage is false.

 

 

 

 

query GetStartCursor($afterCursor: String){
    collection(handle: "some-collection" ) {
      id
      title
      products(
        first: 250 
        after: $afterCursor
        filters: {
          variantMetafield:{
            namespace:"shopify",
            key:"custom-key",
            value:"custom-value"
          }
        }
      ) {
        pageInfo {
          hasNextPage
          hasPreviousPage
          endCursor
        }
      }
    }
  }

 

 

 

 


After I got this "AfterCorsor", I do the final products call with "node". So, it total 8 times API calls.
Altought the 7 times loads fast. But is it the only way to achieve this? sounds soo weird for pagination....

Please reach me if you want a further assistance for future.
Email: skygdi83@gmail.com
Replies 0 (0)