SSR - onSuccess is never run to update state

[JosephScript]

Describe the bug

I'm running across what seems to be a bug in the way React Query and NextJS work together during SSR. I've created a minimal example which illustrates my issue.

When the useQuery is dehydrated, the onSuccess function never runs. Is this a misconfiguration on my end? I want data to be called once on the server, and then persisted on the UI until the client refetches for any reason (tab switch, call queryClient.refetch, etc).

Your minimal, reproducible example

https://github.com/JosephScript/react-query-ssr

Steps to reproduce

Clone the repo, run yarn and yarn next dev. When the page opens you'll see it say "Hello unknown" and then after switching tabs (if refetchOnWindowFocus is true) or waiting until a refetch, it will be correct after the UI makes a request and the onSuccess function fires as expected.

Expected behavior

The onSuccess function should have run on SSR and react should have state already populated with the API results.

If you instead use the deconstructed "data" and then "useEffect" to set the state it works as expected when page mounts.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Linux Ubuntu, tested in Firefox and Chromium latest.

react-query version

3.34.19

TypeScript version

4.6.3

Additional context

Edited for formatting.

[JosephScript]

@TkDodo mentioned over on discord that it's best just to use the data directly rather than mixing state and onSuccess.