"No QueryClient set" when upgrading from 3.12.0 to 3.12.1

[hmaurer]

Describe the bug

When upgrading from react-query@3.12.0 to react-query@3.12.1, getting the following error in the browser console:

QueryClientProvider.js:36 Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient2 (QueryClientProvider.js:36)
    at ReactQueryDevtoolsPanel2 (devtools.js:267)

To Reproduce

git clone git@gist.github.com:5ae9c1e18b571bafe17da22775b28329.git react-query-1936
cd react-query-1936
npm install
npm run dev

Open the dev server in the browser. You should see a blank page and observe the following error in the browser console:

QueryClientProvider.js:36 Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient2 (QueryClientProvider.js:36)
    at ReactQueryDevtoolsPanel2 (devtools.js:267)

Now change the version of react-query in package.json to 3.12.0, run npm install and re-start the dev server (interrupt npm run dev and run it again). You should now see App on the page and no error in the console.

[TkDodo]

Hm, I have seen something similar on stackoverflow: https://stackoverflow.com/questions/66553816/react-query-is-not-working-with-a-project-bootstrapped-with-vite

what 3.12.1 did was turn off an (undocumented) context-sharing feature where the QueryClient was attached to the window, which caused troubles for microfrontends mounted multiple times on the same page. The feature is now opt-in, see: https://react-query.tanstack.com/reference/QueryClientProvider

The QueryClient is now retrieved solely via react-context. If the <ReactQueryDevtools> are inside the <QueryClientProvider> in the react component tree, I don't see how the client could not be found :/

[hmaurer]

@TkDodo Thanks for your response! I should have specified that I am indeed using Vite. That said, ReactQueryDevtools is included under a QueryClientProvider (literally all I did was bumping the version from 13.12.0 to 13.12.1; I had no issues before).

[TkDodo]

can you create a repo that I can check out that reproduces the issue? I have no idea what vite is or how it works 😅 .

you can also try to turn on context sharing via the prop on the QueryClientProvider - that should "restore" the behaviour of 3.12.0. But again, we are just using react-context now :(

[hmaurer]

@TkDodo I've added a reproduction to the original post! And I tried turning on context sharing but it does not appear to solve the issue.

[TkDodo]

Interesting: it works fine in Brave, but not in Chrome or Firefox

never mind that. cached service worker was showing the wrong app 😅

[TkDodo]

it seems that the react-query-devtools come with their own copy of react-query, and that they done use a different context or so. I have to admit that I don't quite understand how this bundling works, or how vite differs from create-react-app or webpack...

[hmaurer]

@TkDodo do you think this is an issue that should be reported to Vite instead? I can't quite tell if react-query is doing something wrong or if there's an issue with VIte's pre-bundling strategy. And thanks again for taking the time to look into this!

[TkDodo]

it would be at least interesting to ask there, because it seems to work fine with other bundlers

[OliverwengFiltered]

we have the same issue which prevent us from upgrading react-query to latest version

[TkDodo]

@OliverwengFiltered Are you also using vite?

[michalHT]

I have the same issue in two projects: one using parcel and the other with a custom webpack config.

[TkDodo]

@tannerlinsley can you maybe shed some light on how the devtools communicate with react-query?

[michalHT]

Oh, not sure if it matters, but I forgot to mention I am not using react-query-devtools.

[TkDodo]

Oh, not sure if it matters, but I forgot to mention I am not using react-query-devtools.

yes, that's fine. the react-query-devtools package is v2 - v3 has them "built in"

[hmaurer]

@TkDodo I think you are onto something with there being two copies of react-query; at least that's what seems to be happening with Vite. But perhaps this is due to how the devtools sub-package is constructed?