search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.37k stars 2.89k forks source link

"No QueryClient set, use QueryClientProvider to set one" after adding @suspensive/react-query #6225

Closed PetrovaDaria closed 1 year ago

PetrovaDaria commented 1 year ago

Describe the bug

In our production project we use monorepository. Every app uses its own version of react-query. Recently we started to get an error "No QueryClient set, use QueryClientProvider to set one" accompanied by white screen during the local development. Only after creating demo reproduction repository we understood that problem is caused after adding new dependency @suspensive/react-query. It is a floating error, sometimes it appears, sometimes it disappears. Usually it affects only one app, and the second one is working. I described more details of project configurations and our attempts to solve problem in a demo reproduction repository. Also I created a bug issue in @suspensive/react-query repo https://github.com/suspensive/react/issues/252

Your minimal, reproducible example

https://github.com/PetrovaDaria/rq-monorepo-demo

Steps to reproduce

https://github.com/PetrovaDaria/rq-monorepo-demo#how-to-reproduce-it

Expected behavior

I expect that I never recieve error "No QueryClient set, use QueryClientProvider to set one" during local development.

How often does this bug happen?

Sometimes

Screenshots or Videos

No response

Platform

OS: MacOs Broswer: Google Chrome

Tanstack Query adapter

react-query

TanStack Query version

v4.28.0 v.4.35.7

TypeScript version

v4.9.5

Additional context

No response

TkDodo commented 1 year ago

I can see two versions of react-query in your lock file, which is the reason. Each version has its own context, and the contexts aren't visible between versions:

https://github.com/PetrovaDaria/rq-monorepo-demo/blob/4cd3a7329252fa90d94fc08766f8106583bdbf3d/yarn.lock#L585-L599

PetrovaDaria commented 1 year ago

Yes, but it is monorepo, it always has only one yarn.lock. Each app can have its own dependencies with different version number. If I don't specify common dependency in root package.json I am able to define different versions to each app what I did in this example.

TkDodo commented 1 year ago

in a monorepo, its advised to use the same version of dependencies across packages. We use a tool to enforce this: https://github.com/Thinkmill/manypkg

but of course, each app could have their own dependencies. I'm not sure how this works with peerDependencies, or how yarn does that resolving, or how suspensive-react-query comes into play.

you also have different versions of the devtools, and you're missing a fix we made with peerDependencies:

v4.29.0 depends on "@tanstack/react-query": "4.28.0"

v4.25.7 depends on "@tanstack/react-query": "^4.35.7".

the ^ makes all the difference, so please upgrade to at least latest v4 everywhere.