search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.4k stars 268 forks source link

Hydration errors when using `cart.get()` from context #2560

Open vemundeldegard opened 3 weeks ago

vemundeldegard commented 3 weeks ago

What is the location of your example repository?

Use Skeleton-template

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.7

What version of Remix are you using?

2.10.1

Steps to Reproduce

Use Skeleton-template or check any of the latest preview of Skeleton store. E.g. this preview from #2538

Hydration error occurs when adding an item to cart and refreshing the page. Image

Expected Behavior

There should not be any hydration errors and since the cart is server rendered, it should not fallback to 0 when the cart is not empty on the server.

Actual Behavior

Hydration errors occur when the cart is not empty. If cart is not empty it still shows as 0 before showing the cart total quantity count.

wizardlyhel commented 3 weeks ago

Thanks for reporting this issue.

The cart isn't always server rendered. It's in a deferred query so it wouldn't be server rendered unless the cart query returns before the server starts returning the response.

However, the hydration error is something we can look into with maybe using startTransition wrapper for initial state and transition state when the deferred data arrives

vemundeldegard commented 3 weeks ago

Aha, thanks for clarifying!

It would be awesome to get rid of the error to avoid confusion. I thought it was something on my end that I did wrong, until I checked for the same error on the Skeleton.