Pagination/Infinite Scroll question in a SPA - help with potential use-case

[Liquidator3358]

Hey guys,

First off, let me give you a little product context.  I am shipping individual pallets of merchandise and I have no product categories.  A product is simply an individual pallet with exclusive media content to itself.  Therefore, I have no true accumulation of inventory other than the total product count.  Each pallet is associated with a specific retailer, but I am delineating them on the client (more on that below).  Currently, this works fine in my headless approach.  The product list sections looks like this:

What I am doing here is fetching ALL my products in memory, and dynamically filtering them on the client side.  This way, the user can quickly filter/sort, as well as see the total amount of products per retailer.  The total products per retailer (as seen in the dropdown above) is derived on the client as well.  I am sure I could do this with tags through the backend, but with my current product catalog, it's not costing me much in terms of memory.

My problem with this approach is pagination.  Since I am deriving all these things on the client side, I am at the mercy of the total number of products currently in memory and not necessarily the total number of products within my store.  Also, I believe we can only fetch 250 products at a time, so there would be no way to accurately portray the amount of items availiable, even in aggregate (let alone per retailer) due to this constraint.

If I had 10,000 items in my store, I would have no desire to load them all into the DOM at once BUT I would have the desire to load the proper product count per retailer so the customer at least knows how much is on-hand.  There are plenty of SPA that utilize this approach.  Nike, for instance, will give you the total count of their shoes (usually 500+ given a cateogory) and then they'll load them incrementally via infinite scrolling.

So, to summarize:

- How can I get the total product count when it's over 250?

- If I decide to TAG every product, can I get the total amount of products per tag even if it's over 250?

Is there a simple way to do this, or will I have to a cache layer in order to get the full scope of my product catalog?

EDIT: As a reminder, if I EVER have thousands of items, then that means this venture is a huge success and I can cross that bridge when it comes.  So far, even sitting on hundreds of pallets would be considered a large operation.

[SB_90]

Hi @Liquidator3358 

I believe you'd just use the "count" endpoint to get the full figure of products in a collection/overall - https://shopify.dev/api/admin-rest/2022-10/resources/product#get-products-count

Then just use the PageInfo object to get the link fo each set of additional items after your first query of X products - https://shopify.dev/api/usage/pagination-graphql#the-pageinfo-object

[Liquidator3358]

Yeah, I saw the total product count endpoint shortly after writing this and I undestand how to paginate.  The problem I will have is accurately getting the right amount of products per retailer.  If I have 200x of this retailer and 300x of another retailer, I want those numbers on mount, even if I have only fetched 100 products total.  Remember, I have zero collections... these are all individual products.  In order to aggregate them, I believe tags may be my only options.  Currently, I am filtering/sorting them off of my own JS (including splitting out the retailer name from the actual product title and using that in my dropdown).

EDIT: Oops, I figured it out!  I can do collections via tags. 😄 

[Liquidator3358 · Accepted solution]

In headless implementations, you may want to know the total collection count prior to pagination.  Let's say you've only fetched and displayed 100x items of a specific collection on your website, but when the user goes to filter through, you want to show that there are 1000x items.  You don't want the collection count to be tied to the pagination because you'll be giving the user the wrong information when they're looking.

In order to do this, you need to get the collection count from:

https://MYSHOPIFY-STORE.myshopify.com/admin/collections/collection_id

But what if you want to dynamically get the total count of ALL collections?  Simply query the collections end point in GraphQL, grab all the collection IDs, and run them through a batch API admin call per individual collection ID link (like the one above).  That way, you can grab the total count of each collection, even before your application knows about the products.

This gives the right product count in your filter/sorting, while being able to paginate smoothly and not worry about pulling collection data from your product queries.