Fix: No QueryClient set, use QueryClientProvider to set one

I've been asked this 3 times now and it seems to be a common mistake when following the docs for React Query.

Error: No QueryClient set, use QueryClientProvider to set one

Probably the shortest post I'm going to make but just like Redux, React Query needs to provide the data to the entire app via a provider

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

const queryClient = new QueryClient();

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}> // HERE!!!
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

Then from any component or page within your app, you can pull that data in and display it

import { useQuery } from "react-query";

const { data, refetch } = useQuery("comments", fetchComments);
Here's a link to the getting started guide that might help.

QueryClientProvider

Remember to say thank you

Comments

[Leonardo Cabral dos Santos]

I've done it, but some how it keeps throwing the error.

On _app.tsx

function App({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());
  // return (
  //   <AppProvider>
  //     <Component {...pageProps} />
  //   </AppProvider>
  // );
  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center w-screen h-screen">
          <Spinner size="xl" />
        </div>
      }
    >
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <QueryClientProvider client={queryClient}>
          <Component {...pageProps} />
          {process.env.NODE_ENV !== "test" && (
            <ReactQueryDevtools initialIsOpen={false} />
          )}
        </QueryClientProvider>
      </ErrorBoundary>
    </Suspense>
  );
}

on my login.tsx (login page):

const LoginPage: NextPage = () => {
  const user = useUser();

  return (
    <AuthLoader renderLoading={() => <Spinner center={true} size="xl" />}>
      <p>Login Page</p>
      <LoginForm />
      {user.data?.email}
      {user.data?.id}
    </AuthLoader>
  );
};

export default LoginPage;

Please Help

[Calvin Torra]

Heya, why are you initialising queryclient inside a usestate hook? Where did you get that example from?

[Leonardo Cabral dos Santos]

I tryed initializing the QueryClient outside the component as well, but the problem continue.

In the official guide:
tanstack.com/query/v4/docs/react/g...
it's inicializing in a useState, so i tryed too.

There's a particular situation, if i open the root page(index.tsx) that don't use any useQuery, then navigate to loginPage that there's a useQuery, the problem don't apers, but if i'm on loginPage, e refresh(F5) it throws the error :(

Does the _document.tsx have something todo with it?

[Sergey L.]

The QueryClientProvider is wrapping components which are inside the App(). So useQuery() can be called inside App() children components. I was tried to put useQuery() inside App()...