Products storefront graphQL pagination best practice

Retired Boards Appdev New Graphql Product Apis
1

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…