Hydration errors when using cart.get() from context

[vemundeldegard]

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.

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]

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]

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.