En la consulta React actualmente estoy haciendo llamadas a una API, cuando hay un error, muestra el error sin embargo, cuando cambio el objeto de estado para hacer una nueva llamada, ¿muestra datos de carga pero no oculta el mensaje de error? Creé un ejemplo, agregué un botón que daría un mensaje de error, es decir
ejemplo de stackblitz: https://stackblitz.com/edit/react-ts-6wugxj?file=index.tsx
import React 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 queryKey = 'getData'; const [number, setNumber] = React.useState(1) const getData = async (): Promise<any> => { await new Promise((resolve) => setTimeout(resolve, 1000)); const response = await axios .get(`https://jsonplaceholder.typicode.com/posts/${number}`) .then((res) => res.data); return response; }; const { data: result, isFetching, status, error, refetch, }: any = useQuery(queryKey, getData, { refetchOnWindowFocus: false, staleTime: 0, cacheTime: 0, refetchInterval: 0, }); React.useEffect(() => { refetch(); }, [number, refetch]); return ( <div className="Container"> <button onClick={refetch}>Refetch query</button> <button onClick={() => setNumber(() => 1)}>Get 1</button> <button onClick={() => setNumber(() => 2)}>Get 2</button> <button onClick={() => setNumber(() => 3)}>Get 3</button> <button onClick={() => setNumber(() => 99999)}>Get 99999</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>; })} */} <p><strong>id:</strong> {result?.id}</p> <p>{result?.title}</p> </div> )} </div> )} </div> ); }; const queryClient = new QueryClient(); render( <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>, document.getElementById('root') );Veo múltiples conceptos erróneos aquí:
una refetch no "borra" el estado. De hecho, react-query nunca elimina el estado de una consulta activa solo porque la recupera. Ese es todo el principio obsoleto mientras se revalida sobre el que se basa la biblioteca: muestre los datos antiguos mientras obtiene los nuevos, luego actualice la pantalla una vez que ingresen los nuevos datos. Esto es exactamente lo que está sucediendo en su ejemplo.
La causa raíz es en realidad algo completamente diferente: está utilizando la misma clave de caché y luego llama imperativamente a refetch en un efecto. Esto significa que
a) la primera recuperación ocurrirá dos veces (una vez desde la llamada useQuery y luego desde refetch) b) solo almacenará en caché el último resultado, lo que significa que realmente no usa el caché de react-query al máximo.
El mejor enfoque sería colocar todas las dependencias que su consulta necesita para realizar la búsqueda en la clave de consulta. Esto también está en los documentos aquí .
Con eso, reaccionar-consulta:
También es una buena práctica mover la función de obtención de datos ( getData ) fuera del componente para que no pueda cerrarse accidentalmente sobre algo que no es parte de la clave de consulta.
Se vería algo así:
const App: React.FunctionComponent = () => { const [number, setNumber] = React.useState(1) const { data, status } = useQuery(['getData', number], () => getData(number));Eso es todo. Sin efecto, sin recuperación.
Además, algunas de las opciones que proporciona son las predeterminadas: staleTime predeterminado en zero , refetchInterval también está desactivado de forma predeterminada, por lo que no es necesario que lo proporcione. cacheTime de zero solo es necesario si desea recolectar basura las consultas inmediatamente después de que se hayan utilizado, que a menudo no es lo que desea, especialmente porque las claves ahora están cambiando porque tienen una variable en ellas.
Por último, es probable que no desee verificar isFetching para desmontar toda su lista de resultados. isFetching siempre será verdadero cada vez que se esté realizando una búsqueda, y no es parte de la máquina de estado. Con las teclas cambiantes, lo que probablemente desee es mostrar la rueda giratoria solo si el status === 'loading' , porque obtendrá este estado de carga difícil cuando cambie entre números por primera vez.