0
283
Vistas¿Cómo deshabilitar volver a llamar a la API después de hacer clic y ejecutar recuperar el gancho de consulta de reacción?
por ejemplo, tengo un componente para buscar y llamar a una API, pero esa consulta está enabled: false y debería activarla con onClick:
const query = useQuery('key', fetch, { enabled: false }) const exec = () => query.refetch() return <button onClick={exec}>Load</button>Pero tengo una nueva llamada API después de cada clic en el botón, en realidad quiero cancelar volver a llamar a la API aún así los datos almacenados en caché están disponibles y no están obsoletos...
¿Hay alguna forma de implementar algo como refetch para recuperar datos almacenados en caché pero sin volver a llamar a la API? ¿nuestra consulta básicamente de reacción tiene una llamada de recuperación para cualquier dato retenido?
de hecho, nuestros datos no cambian con frecuencia y se corrigen durante 2-3 días...
En otras palabras, nuestros clientes trabajan con frecuencia con menús desplegables anidados con las mismas llamadas a la API y quiero reducir las mismas consultas clave... imagina eso, algo así como categoría para seleccionar una marca para los productos.
Gracias
2 Respuestas
Responde la pregunta0
Puede configurar las opciones staleTime y cacheTime de su consulta en Infinity para mantener su caché siempre disponible
0
imagina eso, algo así como categoría para seleccionar una marca para productos
Este es un ejemplo clásico para reaccionar-consulta en el que desea colocar todas las dependencias de su consulta en su clave de caché (consulte los documentos oficiales ). De esa manera, los cachés no se anularán entre sí y obtendrá instantáneamente los valores del caché si están disponibles. No es que también obtendrá una recuperación en segundo plano, y ahí es donde entra staleTime . Si no quiere eso, configure un staleTime más alto para recuperar solo el valor del caché si existe.
Para ilustrar, tomemos su ejemplo de una selección de categorías de productos:
function MyComponent() { const [category, setCategory] = useState(null) const { data } = useQuery(['key', category], () => fetchProducts(category), { enabled: !!brand, staleTime: 1000 * 60 * 3 }) <CategorySelect onSelect={setCategory} /> }Varias cosas están pasando aquí:
- Tengo algún estado local, donde almaceno la categoría seleccionada
- Esta selección impulsa la consulta. La consulta está deshabilitada mientras no tenga una selección, pero se habilita una vez que el usuario hace una selección
- cada vez que cambia la categoría, cambia la clave de consulta, lo que hará que react-query active una recuperación automáticamente, para los nuevos datos
- He configurado el staleTime en 3 minutos. Si elijo una categoría que ya he elegido, obtendré datos del caché. Dentro de 3 minutos, solo lo obtendré del caché. Si mis datos son más antiguos, los obtendré del caché y los datos también se actualizarán en segundo plano.