persistWithLocalStorage causes content mismatch between server/client

[melanieseltzer]

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):

Warning: Text content did not match. Server: "0" Client: "1"
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef(ReactQueryDevtoolsPanel))
    in ThemeProvider (created by ForwardRef(ReactQueryDevtoolsPanel))
    in ForwardRef(ReactQueryDevtoolsPanel) (created by ReactQueryDevtools)
    in ThemeProvider (created by ReactQueryDevtools)
    in footer (created by ReactQueryDevtools)
    in ReactQueryDevtools (at _app.tsx:50)
    in QueryClientProvider (at _app.tsx:40)
    in MyApp (created by withRedux(MyApp))
    in Provider (created by withRedux(MyApp))
    in withRedux(MyApp)
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

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:

Warning: Expected server HTML to contain a matching <ul> in <section>.
    in ul (at pages/index.js:34)
    in section (at pages/index.js:24)
    in SomeComponent (at _app.js:14)
    in Hydrate (at _app.js:13)
    in QueryClientProvider (at _app.js:12)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

Commenting out the persist and deleting the localstorage item takes it away, but I still see some odd style mismatches:

Warning: Prop `style` did not match. Server: "display:flex;border-bottom:solid 1px #222e3e;cursor:pointer" Client: "display:flex;border-bottom:solid 1px #222e3e;cursor:pointer;background:rgba(255,255,255,.1)"
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef(ReactQueryDevtoolsPanel))
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef(ReactQueryDevtoolsPanel))
    in ThemeProvider (created by ForwardRef(ReactQueryDevtoolsPanel))
    in ForwardRef(ReactQueryDevtoolsPanel) (created by ReactQueryDevtools)
    in ThemeProvider (created by ReactQueryDevtools)
    in footer (created by ReactQueryDevtools)
    in ReactQueryDevtools (at _app.js:16)
    in QueryClientProvider (at _app.js:12)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

Expected behavior
No mismatching between server/client.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 3.5.6

Additional context
Add any other context about the problem here.

[melanieseltzer]

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 Warning: Text content did not match. Server: "1" Client: "xxx" error.

[tannerlinsley]

The devtools don't really need to SSR, so we could try adding the suppressHydrationWarning prop to the highest div in the devtools?

[tannerlinsley]

🎉 This issue has been resolved in version 3.5.14 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[italodeandra]

Is there a better way than

<div suppressHydrationWarning>
  <ReactQueryDevtools />
</div>

For avoiding this SSR warning?