Revalidación Automática

💡

Si quiere revalidar manualmente los datos, compruebe mutation.

Revalidar on focus

Al reenfocar una pagina o cambiar entre tabs, SWR revalida automáticamente los datos.

Esto puede ser útil para sincronizar inmediatamente a el último estado. Esto es útil para refrescar los datos en escenarios como stale mobile tabs, o laptops que están suspendida.

Vídeo: uso de la revalidación focus para sincronizar automáticamente el estado login entre páginas.

Esta caracteristica está activada por defecto. Puede desactivarla mediante de la opción revalidateOnFocus.

Revalidar on interval

En muchos casos, los datos cambian debido a los múltiples dispositivos, los múltiples usuarios, los múltiples tabs. ¿Cómo podemos con el tiempo actualizar los datos en pantalla?

SWR le dará la opción de recuperar los datos automáticamente. Es inteligente, lo que significa que el refetching sólo se producirá si el componente asociado al hook está en la pantalla.

Vídeo: cuando un usuario realiza un cambio, ambas sesiones acabarán por mostrar los mismo datos.

Puede activarlo estableciendo un valor de refreshInterval.

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

También hay opciones como refreshWhenHidden y refreshWhenOffline. Ambas están deshabilitadas por defecto, para que SWR no recupere la información cuando la página web no esté en pantalla o no haya conexión de red.

Revalidar on reconnect

También es útil revalidar cuando el usuario vuelve a estar conectado. Este escenario se da con frecuencia cuando el usuario desbloquea su ordenador, pero en ese mismo momento no está conectado a Internet.

Para asegurarse de que los datos están siempre actualizados, SWR revalida automáticamente cuando la red se recupera.

Esta función está activada por defecto. Puede desactivarla mediante la opción revalidateOnReconnect.

Desactivar las revalidaciones automáticas

Si el recurso es inmutable (que nunca cambiará si revalidamos de nuevo), podemos desactivar todo tipo de revalidaciones automáticas para él.

Desde la versión 1.0, SWR proporciona un "helper hook" llamado useSWRImmutable para marcar el recurso como inmutable:

import useSWRImmutable from 'swr/immutable'
 
// ...
useSWRImmutable(key, fetcher, options)

Tiene la misma interfaz API que el hook normal useSWR. También puedes hacer lo mismo deshabilitando las siguientes opciones de revalidación:

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})
 
// equivalent to
useSWRImmutable(key, fetcher)

El revalidateIfStale controla si SWR debe revalidar cuando se monta y hay datos obsoletos.

Estos dos hooks hacen exactamente lo mismo. Una vez que los datos se almacenan en caché, no volverán a solicitarlos.

Revalidate on Mount

It's useful to force override SWR revalidation on mounting. By default, the value of revalidateOnMount is set to undefined.

A SWR hook mounts as:

First it checks if revalidateOnMount is defined. It starts request if it's true, stop if it's false.

revalidateIfStale useful to control the mount behaviour. By default revalidateIfStale is set to true.

If revalidateIfStale is set to true it only refetches if there's any cache data else it will not refetch.

Gestión De Errores Obtención De Datos Condicional