Auto Revalidation

Revalider lors du Focus

Lorsque vous retournez sur une page ou que vous passez d'un onglet à un autre, SWR revalide automatiquement les données.

Cela peut être utile pour synchroniser immédiatement avec l'état le plus récent. Cela est utile pour rafraîchir les données dans des scénarios comme les onglets mobiles obsolètes, ou les ordinateurs portables qui se sont mis en veille.

Cet fonctionnalité est activée par défaut. Vous pouvez la désactiver via l'option revalidateOnFocus.

Révalider avec un Intervalle

Dans de nombreux cas, les données changent en raison de plusieurs appareils, plusieurs utilisateurs, plusieurs onglets. Comment pouvons-nous mettre à jour les données à l'écran au fil du temps ?

SWR vous donne l'option de revalider automatiquement les données. C'est intelligent, ce qui signifie que la revalidation ne se produira que si le composant associé au hook est sur l'écran.

Vous pouvez l'activer en définissant une valeur refreshInterval :

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

Il y a aussi des options comme refreshWhenHidden et refreshWhenOffline. Les deux sont désactivés par défaut, donc SWR ne fera pas de requête lorsque la page web n'est pas à l'écran, ou qu'il n'y a pas de connexion réseau.

Revalider à la Reconnexion

Il est également utile de revalider lorsque l'utilisateur est à nouveau en ligne. Ce scénario se produit souvent lorsque l'utilisateur déverrouille son ordinateur, mais que l'internet n'est pas encore connecté.

Pour être sûr que les données sont toujours à jour, SWR se revalide automatiquement lorsque le réseau se rétablit.

Cet fonctionnalité est activée par défaut. Vous pouvez la désactiver via l'option revalidateOnReconnect.

Désactiver la Revalidation Automatique

Si la ressource est immuable, elle ne changera jamais si nous la revalidons à nouveau, nous pouvons désactiver toutes sortes de revalidations automatiques pour celle-ci.

Depuis la version 1.0, SWR fournit un hook d'aide useSWRImmutable pour marquer la ressource comme immuable :

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

C'est la même interface API que le hook useSWR normal. Vous pouvez également faire la même chose en désactivant les options de revalidation suivantes :

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})
 
// équivalent à
useSWRImmutable(key, fetcher)

revalidateIfStale contrôle si SWR doit revalider lorsqu'il est monté et qu'il y a des données obsolètes.

Ces 2 hooks ci-dessus font exactement la même chose. Une fois que les données sont mises en cache, elles ne les demanderont plus jamais.