Estoy usando react-query para hacer llamadas a la API y, en este caso problemático, solo quiero llamar a la API si se cumplen ciertas condiciones.
Tengo un cuadro de entrada donde los usuarios ingresan una consulta de búsqueda. Cuando se cambia el valor de entrada, se llama a un servidor de búsqueda con el contenido de la entrada como consulta de búsqueda... pero solo si el valor de entrada tiene más de 3 caracteres.
En mi componente de reacción estoy llamando:
const {data, isLoading} = useQuery(['search', searchString], getSearchResults); Y mi función getSearchResults hará, condicionalmente, una llamada a la API.
const getSearchResults = async (_, searchString) => { if (searchString.length < 3) return {data: []} const {data} = await axios.get(`/search?q=${searchString}`) return data; }No podemos usar un enlace dentro de un condicional, así que puse la condición en mi función de llamada API.
Esto casi funciona. Si ingreso una cadena de consulta corta, no se realiza ninguna solicitud de API y obtengo una matriz vacía para los data . ¡Hurra!
Pero, isLoading cambiará a true brevemente, aunque no se esté realizando una solicitud HTTP. Entonces mi indicador de carga muestra cuando no hay actividad real en la red.
¿Estoy malinterpretando cómo resolver mejor mi caso de uso? ¿Hay alguna forma de asegurar que isLoading devolverá falso si no hay actividad HTTP?
La clave era usar consultas dependientes
Entonces, en mi componente principal, creo un valor booleano y lo paso a la opción enabled del gancho useQuery :
const isLongEnough = searchString.length < 3; const {data, isLoading} = useQuery(['search', searchString], getSearchResults, {enabled: isLongEnough});y el método de llamada a la API es simplemente la llamada a la API, no condicional:
const getSearchResults = async (_, searchString) => { const {data} = await axios.get(`/search?q=${searchString}`); return data; } Los documentos describen consultas dependientes como una solución para cargar datos desde puntos finales de API posteriores, pero la opción enable puede aceptar cualquier valor booleano. En este caso, si la cadena de consulta de búsqueda es lo suficientemente larga.