No QueryClient set, use QueryClientProvider to set one [Fix]

# No QueryClient set, use QueryClientProvider to set one [Fix]

The React Query error "No QueryClient set, use QueryClientProvider to set one" occurs when you forget to wrap your React application in a QueryClientProvider component.

To solve the error, wrap the entry point of your application (e.g. the App component) in a QueryClientProvider .

Here is an example that shows how you should wrap your main component in a QueryClientProvider .

Copied!
import React from 'react';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from 'react-query';
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
function Users() {
  return (
    // ... your users component here

Note: if you use React-Query v4, you have to import from @tanstack/react-query instead.

Copied!
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query';

Notice that I wrapped the main component ( App in this case) in a QueryClientProvider .

Copied!
import




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

The QueryClientProvider component is used to connect a QueryClient to your application.

The QueryClientProvider component takes a client prop.

The clientProp is required and must be set to a QueryClient (the QueryClient instance to provide).

Here is a complete example that fetches data from a remote API using React query.

Copied!
import React from 'react';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from 'react-query';
const queryClient = new QueryClient();
export default function App() {
  // 👇️ Wrap with QueryClientProvider here
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
function Users() {
  // 👇️ can use the useQuery hook here
  const {isLoading, error, data} = useQuery({
    queryKey: ['usersData'],
    queryFn: () =>
      fetch('https://randomuser.me/api').then(res => res.json()),
  });
  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  console.log(data);
  return (
      {data.results.map(user => (
        <div key={user.id.value}>
            Name: {user.name.first} {user.name.last}
          <h2>Gender: {user.gender}</h2>
          <h2>Phone: {user.phone}</h2>
          <h2>Email: {user.email}</h2>
        </div>
      ))}
    </div>

Note: if you use React-Query v4, you have to import from @tanstack/react-query instead.

Copied!
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query';

# Wrapping your App component with a QueryClientProvider in index.js

An alternative approach is to wrap your App component with a QueryClientProvider in your index.js file.

Your index.js file is the entry point of your React.js application, so all components in your React app will be able to use the useQuery hook.

Here is the code for the index.js file.

Copied!




    
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {QueryClient, QueryClientProvider} from 'react-query';
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
  document.getElementById('root'),
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,

Note: if you use React-Query v4, you have to import from @tanstack/react-query instead.

Copied!
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query';

We wrapped the App component in a QueryClientProvider and rendered the result.

Here is the code for the App component.

Copied!
import React from 'react';
import {useQuery} from 'react-query';
export default function App() {
  return <Users />;
function Users() {
  const {isLoading, error, data} = useQuery({
    queryKey: ['usersData'],
    queryFn: () =>
      fetch('https://randomuser.me/api').then(res => res.json()),
  });
  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  console.log(data);
  return (
      {data.results.map(user => (
        <div key={user.id.value}>
            Name: {user.name.first} {user.name.last}
          <h2>Gender: {user.gender}</h2>
          <h2>Phone: {user.phone}</h2>
          <h2>Email: {user.email}</h2>
        </div>
      ))}
    </div>

Your App component and all of its descendants can now use React query as the QueryClient instance is provided to all components in the chain.

# Setting the contextSharing prop to true

If the error persists, try setting the contextSharing prop to true in your QueryClientProvider .

Copied!
import React from 'react';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from 'react-query';
const queryClient = new QueryClient();
export default function App() {
  // 👇️ Wrap with QueryClientProvider
  // and set contextSharing prop to true
  return (
    <QueryClientProvider
      client={queryClient}
      contextSharing={true}
      <Users />
    </QueryClientProvider>