Mutationer og optimistiske opdateringer med SWR

Den globale mutate-funktion fra swr lader dig udløse revalidering for enhver cache-nøgle hvor som helst i din applikation: mutate('/api/user') får alle useSWR('/api/user')-hooks til at hente data igen.

Importér den med: import { mutate } from 'swr'. Det er nyttigt til at ugyldiggøre data efter en serverhandling uden for en komponent, der har direkte adgang til den bundne mutate.

Send data som det andet argument til mutate: mutate('/api/user', updatedUser) sætter straks cachen til updatedUser uden at sende en netværksanmodning. Dette kaldes nogle gange en lokal mutation.

Tilføj { revalidate: false } som det tredje argument for at forhindre SWR i at hente data igen efter den optimistiske opdatering.

useSWRMutation er udviklet til mutationer, der initieres af brugeren (formularafsendelser, knapklik), i modsætning til automatisk hentning. Det kører ikke ved montering, men kun når du kalder trigger().

Importér fra swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Hentefunktionen til useSWRMutation modtager (key, { arg }), hvor arg er den værdi, der sendes til trigger(). Eksempel: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Kald trigger({ title: 'New Post', content: '...' }) for at udføre mutationen med indlægsdataene som arg.

isMutating fra useSWRMutation er true, mens mutationsanmodningen er under behandling. Brug den til at deaktivere sendeknapper og vise indlæsningsindikatorer under anmodningen, så du forhindrer dobbelte indsendelser.

Det erstatter den manuelle tilstandsvariabel isSubmitting, som du ellers skulle administrere med useState.

En optimistisk opdatering anvender straks det forventede resultat i brugergrænsefladen, før serveren har bekræftet ændringen. Hvis serveren lykkes, er der ikke behov for yderligere handling. Hvis den mislykkes, rulles opdateringen tilbage til den tidligere tilstand.

Dette mønster får brugergrænseflader til at føles øjeblikkelige: En Synes godt om-knap ser straks ud til at være aktiveret uden at vente på POST-svaret.

Brug mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR sætter straks cachen til optimisticValue, sender genvalideringsanmodningen og ruller tilbage til den tidligere værdi, hvis anmodningen udløser en fejl.

Indstillingen rollbackOnError: true er afgørende for korrektheden: Uden den efterlader en mislykket mutation forældede optimistiske data i cachen.

Når rollbackOnError: true er angivet, og mutationen afvises, gendanner SWR automatisk cachen til det øjebliksbillede, der blev taget før den optimistiske opdatering. Du behøver ikke skrive manuel kode til tilbagerulning.

Angiv også populateCache: false, hvis mutationens svarindhold ikke har samme datastruktur som useSWR-dataene, så du forhindrer svaret i at opdatere cachen forkert.

useSWR returnerer en bundet mutate: const { data, mutate } = useSWR('/api/user', fetcher). Denne bundne mutate er automatisk målrettet nøglen '/api/user', så du skal ikke angive nøglen igen.

Brug bundet mutate i komponenter, der ejer visningen af dataene. Brug global mutate fra swr, når du skal ugyldiggøre en nøgle fra en ikke-relateret komponent eller hjælpefunktion.

React Query's useMutation har et lignende trigger/isMutating-mønster. De vigtigste forskelle er, at React Query's onSuccess-tilbagekald med queryClient.invalidateQueries er det idiomatiske mønster til ugyldiggørelse af cachen. SWR bruger mutate-funktionen direkte til cacheopdateringer.

Begge understøtter optimistiske opdateringer og tilbagerulning, men API-strukturen er forskellig. Teams, der er fortrolige med den ene, kan hurtigt lære den anden.

Efter en vellykket mutation har du tre muligheder: Hent dataene igen ved at kalde mutate(key), opdatér cachen med svarindholdet (hvis API'et returnerer den opdaterede ressource), eller kombinér begge dele med optimistiske opdateringer og genvalidering.

Ved mutationer på lister (når du tilføjer et element) kan du manuelt opdatere cachen ved at tilføje det nye element og derefter genvalidere for at bekræfte servertilstanden. Det undgår at hente hele listen igen, samtidig med at dataene forbliver konsistente.

Global mutate(key) udløser genvalidering; mutate(key, data) opdaterer cachen uden at hente dataene igen. useSWRMutation håndterer eksplicitte mutationer udløst af brugeren med trigger(), isMutating-tilstand og understøttelse af extraArg. Optimistiske opdateringer med optimisticData og rollbackOnError: true får brugergrænseflader til at føles øjeblikkelige og giver automatisk fejlhåndtering.

Bundet mutate fra useSWR er målrettet sin egen nøgle; global mutate fra swr fungerer overalt.