-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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.
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
persistWithLocalStorage causes content mismatch between server/client #1543
Comments
This is a much better codesandbox showing the issue exactly how I'm experiencing it in my own app: https://codesandbox.io/s/react-query-persist-bug-4k32q Repro instructions the same - click the buttons to shoot off some queries, refresh the page so they get saved to local storage, then open the console to see the |
The devtools don't really need to SSR, so we could try adding the |
🎉 This issue has been resolved in version 3.5.14 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Is there a better way than <div suppressHydrationWarning>
<ReactQueryDevtools />
</div> For avoiding this SSR warning? |
Describe the bug
Not 100% sure I can accurately describe the issue (mostly because I can't get an exact reproduction going), but I'll do my best.
It seems that when using
persistWithLocalStorage
in a Next.js app, it causes a content mismatch with the devtools between server/client when refreshing the page (after the queries are saved to local storage).This is what I get in my app (not a public repo):
I'm assuming the issue is the devtools thinks there isn't any queries on the server, but then hydrates them on the client from local storage, causing a mismatch.
To Reproduce
Small repo following the Next.js example:
https://codesandbox.io/s/billowing-grass-z1l7t
I can't seem to reproduce the exact same error above from my app, but it still shows some warnings in the console about mismatching content. Start by saving some queries to the cache (click the 1 2 3 4 5 buttons to generate different content) and then refresh the page to persist the queries in local storage. The console flashes this warning:
Commenting out the persist and deleting the localstorage item takes it away, but I still see some odd style mismatches:
Expected behavior
No mismatching between server/client.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: