Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[data] hydration errors #80

Open
Coachonko opened this issue Jul 3, 2024 · 4 comments
Open

[data] hydration errors #80

Coachonko opened this issue Jul 3, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@Coachonko
Copy link

Coachonko commented Jul 3, 2024 •
edited
Loading

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?
@Coachonko
Copy link
Author

Maybe caused by bad iteration keys?

@atellmer atellmer added the bug Something isn't working label Jul 21, 2024
@atellmer
Copy link
Owner

I need time for it. queries are complicated things

@atellmer atellmer reopened this Jul 21, 2024
@Coachonko
Copy link
Author

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
Copy link
Owner

atellmer commented Aug 31, 2024 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@atellmer @Coachonko