How to display more than 20 products in my app, when products are fetched via Shopify JS-Buy-SDK?

Highlighted
New Member
6 0 0

I am trying to create a hybrid app in react-native platform. I have more than 20 products in the shopify store and i want to display all those in the app. I am using JS-Buy-SDK to fetch the products. Only 20 of my products are getting displayed. How can i show the rest of my products in my app page?

I have read about pagination but I am confused on how to use it. Can someone provide an example for the same?

0 Likes
Highlighted
Shopify Partner
1840 177 711

Hi Pinky,

There isn't anything special about pagination using JS Buy SDK. The SDK itself uses Shopify's GraphQL client and that works along Relay connection specs.

A few generic recommendations

  • In case of doubt, do not rely on documentation. The soryce code is the only source of truth.
  • Do not focus too much on the Shopi-verse of how things are done and what they provide regarding GraphQL - it's just GraphQL so knowing GraphQL principles is far more valuable than trying to grok SDKs. Also, any client will work - if reading Shopify's code or any code isn't your cup of tea, then possibly some more established GraphQL clients such as Apollo, Lokka, Relay, Prisma will do because the internet is full of info on how to use them.

Back to your question. As mentioned before, the SDK uses Shopify's graphql client under the hood. It's the same bit that you configure on init with your store URI and access token. So let's assume somewhere in your code you are doing something like:

// assuming you're in some React component
this.props.client.product.fetchAll(10).then((res) => {
  this.setState({
    products: res,
  });
}

Now first you notice fetchAll(int) actually can take pageSize so you are not stuck with the default. Bump it up up to 250. More than that and the GQL endpoint will scream.

Now have a look at what's in that respinse. You will find the pageInfo object. From that you can tell if hasNextPage and hasPreviousPage. Now if hasNextPage is true, you want to page

this.props.client.fetchNextPage(this.state.products).then((res) => {
  console.log(res);  // ooh lala the next page
});

The pageSize is taken from the previous GQL call's first arg that we passed in the original fetchAll. More importantly, see how you just pass the previous products object? Yep, that's all there is to it, the client then figures out the rest.

Now then, the only meh part is that Shopify's GraphQL doesn't have a pageCounttotalCount or similar field which basically means that numbered page based paging in UI is nigh to impossible or impracticle. To workaround that just use a different UI pattern for paging such as "load more" and infinite scrolling.

That's it, hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
New Member
6 0 0

Hey Karl,

Thank you for your detailed response :) Since I was only having 27 products in my store for now,

client.product.fetchAll(30).then((products) =>{
  console.log(products);
});

served the purpose. 

0 Likes
Highlighted
New Member
1 0 0

Thanks a lot for the answer

0 Likes