DEV Community

Cover image for Fix: No QueryClient set, use QueryClientProvider to set one
Calvin Torra
Calvin Torra

Posted on • Updated on • Originally published at calvintorra.com

Fix: No QueryClient set, use QueryClientProvider to set one

#javascript #react #nextjs

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

QueryClientProvider

Remember to say thank you

Top comments (4)

Collapse
 
leocds13 profile image
Leonardo Cabral dos Santos • • Edited

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Image description

Please Help

Collapse
 
calvin087 profile image
Calvin Torra •

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

Collapse
 
leocds13 profile image
Leonardo Cabral dos Santos • • Edited

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?

Collapse
 
forseti93 profile image
Forseti93 • • Edited

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()...

Read next

chriisduran profile image

Simulate a black hole for React Native app?

Christopher Duran -

nhannguyendevjs profile image

JavaScript Design Patterns - Structural - Decorator

Nhan Nguyen -

sachadee profile image

Encrypt/Decrypt Data between Python 3 and JavaScript (AES algorithm)

SachaDee -

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -