What causes "Undefined is not an object (evaluating queryCache)"?

QueryClient instance was not created before being used in QueryClientProvider QueryClientProvider is missing from the component tree above components using React Query hooks QueryClient is being recreated on every render instead of being kept stable

Is the "Undefined is not an object (evaluating queryCache)" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

How to fix Undefined is not an object (evaluating queryCache) in React

ReactBEGINNERHIGHUpdated Dec 10, 2025· 88 views

This error occurs when trying to access the queryCache property before the QueryClient is properly initialized or when the QueryClientProvider is not correctly set up in your component tree.

Quick fix

Fixes Undefined is not an object (evaluating queryCache)

// app.tsx or _app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Create the client outside the component
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponents />
    </QueryClientProvider>
  );
}

Verify QueryClient is created at module level
Ensure QueryClientProvider wraps your components
Check React Query package installation
Use React.useMemo if creating QueryClient in component

react — error

$// app.tsx or _app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// Create the client outside the component
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
    },
  },
});
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponents />
    </QueryClientProvider>
  );
}
Undefined is not an object (evaluating queryCache)

What this error means

This error indicates that the `queryCache` property is being accessed on an undefined or uninitialized QueryClient instance. In TanStack Query (formerly React Query), the queryCache is a core component that stores and manages all cached query data. When you see "undefined is not an object (evaluating queryCache)", it means the code is trying to access `queryClient.queryCache` or similar properties before the QueryClient has been properly created or provided to your component tree. This typically happens in one of three scenarios: the QueryClient was never instantiated, the QueryClientProvider wasn't set up correctly to wrap your components, or the QueryClient instance was recreated (causing cache loss) instead of being kept stable across re-renders. The error is particularly common when migrating from older versions of React Query or when setting up React Query for the first time in a new project.

Typical symptoms

Application crashes with "Undefined is not an object" error when trying to use React Query hooks
useQuery or useMutation hooks fail immediately on mount
Error occurs specifically when accessing queryCache or related QueryClient properties
Issue appears in console as TypeError related to queryCache
React Query features don't work despite having the library installed

Common causes

QueryClient instance was not created before being used in QueryClientProvider
QueryClientProvider is missing from the component tree above components using React Query hooks
QueryClient is being recreated on every render instead of being kept stable
Incorrect import path or version mismatch between @tanstack/react-query packages
QueryClient instance is created inside a component without memoization
Attempting to access queryCache before React Query v3+ where the API changed

How to fix "Undefined is not an object (evaluating queryCache)"

1Verify QueryClient is created at module level

Ensure your QueryClient is created outside of any component to keep it stable across renders:

tsx

// app.tsx or _app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Create the client outside the component
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponents />
    </QueryClientProvider>
  );
}

Creating the QueryClient at module level ensures it persists across re-renders and maintains the cache.

2Ensure QueryClientProvider wraps your components

Make sure QueryClientProvider is placed high enough in your component tree to wrap all components that use React Query hooks:

tsx

// Correct setup
function Root() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

// In App or child components
function MyComponent() {
  const { data } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos
  });
  // This will now work because QueryClientProvider is above
}

Every component using useQuery, useMutation, or other React Query hooks must be a descendant of QueryClientProvider.

3Check React Query package installation

Verify you have the correct version of TanStack Query installed:

bash

# For React Query v5 (TanStack Query)
npm install @tanstack/react-query

# Check your package.json
npm list @tanstack/react-query

If you're using an older version, update your imports:

tsx

// Modern import (v4+)
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// Old import (v3 and earlier) - deprecated
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

Ensure all React Query imports come from the same package version throughout your project.

4Use React.useMemo if creating QueryClient in component

If you must create the QueryClient inside a component (e.g., in Next.js App Router), memoize it:

tsx

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState } from 'react';

function Providers({ children }: { children: React.ReactNode }) {
  // Create a stable QueryClient instance
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  }));

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

Using useState with a lazy initializer ensures the QueryClient is only created once, not on every render.

5Verify queryCache access patterns

If you're directly accessing queryCache, ensure you're doing so correctly:

tsx

import { useQueryClient } from '@tanstack/react-query';

function MyComponent() {
  const queryClient = useQueryClient();

  // Correct way to access queryCache
  const handleClearCache = () => {
    queryClient.getQueryCache().clear();
  };

  // Or access specific queries
  const cachedQuery = queryClient.getQueryCache().find({
    queryKey: ['todos']
  });

  return <button onClick={handleClearCache}>Clear Cache</button>;
}

Always use useQueryClient() hook to get the client instance within components, and use getQueryCache() method to access the cache.

Advanced notes

Version-specific considerations:

In React Query v3 and earlier, the QueryCache was more directly accessible. Starting with v4 (TanStack Query), the architecture changed to make QueryCache more of an internal implementation detail. If you're migrating from v3, you may need to update code that directly accessed queryClient.queryCache to use queryClient.getQueryCache() instead.

SSR and hydration:

In Next.js or other SSR frameworks, be careful about QueryClient initialization. For Next.js App Router, create a separate client component for the QueryClientProvider to ensure proper hydration. For Pages Router, initialize the QueryClient in _app.tsx at the module level.

QueryCache event listeners:

If you're setting up global error handling or cache event listeners, ensure they're configured when creating the QueryClient:

tsx

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      console.error('Query error:', error, query.queryKey);
    },
  }),
});

DevTools consideration:

If you're using React Query DevTools and experiencing this error, ensure DevTools are imported after QueryClientProvider is set up and only in development builds.

Frequently asked questions

What does "Undefined is not an object (evaluating queryCache)" mean?: This error indicates that the queryCache property is being accessed on an undefined or uninitialized QueryClient instance. In TanStack Query (formerly React Query), the queryCache is a core component that stores and manages all cached query data. queryCache or similar properties before the QueryClient has been properly created or provided to your component tree.
How do I fix "Undefined is not an object (evaluating queryCache)"?: This error occurs when trying to access the queryCache property before the QueryClient is properly initialized or when the QueryClientProvider is not correctly set up in your component tree.
What causes "Undefined is not an object (evaluating queryCache)"?: QueryClient instance was not created before being used in QueryClientProvider QueryClientProvider is missing from the component tree above components using React Query hooks QueryClient is being recreated on every render instead of being kept stable
Is the "Undefined is not an object (evaluating queryCache)" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading

📚React Official Documentation