No QueryClient set, use QueryClientProvider to set one

When working with React-Query you might encounter the following error: No QueryClient set, use QueryClientProvider to set one, this source of this error might be one of the following reasons:

1. The application isn’t wrapped with QueryClientProvider.
2. OR, the contextSharing is being used in the application without telling React-Query that!

Let’s see how it can be solved in both cases.

---

1- The application isn’t wrapped with QueryClientProvider:

This case means that the app isn’t wrapped with the QueryClientProvider, so in order to fix it, we simply need to wrap our app with the QueryClientProvider.

import React , { useState } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

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

function Example() {
 const [fetchPosts, setFetchPosts] = useState(false);
  const { isLoading, error, data } = useQuery(
    ["posts"],
    () =>
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((res) => res.data),
    {
      enabled: fetchPosts
    }
  );

  if (isLoading && fetchPosts) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <button onClick={() => setFetchPosts(true)}>
        Fetch posts using useQuery{" "}
      </button>
      <h1>Posts</h1>
      {data?.map((post) => {
        return (
          <div style={{ display: "flex" }}>
            <span>{post.id}-&nbsp;</span>
            <div>{post.title}</div>
          </div>
        );
      })}
    </div>
  );
}

In the example above we’ve wrapped our <Example/> component with the QueryClientProvider component, then in the <Example/> component we were able to use the useQuery hook to fetch the data from the API.

Source code

---

2- contextSharing is being used in the app/micro-frontend

The error would result from this case, in case we’re using React-Query across different bundles/micro frontends without passing this option prop as a true, thus React-Query will throw this error.

contextSharing: boolean

defaults to false

Set this to true to enable context sharing, which will share the first and at least one instance of the context across the window to ensure that if React Query is used across different bundles or microfrontends they will all use the same instance of context, regardless of module scoping.

Docs

So in case, you’re facing the issue in this context, simply you need to set the contextSharing:true, As the following:

import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()
 
 function App() {
   return <QueryClientProvider client={queryClient} contextSharing={true}>...</QueryClientProvider>
 }

---

Photo from Unsplash.