Teniendo el siguiente gancho:
import { useQuery } from 'react-query'; import axios from 'axios'; export const useGetData = () => { const query = 'getData'; const { isLoading, isError, data, error, refetch, isSuccess } = useQuery( query, async () => { const { data } = await axios( 'https://api.chucknorris.io/jokes/random' ); return data; } ); return { data, isError, isLoading, error, refetch, isSuccess, }; }; export default useGetData; Para empezar, quiero importarlo a un componente y verificar los valores de data , isError y otros.
Aquí está el componente:
import React from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; import useGetData from './components/use-get-data'; const queryClient = new QueryClient({}); function App() { const { data, isLoading } = useGetData(); console.log('data: ', data); console.log('isLoading: ', isLoading); return ( <QueryClientProvider client={queryClient}> <div className='container'></div> </QueryClientProvider> ); } export default App;Lanza el siguiente error:
Uncaught Error: No QueryClient set, use QueryClientProvider to set one at useQueryClient¿Cómo se puede arreglar esto?
Su llamada a su enlace debe estar bajo el proveedor del cliente de consulta para acceder a su contexto. Por lo tanto, debe colocarlo en un componente llamado hijo de QueryClientProvider
Debe colocar el gancho personalizado useGetData en el componente de descendientes del proveedor QueryClientProvider para que pueda usar el gancho useQuery .
Debido a que useQuery hook use useQueryClient hook subyacente, consulte el código fuente y useQueryClient use useContext hook subyacente, código fuente:
export const useQueryClient = () => { const queryClient = React.useContext( getQueryClientContext(React.useContext(QueryClientSharingContext)) ) if (!queryClient) { throw new Error('No QueryClient set, use QueryClientProvider to set one') } return queryClient } El contexto de queryClient proviene de QueryClientProvider para que useContext pueda obtenerlo.