Error: No QueryClient set, use QueryClientProvider to set one

[HashiW]

I am trying to use a simple useQuery Hook however it always produce the above error. I believe this is due to the new updates and changes in v3. How should I be using useQuery in V3 ?

Desktop (please complete the following information):

• Windows
• Opera
• Version: [e.g. 22]

[TkDodo]

Have you read the migration guide?
https://react-query.tanstack.com/guides/migrating-to-react-query-3

As the error suggests, you need to add a QueryClientProvider.

[Chijioke91]

@HashiW Can you check where you are placing your dev-tool, It is meant to be inside your QueryClientProvider....That was my error

For example mine was previously

<Fragment>
   <QueryClientProvider client={queryClient}>
      <MyApp/>
    </QueryClientProvider>
<ReactQueryDevtools initialIsOpen={false} />
</Fragment>

But I changed it to

<Fragment>
   <QueryClientProvider client={queryClient}>
      <MyApp/>
     <ReactQueryDevtools initialIsOpen={false} />
   </QueryClientProvider>
</Fragment>

Then everything worked...Hope this works for you too

[juancarlosqr]

Same error... misplacing the ReactQueryDevtools 😕 Thanks

[nairo-mudumane]

I had the same error, thank you for helping

[dannyoka]

Had the same error! Thanks!

[faran4engg]

You can mock useQuery as below:

jest.mock('react-query', () => ({ useQuery: () => ({ isLoading: false, error: {}, data: [], }), }));

[Karnak19]

I have the same error aswell. I'm really confused, it seems nothing is misplaced. 🤕

// index.jsx

const queryClient = new QueryClient();

ReactDOM.render(
  <StrictMode>
    <QueryClientProvider queryClient={queryClient}>
      <Player />
      {process.env.NODE_ENV === "development" && <ReactQueryDevtools />}
    </QueryClientProvider>
  </StrictMode>,
  document.getElementById("root")
);

// api.js

export const getSongs = () => axios.get(`${API_URL}/songs`);

// player.jsx

import { getSongs } from "./api";

function Player() {
// .......
  const { isLoading, error, data, isFetching } = useQuery("songs", getSongs);
// .......

Desktop (please complete the following information):

• macOS Big Sur 11.1 (Apple M1)
• Firefox 85.0b9 / Chrome 88.0
• react-query 3.6.0
• react 17.0.1
• react-scripts 4.0.1

Edit: After deleting and re-installing node_modules, it works ✅ 🤷

[carloskiki]

I am getting the same error, I don't understand everything looks in place:

import React from "react";
import { QueryClient, QueryClientProvider } from "react-query";

import Routes from "./src/Routes";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Routes />
    </QueryClientProvider>
  );
}

Desktop:

• MacOS 11.2 (Apple M1)
• react-query 3.13.4
• react 17.0.2
• react-scripts 4.0.3
• react-native/expo SDK 40.0.1

[Kayyow]

Same for me with:

import React from 'react'
import Router from './Router'
import { QueryClient, QueryClientProvider } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

const queryClient = new QueryClient()

const App = () => (
  <QueryClientProvider client={queryClient}>
    <Router />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
)

export default App

• macOS 11.2.3 (Intel Core i7)
• react-query 3.13.6
• react 17.0.2
• vite 2.1.5

[TkDodo]

vite has problems with the devtools. have a look here: #2113

[Kayyow]

Thank you for your quick answer

[icyJoseph]

I think for a bunch of people this might happen if you are following Tan's course. In which case, you should probably install v2 instead, or try to learn and update as you go, until he releases the v3 course.

[ManikantaMaddipati]

I am facing the same issue. :
https://stackoverflow.com/questions/67582043/error-no-queryclient-set-use-queryclientprovider-to-set-one

[TkDodo]

and I think you found the solution already ;)

[revskill10]

Got this issue with nextjs 12

[icyJoseph]

Which setup do you have? I am using next 12 too and have no issues what so ever.

[bennik88]

I'm having the same issue with "next": "12.2.4", "firebase": "^9.9.2", "@react-query-firebase/firestore": "^1.0.0-dev.7", "@tanstack/react-query": "^4.1.0" And can't get rid of it. For sure added the provider like in the docs.

[TkDodo]

react-query-firebase/firestore needs react-query v3 as peerDependency:

• https://github.com/invertase/react-query-firebase/blob/0acc863d8c5a89974fca64307ddddbba173e72d9/packages/firestore/package.json#L44

so likely you wind up with two versions of react-query.

[asifsaho]

I am having this issue with my next js setup. I have the provider in _app.tsx but still complaining.

import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { SessionProvider } from "next-auth/react";
import { AppProps } from "next/app";
import Head from "next/head";
import { useState } from "react";
import { RecoilRoot } from "recoil";
import { theme } from "theme";
import { staticStr } from "utils/staticStrings";
import "./global.css";

export default function MyApp(props: AppProps) {
  const {
    Component,
    pageProps: { session, ...pageProps },
  } = props;

  const queryClient = new QueryClient();

  return (
    <SessionProvider session={session}>
      <StyledEngineProvider injectFirst>
        <CacheProvider value={cache}>
          <Head>
            <title>{staticStr.title}</title>
            <meta
              name="viewport"
              content="minimum-scale=1, initial-scale=1, width=device-width"
            />
          </Head>
          <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              <RecoilRoot>
                <QueryClientProvider client={queryClient}>
                  <>
                    <Component {...pageProps} />
                    <ReactQueryDevtools />
                  </>
                </QueryClientProvider>
              </RecoilRoot>
            </ThemeProvider>
          </StyledEngineProvider>
        </CacheProvider>
      </StyledEngineProvider>
    </SessionProvider>
  );
}

[chrift]

I am also having this error using a set-up similar to the above, except the queryClient instantiation is outside of the app function

Next v12
react-query 3.34.19
@tanstack/react-query-devtools 4.3.5

Have tried bumping react-query to the latest version, and also switching to @tanstack/react-query 4.3.4, still get the same error

[asifsaho]

My problem is solved, I needed to remove the old version. Somehow two versions were there and created an issue.

[chrift]

Following on from my reply: #1461 (reply in thread)

I switched back to
react-query 3.34.19
and instead of installing the devtools separately, I am importing them like:
import { ReactQueryDevtools } from 'react-query/devtools'

Now works.

[moyongshi]

react-query is old,
the new is
"@tanstack/react-query": "^4.3.4",
"@tanstack/react-query-devtools": "^4.3.5",

[MoAnsir]

This fixed my problem too. I had
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
And was breaking my app

[gabrielbrattgard]

Same here. My guess is that import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; is only compatible with v4 as of now and v3 should use the bundled import { ReactQueryDevtools } from 'react-query/devtools'

@moyongshi v4 is still in beta. v3 is still the stable version.

[TkDodo]

@moyongshi v4 is still in beta. v3 is still the stable version.

where do you have that information from please? We need to clear up this confusion. v4 was released half a year ago:

• https://tanstack.com/blog/announcing-tanstack-query-v4
• https://tanstack.com/query/v4/docs/react/overview
• https://www.npmjs.com/package/@tanstack/react-query

Latest version is 4.20.4 already! The v3 docs redirect to the v4 docs 😅

[laurix42]

I had the same error but with in my monorepo setup, so basically the project i was working with had tanstack/react-query installed locally in the project and the same project also imports another workspace project with tanstack/react-query installed there too, so what have i done to get it fixed was using that workspace to export the reactQueryProvider and use on my main project. Thats kinda weird that happens but it worked.

PS : im using pnpm as package manager

[TkDodo]

I had the same issue with pnpm yesterday. FYI, it's because pnpm resolves dependencies that have peerDependencies (like react-query) "differently" and you might wind up with multiple copies of the same version of react-query in node_modules, which explains the context issue.

For me, the issue was solved by also adding react and react-dom as peerDependencies to the lib:

• pnpm creates multiple installations for same dependency pnpm/pnpm#5351 (comment)

[laurix42]

I have something in that conditions that might be related to this problem, basically what happens is: if i do not import the types of useMutation or useQuery from react-query it fails to reffer and gives me a error:

But if i import UseQueryResult from react-query it stops.

[iamrakhmatov]

I have exact same monorepo description as Leandro but I am getting this issue because of generated graphql file naming

ex:
If file name products.graphql it generates products.generated.ts and there is no error
but If file name is getProducts.graphql it generates getProducts.generated.ts and there is an error inside the file same as following ->

Using:

• Turborepo
• @tanstack/react-query: ^4.19.1 (on both main app and shared-graphql package)

FYI:

• main app uses vite
• pnpm as a package manager

[iamrakhmatov]

Sorry!!!
Correction:
This wasn't related to file naming it just gives this error anyway despite the name of the file

[iamrakhmatov]

but in my case I am getting two errors ->

@TkDodo is there a way to solve this without tweaking peerDependencies?

[jacobgoh101]

On my end, it works after I update both @tanstack/react-query & @tanstack/react-query-devtools to the latest version.

[00155837364765867]

Context providers can be a real pain in JS, especially when building / exporting a module.
If you're seeing this error in your published node_modules (i.e. you're writing a module for use in another App), this might be the issue (there are so many ways for this error to show up!):
As most are no doubt aware, the QueryClientProvider needs to be 'wrapped around' the file that refs useQuery - i.e. it cannot be in the same file.
For a regular App, this isn't an issue, as the wrapper is the App component. For a module, you likely don't have an 'App' - rather just a bunch of exports.
So...create a separate wrapper file and export that. I also found adding contextSharing={true} is needed...
Like this:

`const MyModuleWrapper = (props) => {

return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
        <MyModule/>
    </QueryClientProvider>
);

}`

Hopefully, with some luck this might help someone. It may not....this issue can rear its head in many different ways!

[azmaat1]

Thanks

[jose-codegourmet]

I was able to fix this by double checking on the imports

_app.tsx

import {
  DehydratedState,
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

posts.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

hope this helps