He leído los documentos de React-Query, pero aún no entiendo cómo usar staleTime y cacheTime para el almacenamiento en caché de datos.
Quiero almacenar datos durante 2 minutos en el caché después de la primera llamada a la API. No importa si se monta o desmonta un componente, no quiero una llamada a la API durante 2 minutos después de la primera vez que obtengo datos. Utilicé esto, pero no llama a la API después de 2 minutos si solo uso staletime y llama a la API cada vez (componente en el montaje y componente de desmontaje) si solo uso el tiempo de caché .
¿Entonces, cuál es el problema? & ¿Cuál es la mejor manera de hacer esto?
const query = useQuery("getuserlist", getusertList, { // staleTime: 120000, cacheTime: 120000, });Independientemente de los montajes o desmontajes de componentes, no quiero una llamada API durante 2 minutos después de la primera vez que obtuve datos
Eso es lo que está haciendo staleTime . staleTime le dice qué tan frescos están sus datos. Es muy similar a Cache-Control: max-age=120 .
Entonces, si configura staleTime: 120000 , en su ejemplo, tiene la garantía de no recibir otra solicitud de red durante dos minutos después de la primera exitosa.
cacheTime es algo totalmente diferente. Piense en ello como un momento de recolección de basura. Básicamente, describe cuánto tiempo se deben mantener los datos en la memoria caché antes de que se puedan recolectar basura. Esto solo es relevante para las consultas no utilizadas, porque las consultas activas, por definición, no se pueden recolectar basura.
También he esbozado estas diferencias en mi blog :
StaleTime: la duración hasta que una consulta pasa de nueva a obsoleta. Siempre que la consulta esté actualizada, los datos siempre se leerán solo desde el caché, ¡no se realizará ninguna solicitud de red! Si la consulta está obsoleta (que por defecto es: instantáneamente), aún obtendrá datos de la memoria caché, pero puede ocurrir una recuperación en segundo plano bajo ciertas condiciones.
CacheTime: la duración hasta que las consultas inactivas se eliminen del caché. Esto por defecto es de 5 minutos. Las consultas pasan al estado inactivo tan pronto como no hay observadores registrados, es decir, cuando todos los componentes que usan esa consulta se han desmontado.
Usé esto pero no llama a la API después de 2 minutos
Esto es algo totalmente diferente. Cuando transcurre staleTime , sus datos se marcan como obsoletos, pero eso no significa que se recuperarán instantáneamente. staleTime predeterminado de zero , por lo que no funcionaría en absoluto.
Si desea obtener cada 2 minutos, configure un refetchInterval :
refetchInterval: 120000