Hydration is broken, "No QueryClient set"

[Ephem]

Describe the bug

Hydration is broken. This can also be seen in the Next.js-example:

No QueryClient set, use QueryClientProvider to set one

The /hydration-package has at some point (v3 release?) switched from import { useQueryClient } from 'react-query' to import { useQueryClient } from '../react'. This bundles the useQueryClient code into the hydration package itself, which also means a separate QueryClientSharingContext gets created there. This is line 124 in dist/react-query-hydration.development.js:

var QueryClientSharingContext = /*#__PURE__*/React.createContext(false);

Because this context is different from the one QueryClientProvider uses, the hydration package can't find a queryClient to work with.

I plan to fix this but wanted to document the bug as soon as I found it.

[TkDodo]

thank you @Ephem , this is a good find. could this also be the root cause for #1936, where we essentially have the same problem with the dev-tools?

[Ephem]

I think the mechanism is the same, but I don't think the hydration package itself is the root cause of that one, I'm about to post over there too. 😄

Update: Note that the context sharing stuff that previously saved the devtools shouldn't reliably work with SSR since it relies on window being defined.

[joshuadoan]

Not sure if this will help, but I was getting errors about a missing QueryClientProvider in a create-next-app until I moved my components with useQuery out of my pages directory. Using "react-query": "^3.13.7"

[Ephem]

Thanks for that additional info @joshuadoan. I'm not sure if that is related or something else, but I'll keep it in mind!

I intend to submit a fix for this today.

[tannerlinsley]

🎉 This issue has been resolved in version 3.13.8 🎉

The release is available on:

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

Your semantic-release bot 📦🚀