vicious-gold

Unsuccessful attempt to migrate react-query v3 to v4

Hi! I'm trying to migrate v3->v4, doing what the docs say but get "Error: No QueryClient set, use QueryClientProvider to set one"

13 Replies

vicious-goldOP•4y ago

In the stack trace I see that it's triggered in a deeply nested component. The app is wrapped in a lot of stuff like Suspense, Redux, Theme, i18 etc. I tried to add contextSharing to QueryClientProvider but no luck. What could possible go wrong? If I try to call useQuery at the top level it works fine.

other-emerald•4y ago

You might have a version missmatch somewhere. Make sure that you have updated all tanstack packages to the same version. Then you could check if other libs do not depend on the older version. Also you can check if your bundler creates a cache for node modules and remove it. (Ex Vite)

vicious-goldOP•4y ago

We have Lerna+Webpack monorepo, no other tanstack packages. I cleaned everything, reinstalled from scratch and still the same error 😦 One package had react-query as peerDependency but I changed it to '@tanstack/react-query' I discovered that when I useQuery directly in a certain conmponent it works fine, but when I import a function that returns useQuery from a package built with tsc then it doesn't work. Still not sure how to fix that though...

other-emerald•4y ago

Hmm, if it's built, then make sure that you mark tanstack packages as external, so they would not be bundled. Maybe that is the problem in your case

fascinating-indigo•4y ago

the error 99% comes from the fact that there is a second version of react-query floating around that uses it's own context

vicious-goldOP•4y ago

@TkDodo 🔮 I searched the whole project and there are no references to 'react-quesry' @MrMentor where do I mark it?

other-emerald•4y ago

För webpack you have externals config option I believe. But this should be done for additional packages only, not the main app

vicious-goldOP•4y ago

The package that exports custom hooks with useQuery is built with tsc, there's no webpack there

other-emerald•4y ago

No idea then 🤷 Maybe look at the lock file if different versions are listed there? And btw check if you do not have require and import mixed (ex in the dependency you are consuming) cause this will end up resolving to a different bundle (cjs vs esm)

fascinating-indigo•4y ago

not sure what that means. is the package bundled somehow or do you just depend on the package itself inside the monorepo? If so, does that package have node_modules of it's own due to devDependencies? All of that factors into this ... one thing you can do is built your entire app, then inspect the output. you should be able to see if there is a react_query and something like react_query$1 or something in there...

vicious-goldOP•4y ago

Thanks for the answers. I think I start seeing what could be the problem. The problematic package is a Lerna's package, it has it's own package.json and is built with typescript's native tsc command which outputs plain js files. The content of ts file looks like this:

 
import { useQuery } from '@tanstack/react-query'
export function useStarBooking() {
  return useQuery(['someKey'], someFn)
}

 
import { useQuery } from '@tanstack/react-query'
export function useStarBooking() {
  return useQuery(['someKey'], someFn)
}

And the js output is

var react_query_1 = require("@tanstack/react-query");
function useStarBooking() {
    return (0, react_query_1.useQuery)(['someKey'], someFn);
}

var react_query_1 = require("@tanstack/react-query");
function useStarBooking() {
    return (0, react_query_1.useQuery)(['someKey'], someFn);
}

So I guess it doesn't work because of cjs/esm incompatibility mentioned by @MrMentor But the question is why does it work with v3? Is it a breaking change in v4 and I have to change how we build/import things now?

other-emerald•4y ago

I guess you could change the tsconfig for the package in question to output es modules instead of commonjs. That should fix the issue.

vicious-goldOP•4y ago

Yes! That fixes the problem. Thank s lot!🤩

Gaming

Programming

Unsuccessful attempt to migrate react-query v3 to v4

Did you find this page helpful?