@tanstack/react-query: No QueryClient set, use QueryClientProvider to set one

Question

Premise: i got this error only on production (next.js) and not always, just sometimes.

I use the package @tanstack/react-query in my next.js project. Sometimes in production, out of nowhere, i got the issue

No QueryClient set, use QueryClientProvider to set one

and the app breaks. This is my implementation

export default function App({ Component, pageProps }: AppProps) {
    const [queryClient] = useState(() => new QueryClient(options));

    return (
        <QueryClientProvider client={queryClient}>
            <ErrorBoundary>
                <HydrationBoundary state={pageProps.dehydratedState}>
                    <Providers pageProps={pageProps}>
                        <Component {...pageProps} />
                    </Providers>
                </HydrationBoundary>
            </ErrorBoundary>
        </QueryClientProvider>
    );
}

Note that in the same project i use another package, wagmi, which uses @tanstack/react-query too but of a different version (i use 5.0.0, they use 4.3.2).

I appreciate any tips on how to solve this.

Show your package.json and your imports. This GitHub issue seems to suggest it’s common when people accidentally have react query and tanstack/query installed and aren’t using all the same imports github.com/TanStack/query/issues/3069#issuecomment-1518582538. — Adam Jenkins
– Adam Jenkins, Commented Dec 30, 2023 at 19:55
@AdamJenkins i only have "@tanstack/react-query": "^5.15.5" in my package.json — mpalma
– mpalma, Commented Dec 30, 2023 at 20:29
I missed the part about the mismatched packages, you do indeed have 2 versions because of the other dependency. Suggestion is to downgrade yours to 4.x. — Adam Jenkins
– Adam Jenkins, Commented Dec 30, 2023 at 20:36
@AdamJenkins i already tried to use the version 4.x, but the error happens still. It seems that having the same version twice can cause problem too. — mpalma
– mpalma, Commented Dec 30, 2023 at 20:48
no it won’t. If you are using the same version as your dependency, then they’ll only be one version in node modules. Run npm ls on tanstack query after you do it to confirm you only have one version. A good idea is to blow away your node modules and delete your next build cache as well before you do it. — Adam Jenkins
– Adam Jenkins, Commented Dec 30, 2023 at 21:24

TkDodo · Accepted Answer · 2024-01-05 22:05:30Z

1

if wagmi has a dependency on tanstack-query v4, you also need to use tanstack-query v4. Using a different version means you have multiple versions of react-query installed, which means the context Provider created from the v5 import will not be "visible" to the consumers that use the useQuery hook from v4.

answered Jan 5, 2024 at 22:05

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

@tanstack/react-query: No QueryClient set, use QueryClientProvider to set one

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related