Collection product order changes randomly in development

[div-cowboy]

I'm working on a site with collections, and I've noticed the product order keeps changing when I run gatsby clean/develop. It usually just reverses the collection from newest products first, to oldest first, but other times one of the newer products is sprinkled into the old ones.

It would be amazing if we could specify product order in the graphql collections call, or maintain the Shopify collection product order 🙏

[tom-attachdigital]

Again I'm with @iamkratos on this, was actually about to post a similar issue.

I'm personally getting the oldest products first in a collection, I'd probably prefer newest to be the default, but it would be great if we could sort by what Shopify has available, at https://shopify.dev/docs/admin-api/graphql/reference/products-and-collections/productcollectionsortkeys, as there is currently no way to sort these products via GraphQL.

We can obviously sort the products, after filtering them by collection, but doing the above would be great and would allow us to sort by the manually set positions in Shopify as well as other ways only offered on the collections.

[div-cowboy]

This also happens in production, I've setup a dev site

Collection Page

Try going to one of the product pages, then going back to the same collection page using the breadcrumb, and you should see what I mean

[smthomas]

Thanks for surfacing this issue. There are a few collections issues we are looking at fixing. I can't commit to a timeline yet, but this is something we are looking to fix in the near future.

[sslotsky]

Since the order is changing at runtime, this tells me that it likely isn't a sourcing issue, because that page is built statically. So even if we provided a way for you to order these products (which I think we quite possibly should do), I actually don't think it would fix the issue you're experiencing.

Maybe this is a dumb question @iamkratos but I have to ask: is it possible that you've forgotten to do something like add the unique key prop to each item in that product list? This really seems like something that's happening at the React level and not GraphQL.

[div-cowboy]

@sslotsky double checked and I have unique keys set on my map function

The returned graphql is delivered in the opposite order as it is set in Shopify (last item in the collection is first, screenshots attached).

I tried to fix this in my code by doing this

let products = collection?.products.reverse();

but that made it worse by making the order inconsistent on reloads/re-renders.

If the returned graphql can be reversed to the correct order, we should be good on this one.

Let me know your thoughts

[sslotsky]

but that made it worse by making the order inconsistent on reloads/re-renders.

Well, that's the part that isn't making sense here. It won't matter which order I return them in if it doesn't behave consistently on re-render.

[div-cowboy]

newer products is sprinkled into the old ones

@sslotsky If I don't reverse() the order, ^that doesn't happen for me. At that point, it's just the order is reversed (consistently on reloads/re-renders)

[sslotsky]

I see! Thanks for clarifying.

I think what we can try doing is two things:

1. Make sure they are ordered in a certain way when we get them back from Shopify
2. When we're processing the product IDs, make sure to save them in reverse order (because we currently read the list backwards)

For the first item, do you have opinions on what it should sort by as a default? These are our options https://shopify.dev/docs/admin-api/graphql/reference/products-and-collections/productcollectionsortkeys

[div-cowboy]

@sslotsky No worries!

Yes. Ideally, they should be ordered how they are ordered on the Shopify collection page (I think this means the "collection-default"?). This keeps the desired order of products easy to edit from within Shopify.

[sslotsky]

Should be published in a few minutes.

[sslotsky]

https://www.npmjs.com/package/gatsby-source-shopify/v/5.0.0-rc.17

Feel free to reopen if the issue persists

[div-cowboy]

Totally works, thank you

[jc745]

but it would be great if we could sort by what Shopify has available, at https://shopify.dev/docs/admin-api/graphql/reference/products-and-collections/productcollectionsortkeys, as there is currently no way to sort these products via GraphQL.

Absolutely would be a great add. Being able to sort like this on Shopify's GQL explorer but not being able to translate it over to my Gatsby app is a tough pill to swallow!

query {
  collectionByHandle(handle: "classic"){
    products(first: 10,sortKey:BEST_SELLING) {
      ...
    }
  }
}

[sslotsky]

@jc745 would you mind opening a new issue for that request?