Fix - No QueryClient set, use QueryClientProvider to set one

I’ve been asked this 3 times now “No QueryClient set, use QueryClientProvider to set one” - 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