Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
I'm building a custom storefront in React and am I'm running into an interesting issue with the `checkoutLineItemsReplace` mutation. It appears the mutations for updating an individual line item have been deprecated, so we now have to replace the entire line items array with `checkoutLineItemsReplace`.
My scenario is attempting to update the quantity of a single line item on my cart screen. I grab my stored line items array from my Checkout object, update the item in question's quantity, and send this new array to the `checkoutLineItemsReplace` mutation in the correct order.
The GraphQL response, however, is sporadically sending back those line items in a different order than they were originally. The resulting UI then jumps that line item to a new position in the list.
I have confirmed that the array of updated line items I'm sending to the mutation is in the order I want it in, and confirmed the response is (sometimes) in a different order.
Has anyone else ran into this issue? Is there a justifiable reason this is happening that I'm missing? Any way around it?
Hmm, interesting use case. Haven't tried that so can't offer any advice on that - besides, difficult to tell how Shopify implemented the checkout line item order.
But what surprises me is that you're using the checkout object for your cart. For me, cart ≠ checkout. They are two very distinct objects IMO which is why I'd implement my own cart entirely. Besides that, it would have the added benefit of being able to save carts, cast to wishlist, and many others.
Just a few thoughts. Best of luck!
@KarlOffenberger Thank you for your response!
I completely agree with you that it feels odd to use the Checkout object for my cart, however the Storefront API doesn't offer any sort of Cart object alternative that I can see in their docs. I did go down the route of creating my own Cart data client-side, however bailed and used the Checkout object once I realized using my own Cart data would remove my ability to display taxes/shipping/(sub)totals, since I can only get those values by adding lineItems to my Checkout.
Additionally, the Shopify storefront-api-example example repo uses the Checkout object as its source of truth for the cart as well, so I believe that is how they intended for the Checkout object to be used.
Very true. You probably already know more based on your hands on experience building out a store using Storefront API.
I haven't done so yet beyond writing a complete test case suite for the API itself and a few throw away POCs with React upon which I already quickly stumbled over many limitations within the Storefront API should anyone attempt a completely standalone storefront, PWA or what not. For example not being able to know total page size when querying products using cursors. Not being able to retrieve inventory levels beyond "available" or "unavailable" and many more. That led me down the path of experimenting with Liquid using no layout with JSON and Storefront API, Liquid rendering with React progressive enhancement and even rehydrating from a Liquid template (but the whitespace management is a PITA). In other words, I currently highly doubt a full-fledged standalone store using Storefront API can be built that is on par with what standard stores using Liquid can provide.
Further example - Liquid too differentiates between cart object and checkout object. I'll need to dig in a little more as soon as am done with other stuff to try understand better.
Do stay engaged in the community though and if you have more questions or find out something interesting, especially while implementing a store using Storefront API, do share if possible. I know I'd appreciate very much!
Best wishes.