[data] hydration errors

[einar-hjortdal]

I am experiencing hydration errors seemingly caused by the useQuery hook.
I'm trying to reproduce it reliably but I am having trouble with that, as the hook works fine in isolation.
So far all I can tell is that adding one useQuery hook that works fine in isolation, to a page with more than one useQuery hook, seems to cause a hydration error.
I will try to investigate further.

A relatively smaller version of my app is here with comments and repro steps.
In this repository you can also observe the DisplayCatalogItems component possesses the <Link /> isssue discussed in #77

I have discovered a workaround for these useQuery hydration errors, it involves wrapping the components using useQuery in more html elements.

I have noticed that the base64 encoded state the server produces contains duplicated content. Is this expected?

[einar-hjortdal]

Maybe caused by bad iteration keys?

[atellmer]

I need time for it. queries are complicated things

[einar-hjortdal]

Hey sorry I closed this because the issue disappeared on my project after I wrapped some components in <div> instead of having deep fragment trees, and some other component also iterated components bad assigned them bad keys.
These problems, in combination with useQuery, somehow caused the hydration errors.
I think maybe users with less skill issues than me may never run into these errors 💦

[atellmer]

I have noticed that the base64 encoded state the server produces contains duplicated content. Is this expected?

Yes, each useQuery placement in the code is serialized separately, even if the content is identical. This is necessary so that on the client, the hooks have data based on the index in this state.