import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const queryClient = new QueryClient(); const fetchPanets = async () => { const result = await fetch('https://swapi.dev/api/people') return result.json() } const Planets = () => { const { data, status } = useQuery('Planets', fetchPanets) console.log("data", data, "status", status) return ( <div> <h2>Planets</h2> </div> ); } export default function Wraped(){ return(<QueryClientProvider client={queryClient}> <Planets/> </QueryClientProvider> ); }

Si bien esto suele deberse a que su aplicación no está envuelta en un <QueryClientProvider> , en mi caso sucedió porque estaba importando algunos componentes compartidos, que terminaron con un contexto diferente. Puede solucionar esto configurando la opción contextSharing en true

Eso se vería como:

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

De los documentos: ( https://react-query.tanstack.com/reference/QueryClientProvider )

contextSharing : booleano (predeterminado en falso)

Establezca esto en verdadero para habilitar el uso compartido de contexto, que compartirá la primera y al menos una instancia del contexto en la ventana para asegurarse de que si React Query se usa en diferentes paquetes o microfrontends, todos usarán la misma instancia de contexto, independientemente de alcance del módulo.

Estaba tratando de arreglar lo mismo:

Seguí los documentos de React Query y usé el concepto de componente de orden superior

 import React from 'react'; import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; import Planet from './Planet'; const queryClient = new QueryClient(); const fetchPlanets = async () => { const res = await fetch('http://swapi.dev/api/planets/'); return res.json(); } const Planets = () => { const { data, status } = useQuery('planets', fetchPlanets); return ( <div> <h2>Planets</h2> { status === 'loading' && (<div>Loading data...</div>)} { status === 'error' && (<div>Error fetching data</div>)} { status === 'success' && ( data.results.map(planet => <Planet key={planet.name} planet={planet} /> ) ) } </div> ) } // Higher order function const hof = (WrappedComponent) => { // Its job is to return a react component warpping the baby component return (props) => ( <QueryClientProvider client={queryClient}> <WrappedComponent {...props} /> </QueryClientProvider> ); }; export default hof(Planets);

Como sugiere el error, debe envolver su aplicación en un QueryClientProvider . Esto está en la primera página de los documentos :

 import { QueryClient, QueryClientProvider, useQuery } from 'react-query' const queryClient = new QueryClient() export default function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) }

Simplemente haga cambios como a continuación, funcionará bien

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