Shopify Pagination

[DundarKoray]

Currently, there is no pagination implementation. What happens if there are so many products? Shopify has a limitation of 250 products to fetch at once, if there are let's say 1000 products. Somehow getProducts query needs to be updated something similar to the below,

query pagination($numProducts: Int!, $cursor: String){
  products(first: $numProducts, after: $cursor) {
    nodes {
      title
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Let's say we want to show 20 products and show more button.
{
"numProducts": 20,
"cursor": "eyJsYXN0X2lkIjo4NDg3MDAwNzAzMjkxLCJsYXN0X3ZhbHVlIjoiODQ4NzAwMDcwMzI5MSJ9"
}

[thomasbritton]

I ran into the same issue basically, especially in the scenario where you are showing say 50 or more products on a 'page' and someone paginates to page 6 and the user presses the back button, you can't load the all of the previous products because of the limit.

Would love to know of a working solution and I couldn't find any headless solutions after many hours of searching that offered any type of pagination solution other than to just keep showing the next pages and losing the state so you would always go back to the first page of products

[zpuckeridge]

Likewise running into a similar problem. Doesn't appear to be a clear way to implement pagination. Was able to get the cursor to load the next page of items, but this introduced a multitude of issues elsewhere.

[Nikojuu]

Im stuck with trying to implement Pagination with this template any one got simple aproach? it feels like im hitting a wall no matter what aproach i try use,

I know it should be cursor based pagination if i store cursor in url then i would loose previous results as page refresh and i cant use hooks on server components.

My last resort was to try make client component with load more button and fetch more data but that also feels pretty hard as everything in this template is deeply nested making it difficult to change anything without having some problems elsewhere.

Also this is same for both Search page with all collections and seperate [collection] page.tsx current code just fetch everything at once isnt that kinda bad in real life alot ecommerces have 1000+ products?