How to fix Cannot read property "data" of undefined in React

What this error means

This error indicates that you're trying to access the `data` property from a `useQuery` hook result, but the hook is returning undefined instead of a query object. This happens when React Query hooks are used outside of a QueryClientProvider context. React Query (TanStack Query) relies on React Context to provide the QueryClient instance to all hooks throughout your component tree. Without the QueryClientProvider wrapper, the hooks cannot access the QueryClient and will fail to initialize properly, resulting in undefined values. The error typically manifests as "Cannot read property 'data' of undefined" or "Cannot read property 'isLoading' of undefined" when trying to destructure or access properties from the useQuery return value.

Typical symptoms

• TypeError: Cannot read property "data" of undefined when using useQuery
• Console error: "No QueryClient set, use QueryClientProvider to set one"
• All React Query hooks (useQuery, useMutation, useInfiniteQuery) fail with undefined
• React Query DevTools show error about missing queries object
• Application crashes when trying to destructure useQuery results

Common causes

1. Component using useQuery is not wrapped in a QueryClientProvider
2. QueryClientProvider is present but not high enough in the component tree
3. QueryClient instance was not created or not passed to QueryClientProvider
4. Incorrect import path for QueryClientProvider (version mismatch)
5. Multiple React instances causing context to not propagate correctly
6. Testing environment missing QueryClientProvider wrapper

How to fix "Cannot read property "data" of undefined"

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your app components go here */}
      <YourComponents />
    </QueryClientProvider>
  );
}

export default App;

// app/providers.tsx
'use client';

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

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

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

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// ✅ CORRECT
<QueryClientProvider client={queryClient}>
  <ComponentUsingUseQuery />
</QueryClientProvider>

// ❌ INCORRECT
<ComponentUsingUseQuery />
<QueryClientProvider client={queryClient}>
  <OtherComponent />
</QueryClientProvider>

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react';

function createWrapper() {
  const testQueryClient = new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  });

  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={testQueryClient}>
      {children}
    </QueryClientProvider>
  );
}

test('my component', () => {
  render(<MyComponent />, { wrapper: createWrapper() });
  // Your test assertions
});

Advanced notes

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1 minute
      cacheTime: 5 * 60 * 1000, // 5 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

function Providers({ children }) {
  const [queryClient] = useState(() => new QueryClient());
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

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

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

Frequently asked questions

What does "TypeError" mean?

This error indicates that you're trying to access the data property from a useQuery hook result, but the hook is returning undefined instead of a query object. This happens when React Query hooks are used outside of a QueryClientProvider context. React Query (TanStack Query) relies on React Context to provide the QueryClient instance to all hooks throughout your component tree.

How do I fix "TypeError"?

This error occurs when attempting to use React Query's useQuery hook in a component that is not wrapped in a QueryClientProvider. React Query requires this provider to be present in the component tree for all hooks to function properly.

What causes "TypeError"?

Component using useQuery is not wrapped in a QueryClientProvider QueryClientProvider is present but not high enough in the component tree QueryClient instance was not created or not passed to QueryClientProvider

Is the "TypeError" error serious?

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

Related errors

• fetch did not throw or return a rejected promise. You must handle error throwing in your query function

  Fetch did not throw or return rejected promise in React Query

  MEDIUM

• Undefined is not an object (evaluating queryCache)

  Undefined is not an object (evaluating queryCache)

  HIGH

• The query function did not throw or return a rejected promise

  Query function did not throw or return a rejected promise

  MEDIUM

• PureComponent shallow comparison not working correctly

  How to fix "PureComponent shallow comparison not working correctly" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation