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.
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.
First, ensure you have the correct imports from React Query:
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';Note: If you're using an older version (v3 or earlier), the import path would be 'react-query' instead of '@tanstack/react-query'.
Create a new QueryClient instance at the root level of your application:
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 1,
refetchOnWindowFocus: false,
},
},
});Place this outside your component to avoid recreating the client on each render.
In your root App component (or _app.tsx for Next.js), wrap your entire application:
// 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;For Next.js App Router (app directory):
// 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>
);
}Ensure any component using useQuery is a child of QueryClientProvider:
// ✅ CORRECT
<QueryClientProvider client={queryClient}>
<ComponentUsingUseQuery />
</QueryClientProvider>
// ❌ INCORRECT
<ComponentUsingUseQuery />
<QueryClientProvider client={queryClient}>
<OtherComponent />
</QueryClientProvider>Check React DevTools to confirm the provider wraps all components using React Query hooks.
If you encounter this error in tests, wrap your test components:
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
});Version-Specific Import Paths
React Query has undergone rebranding and version changes:
- v3: Import from 'react-query'
- v4: Import from '@tanstack/react-query' (recommended)
- v5: Same path, but with breaking changes
Ensure your import paths match your installed version.
QueryClient Configuration
The QueryClient can be configured with default options that apply to all queries:
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
cacheTime: 5 * 60 * 1000, // 5 minutes
retry: 1,
refetchOnWindowFocus: false,
},
},
});Multiple React Instances
If you're using a library that bundles React separately (common in microfrontend architectures), you may have multiple React instances. This breaks Context propagation. Solution:
- Ensure all packages use the same React instance via package.json resolutions
- Use webpack/vite aliases to point all React imports to the same package
Server-Side Rendering (SSR)
For SSR frameworks like Next.js, create the QueryClient inside a component with useState to avoid sharing state between requests:
function Providers({ children }) {
const [queryClient] = useState(() => new QueryClient());
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}Never create the QueryClient at the module level in SSR environments.
React Query DevTools
The DevTools component must also be placed inside QueryClientProvider:
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React