Next.js v12 - No QueryClient set, use QueryClientProvider to set one

[angelmtztrc]

Describe the bug I'm developing a Next.js application, and I want to use react-query to handle requests on both client and server sides. I already set up the requirements for react-query (provider and the hydrate). But somehow when I try to use the useQuery hook Next.js throws me the following error No QueryClient set, use QueryClientProvider to set one.

To Reproduce Steps to reproduce the behaviour:

1. Create an _app.tsx with the following code:

   
   import type { AppProps } from 'next/app';
   import { QueryClientProvider, QueryClient, Hydrate } from 'react-query';

const queryClient = new QueryClient()

const MyApp = ({ Component, pageProps }: AppProps) => { return (

) }

export default MyApp;

2. Create `pages/posts.tsx`
3. Send an request on the client
```ts
const PostPage = () => {
  const { data } = useQuery('posts', getPosts)

  return (
    // ...
  )
}

4. Next.js throws the No QueryClient set, use QueryClientProvider to set one error.

Additional context I'm using Next.js version 12.0.4.

This bug is weird because if I delete my useQuery then, reload my page (and wait for the page for successful render) and if I add the hook again, and save the changes seems to works.

[FMGordillo]

I'm having the same problem, how did you manage to solve this @angelmtztrc ?

[luisnaranjo733]

@angelmtztrc did you ever figure this out?

I'm running into this with a next.js app that sets the query context provider at the _app level (using SSG) Surprised to be hitting this

Maybe it's expected that this is not supported when doing SSG with getStaticProps?

[TkDodo]

Please show a codesandbox reproduction if you have an issue.

[icebearlabs]

I have the same issue on my system with Nextjs 12

[manuelj555]

I have the same issue :-(

[icebearlabs]

For your information, I didn't get it to work. I've ripped out react-query where I needed it and replaced it with axios and an axios plugin called https://axios-cache-interceptor.js.org/#/.

This works the way I need it, so the same call isn't repeatedly called on the backend. Maybe look into that if you need an alternative.

[icebearlabs]

I wanted to reproduce the issue, but couldn't reproduce with a simple codesandbox.

https://codesandbox.io/s/next-js-forked-yyrr64

[TkDodo]

99% of the time, this means you have two versions of react-query floating around. This is also why things work in a sandbox, so it highly depends on your setup: monorepo, which bundler you are using etc ...

[OmarOmeiri]

I have the same problem, I used the example from the docs. I'm testing in next@12.3

app.ts

import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'

export default function MyApp({ Component, pageProps }) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  )
}

It is an empty boilerplate project created with npx create-next-app@latest --ts.

Logs

```js Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient (file:///home/omar/Lullo/Fin/Client/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:34:11) at useGoogleAuth (webpack-internal:///./hooks/useGoogleAuth.ts:24:92) at MyApp (webpack-internal:///./pages/_app.tsx:52:70) at renderWithHooks (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderIndeterminateComponent (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15) at renderElement (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient (file:///home/omar/Lullo/Fin/Client/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:34:11) at useGoogleAuth (webpack-internal:///./hooks/useGoogleAuth.ts:24:92) at MyApp (webpack-internal:///./pages/_app.tsx:52:70) at renderWithHooks (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderIndeterminateComponent (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15) at renderElement (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) error - Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient (file:///home/omar/Lullo/Fin/Client/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:34:11) at useGoogleAuth (webpack-internal:///./hooks/useGoogleAuth.ts:24:92) at MyApp (webpack-internal:///./pages/_app.tsx:52:70) at renderWithHooks (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderIndeterminateComponent (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15) at renderElement (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/home/omar/Lullo/Fin/Client/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) { page: '/' } ```

[TkDodo]

@OmarOmeiri cool then create an open source reproduction that fails and link me to it please.

[OmarOmeiri]

@TkDodo Humm, err. I was creating the repository for you but noticed the following issue.

I created a custom useQuery hook for increased type-safety for my use case and imported this hook before the query client was available. silly me.

Sorry for the false positive.

[aqumus]

I was facing a similar issue but looked like there was this stupid error I made of rendering some component outside of QueryClientProvider which I missed looking.

Creating a basic app, helped me to isolate the issue, sharing just in case if this helps anyone facing a similar issue. https://stackblitz.com/edit/nextjs-d5w4fa?file=pages%2F_app.tsx

[luke-goddard]

Probably specific to me, but I incorrectly had tanstack/react-query and react-query installed in different packages in my monorepo.

[licesma]

@luke-goddard OMG you are a hero! had the same issue

[yashsway]

Can confirm that this is due to accidentally installing the old version of react query (published as react-query in NPM) and trying to use it with the new version of react query devtools (@tanstack/react-query-devtools). The package you need is @tanstack/react-query.

[yhoungdev]

I am facing same issues here. i had cross check and i am only using version 5

this is the error i am getting Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient (file:///vercel/path0/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:14:11) at useBaseQuery (file:///vercel/path0/node_modules/@tanstack/react-query/build/modern/useBaseQuery.js:23:18) at useQuery (file:///vercel/path0/node_modules/@tanstack/react-query/build/modern/useQuery.js:7:10) at k (/vercel/path0/.next/server/chunks/6054.js:1:5746) at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44) at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253) at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89) at Xc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409) at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210) at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)

its only happening when i try to build the next app, i am using the Nextjs app folder 

[ntalamdotcom]

Hi, I am facing the same issue here.

"dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@mui/x-data-grid": "^7.14.0", "@tanstack/react-query": "^5.52.3", "jira-client": "^8.2.2", "next": "14.2.7", "react": "^18", "react-dom": "^18", "ts-jira-client": "^1.0.6" }, "devDependencies": { "@types/jira-client": "^7.1.9", "@types/node": "^20.16.2", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.7", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" }

[mikolertesx]

Hi, I am facing the same issue here.

"dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@mui/x-data-grid": "^7.14.0", "@tanstack/react-query": "^5.52.3", "jira-client": "^8.2.2", "next": "14.2.7", "react": "^18", "react-dom": "^18", "ts-jira-client": "^1.0.6" }, "devDependencies": { "@types/jira-client": "^7.1.9", "@types/node": "^20.16.2", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.7", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" }

I've noticed there's some times when tanstack/react-query has a React-19 next to it in the lock-files. I don't know how to specify it to be React-18 or React-19 either way so ther might be some issues if you mix the both of them.

[TkDodo]

I've noticed there's some times when tanstack/react-query has a React-19 next to it in the lock-files.

This likely means you have two versions of react (nextjs brings their own version), so the context consumer doesn't see the context from the producer.