Concurrent adds on empty cart creates two different carts

Hydrogen and Storefront APIs
1

Hi,

I am building an app that adds additional products when a customer clicks “Add to cart” on the main product. I do this by observing form submit events and calling the storefront `/cart/add` API. Both calls to `/cart/add` basically fire at the same time.

According to this changelog this should work and Shopify should properly handle the concurrent requests. However, it doesn’t work for me. I always end up with a cart that just contains one of the products.

What I noticed is:

  • Both requests succeed with a 200 HTTP response. The response body shows each item was added
  • However, both requests return a different Set-Cookie `_shopify_essential` header, even though they return the same Set-Cookie `cart` header

Consecutive requests to `/cart.js` use the same `cart` cookie value but they use the `_shopify_essential` value of the `/cart/add` request the completed last.

This seems to happen only when the cart was empty before adding the products. My best guess is that this is a race condition when establishing the cart state.

Is this a known issue and are there any workarounds?

2

Hey @Tobias_Dierich , happy to look into this? Could you capture a HAR from a fresh incognito storefront session, starting with an empty cart, and reproduce the issue once? I’d just make sure it includes both /cart/add requests and the following /cart.js request.

Could you also include the shop domain, exact UTC reproduction time, and the x-request-id response header from each request? I’d also just reccommend using a test session without real customer information, since HAR files can contain cookies and other sensitive data.

If the HAR export removes the Set-Cookie headers, screenshots of those response headers would help too. I’ll set up a DM with you now so we can share that privately, just in case - speak to you that way soon!