Cuando recupero mi consulta, pasa al estado 'Actualizando...' cuando tengo un botón onClick, pero quiero que la consulta se recupere y muestre el estado 'Cargando...'. mi código es:
https://stackblitz.com/edit/react-ts-jfq8ve?file=index.tsx
import React, { useEffect } from 'react'; import { render } from 'react-dom'; import { useQuery } from 'react-query'; import axios from 'axios'; import { QueryClient, QueryClientProvider } from 'react-query'; const App: React.FunctionComponent = () => { const [value, setValue] = React.useState<number>(7); const queryKey = 'getData'; const getData = async (): Promise<any> => { await new Promise((resolve) => setTimeout(resolve, 1000)); const response = await axios .get(`https://jsonplaceholder.typicode.com/todos`) .then((res) => res.data); return response; }; const { data: result, status, isRefetching, error, refetch, }: any = useQuery(queryKey, getData, { refetchOnWindowFocus: true, staleTime: 0, cacheTime: 0, refetchInterval: 0, }); useEffect(() => { refetch(); }, [value, refetch]); return ( <div className="Container"> <button onClick={() => setValue(prevValue => prevValue + 1 )}>Set value</button> {isRefetching ? <p className="mt-3">Updating data...</p> : null} {status === 'error' && <div className="mt-5">{error.message}</div>} {status === 'loading' && <div className="mt-5">Loading data ...</div>} {status === 'success' && ( <div> {result?.map((inner: any, index: number) => { return <li key={index}>{inner.title}</li>; })} </div> )} </div> ); }; const queryClient = new QueryClient(); render( <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>, document.getElementById('root') );status === loading
si la consulta está en un estado de carga "dura". Esto significa que no hay datos almacenados en caché y que la
queryse está recuperando actualmente...
Supongo que no necesita usar status === loading para su caso particular. Use isFetching : cubre tanto la carga inicial como la recuperación
import React, { useEffect } from 'react'; import { render } from 'react-dom'; import { useQuery } from 'react-query'; import axios from 'axios'; import { QueryClient, QueryClientProvider } from 'react-query'; const App: React.FunctionComponent = () => { const [value, setValue] = React.useState<number>(7); const queryKey = 'getData'; const getData = async (): Promise<any> => { await new Promise((resolve) => setTimeout(resolve, 1000)); const response = await axios .get(`https://jsonplaceholder.typicode.com/todos`) .then((res) => res.data); return response; }; const { data: result, status, isFetching, error, refetch, }: any = useQuery(queryKey, getData, { refetchOnWindowFocus: true, staleTime: 0, cacheTime: 0, refetchInterval: 0, }); useEffect(() => { refetch(); }, [value, refetch]); return ( <div className="Container"> <button onClick={() => setValue(prevValue => prevValue + 1 )}>Set value</button> {status === 'error' && <div className="mt-5">{error.message}</div>} {isFetching && <div className="mt-5">Loading data ...</div>} {status === 'success' && ( <div> {result?.map((inner: any, index: number) => { return <li key={index}>{inner.title}</li>; })} </div> )} </div> ); }; const queryClient = new QueryClient(); render( <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>, document.getElementById('root') );Según la respuesta de Yozi, useEffect y simplemente puse la función de refetch en onClick of the button.
const { data: result, isFetching, status, error, refetch, }: any = useQuery(queryKey, getData, { refetchOnWindowFocus: true, staleTime: 0, cacheTime: 0, refetchInterval: 0, }); return ( <div className="Container"> <button onClick={refetch}>Refetch query</button> {status === 'error' && <div className="mt-5">{error.message}</div>} {isFetching ? ( <div className="mt-5">Loading data ...</div> ) : ( <div> {status === 'success' && ( <div> {result?.map((inner: any, index: number) => { return <li key={index}>{inner.title}</li>; })} </div> )} </div> )} </div> ); };Ejemplo en línea en: https://stackblitz.com/edit/react-ts-j87pub?file=index.tsx