Problems when getting an updated cart

Hydrogen and Storefront APIs
1

Hi.

I’m using the Storefront API to build an E-commerce platform with NextJS, but I’m having a problem where I run the cart query but get back an outdated version of the cart (at least in local dev).

When adding a new line I’m using the cart object I get in the response to refresh my state with that new cart, and it works, while also saving the cartId on cookies or local storage to retrieve it in case the user closes the page or refreshes, however, if the user does that (refresh or close and open later) I fetch the cart with the cart query, but I get an older version of my cart, and it updates eventually after several minutes.

I’ve tried multiple things, but I would expect the cart query to always return the latest cart. Also, the checkoutUrl is correct and the products shown in the checkout are correct, as well as the pricing, but if the user reloads the page with 6 items in the cart they might get 4 items on the new refreshed page.

Here’s the code for my query, I’m retrieving the first 100 variants just for testing. I’ve ensured the ID is correct and is always updated when a new cart is created or a new line is added to the existing cart (even though most of the time the ID doesn’t really change):

query cart($id: ID!) {
  cart(id: $id) {
    id
    checkoutUrl
    createdAt
    updatedAt
    lines(first: 100) {
      edges {
        node {
          id
          quantity
          merchandise {
            ... on ProductVariant {
              id
              title
              image {
                url
              }
              price {
                amount
                currencyCode
              }
              compareAtPrice {
                amount
                currencyCode
              }
              product {
                title
                handle
              }
            }
          }
        }
      }
    }
    cost {
      subtotalAmount {
        amount
        currencyCode
      }
      totalAmount {
        amount
        currencyCode
      }
    }
  }
}
2

Hello you can try to do this 1.Always Use the Response Cart After Mutation
You’re already doing this — keep doing it. After any mutation like cartLinesAdd, Shopify returns an up-to-date cart object in the mutation response. This is the most reliable version. 2.Delay the Cart Query After Page Reload
If you’re restoring the cart from localStorage or a cookie, and calling cart(cartId):

Add a short delay (500–1000ms) before calling the cart query.

Or even better, try the query twice, spaced 3. Disable Browser/Server Caching
If you’re running through a proxy or have getServerSideProps, make sure there’s no caching at the fetch or header level 4.Use a Client-Side Cache Busting Strategy
You can pass a timestamp or random value as a dummy variable to bust any Shopify-side caching (this works occasionally) 5.Consider Using Webhooks or Polling (if critical)
For production reliability (especially on mobile apps), consider polling the cart every few seconds or subscribing to changes if your stack supports it.