Mutations et mises à jour optimistes avec SWR

La fonction globale mutate du paquet swr vous permet de déclencher la revalidation de n’importe quelle clé de cache depuis n’importe quel endroit de votre application : mutate('/api/user') oblige tous les hooks useSWR('/api/user') à relancer la récupération.

Importez-la avec : import { mutate } from 'swr'. Cela est utile pour invalider les données après une action serveur effectuée en dehors d’un composant qui dispose d’un accès direct à la fonction mutate associée.

Passez les données comme deuxième argument à mutate : mutate('/api/user', updatedUser) définit immédiatement le cache sur updatedUser sans effectuer de requête réseau. On parle parfois de mutation locale.

Ajoutez { revalidate: false } comme troisième argument pour empêcher SWR d’effectuer une nouvelle récupération après la mise à jour optimiste.

useSWRMutation est conçu pour les mutations déclenchées par l’utilisateur (soumissions de formulaires, clics sur des boutons), par opposition à la récupération automatique. Il ne s’exécute pas au montage ; il s’exécute uniquement lorsque vous appelez trigger().

Importez-le depuis swr/mutation : const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

La fonction de récupération de useSWRMutation reçoit (key, { arg }), où arg est la valeur transmise à trigger(). Exemple : async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Appelez trigger({ title: 'New Post', content: '...' }) pour lancer la mutation avec les données de la publication comme arg.

isMutating de useSWRMutation vaut true pendant l'exécution de la requête de mutation. Utilisez-le pour désactiver les boutons d'envoi et afficher des indicateurs de chargement pendant la requête, afin d'éviter les envois en double.

Cela remplace la variable d'état isSubmitting que vous devriez sinon gérer avec useState.

Une mise à jour optimiste applique immédiatement à l'interface le résultat attendu, avant que le serveur ne confirme la modification. Si le serveur réussit, aucune autre action n'est nécessaire. En cas d'échec, la mise à jour est restaurée à son état précédent.

Ce schéma donne aux interfaces une impression d'instantanéité : un bouton J'aime semble immédiatement activé, sans attendre la réponse POST.

Utilisez mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR définit immédiatement le cache sur optimisticValue, envoie la requête de revalidation et restaure la valeur précédente si la requête lève une exception.

L'option rollbackOnError: true est essentielle pour garantir la fiabilité : sans elle, une mutation échouée laisse des données optimistes obsolètes dans le cache.

Lorsque rollbackOnError: true est défini et que la mutation est rejetée, SWR restaure automatiquement le cache à partir de l'instantané pris avant la mise à jour optimiste. Aucun code de restauration manuel n'est nécessaire.

Définissez également populateCache: false si le corps de la réponse de la mutation ne correspond pas à la forme des données de useSWR, afin d'empêcher la réponse de mettre incorrectement le cache à jour.

useSWR renvoie un mutate lié : const { data, mutate } = useSWR('/api/user', fetcher). Ce mutate lié cible automatiquement la clé '/api/user' ; vous n'avez pas besoin de fournir à nouveau la clé.

Utilisez le mutate lié dans les composants qui gèrent l'affichage des données. Utilisez le mutate global de swr lorsque vous devez invalider une clé depuis un composant indépendant ou une fonction utilitaire.

Le useMutation de React Query suit un schéma trigger/isMutating similaire. Principales différences : la fonction de rappel onSuccess de React Query, associée à queryClient.invalidateQueries, constitue le schéma idiomatique d'invalidation du cache. SWR utilise directement la fonction mutate pour mettre le cache à jour.

Les deux bibliothèques prennent en charge les mises à jour optimistes et leur restauration, mais la forme de leur API diffère. Une équipe maîtrisant l'une peut apprendre l'autre rapidement.

Après une mutation réussie, trois options s'offrent à vous : effectuer une nouvelle récupération en appelant mutate(key), mettre à jour le cache avec le corps de la réponse (si l'API renvoie la ressource mise à jour), ou combiner les deux avec une mise à jour optimiste suivie d'une revalidation.

Pour les mutations sur une liste (ajout d'un élément), mettez manuellement le cache à jour pour ajouter le nouvel élément, puis effectuez une revalidation afin de confirmer l'état du serveur. Vous évitez ainsi de récupérer toute la liste à nouveau, tout en conservant des données cohérentes.

Quelle option devez-vous définir dans mutate de SWR pour restaurer automatiquement une mise à jour optimiste en cas d'erreur ?

Global mutate(key) déclenche une revalidation ; mutate(key, data) met à jour le cache sans effectuer de nouvelle récupération. useSWRMutation gère les mutations explicites déclenchées par l'utilisateur avec trigger(), l'état isMutating et la prise en charge de extraArg. Les mises à jour optimistes avec optimisticData et rollbackOnError: true donnent aux interfaces une impression d'instantanéité, avec une récupération automatique en cas d'erreur.

Le mutate lié de useSWR cible sa propre clé ; le mutate global de swr fonctionne partout.