When working with React-Query, you may encounter the following error: No QueryClient set, use QueryClientProvider to set one. This error may be caused by one of the following reasons:

1. The application is not wrapped with the QueryClientProvider component.
2. The contextSharing option is being used in the application without being set to true.

Let’s explore reason 2 in more depth.

Context Sharing is being used in the app/micro-frontend

If you are using React-Query across different bundles/micro frontends without passing the contextSharing option as true, React-Query will throw this error. No QueryClient set, use QueryClientProvider to set one

contextSharing is a boolean value passed to the QueryClientProvider

This is false by default in any version of react-query that surpasses 9.7.0.

If you want context to be shared across multiple query client instances within the window then set it this prop value to true to enable context sharing. This ensures that if React-Query is used across different bundles or microfrontends, they will all use the same instance of context, regardless of module scoping.

If you are facing the issue in this context, you need to set contextSharing to true, as follows:

<QueryClientProvider contextSharing={true}>
  {/* Your App */}
</QueryClientProvider>

If you wish to keep the context specific to each instance of the queryClient that get’s initialised, then do not pass a value for contextSharing as it’s defaulted to false.

import { QueryClient, QueryClientProvider } from "react-query"
const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  {/* Your App */}
</QueryClientProvider>