Mutaties en optimistische updates met SWR

Met de globale mutate-functie uit swr kun je overal in je toepassing opnieuw valideren voor elke cachesleutel: mutate('/api/user') zorgt ervoor dat alle useSWR('/api/user')-hooks de gegevens opnieuw ophalen.

Importeer de functie met: import { mutate } from 'swr'. Dit is handig om gegevens ongeldig te maken na een serveractie buiten een component die rechtstreeks toegang heeft tot de gebonden mutate.

Geef gegevens door als tweede argument aan mutate: mutate('/api/user', updatedUser) stelt de cache onmiddellijk in op updatedUser zonder een netwerkaanvraag te doen. Dit wordt soms een lokale mutatie genoemd.

Voeg { revalidate: false } toe als derde argument om te voorkomen dat SWR na de optimistische update opnieuw gegevens ophaalt.

useSWRMutation is bedoeld voor door de gebruiker gestarte mutaties (formulierverzendingen, klikken op knoppen) in plaats van automatisch ophalen. De hook wordt niet uitgevoerd bij het mounten, maar alleen wanneer je trigger() aanroept.

Importeer de hook uit swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

De fetcher voor useSWRMutation ontvangt (key, { arg }), waarbij arg de waarde is die aan trigger() wordt doorgegeven. Voorbeeld: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Roep trigger({ title: 'New Post', content: '...' }) aan om de mutatie te starten met de postgegevens als arg.

isMutating van useSWRMutation is true zolang het mutatieverzoek wordt verwerkt. Gebruik dit om verzendknoppen uit te schakelen en laadindicatoren tijdens het verzoek te tonen, zodat dubbele verzendingen worden voorkomen.

Dit vervangt de handmatig beheerde statusvariabele isSubmitting, die je anders met useState zou beheren.

Een optimistische update past het verwachte resultaat direct toe op de gebruikersinterface, voordat de server de wijziging bevestigt. Als de server slaagt, is er niets meer nodig. Als de server faalt, wordt de update teruggedraaid naar de vorige status.

Dit patroon zorgt dat gebruikersinterfaces direct aanvoelen: een knop voor leuk vinden lijkt meteen ingedrukt, zonder op de POST-reactie te wachten.

Gebruik mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR stelt de cache direct in op optimisticValue, verstuurt het verzoek voor hervalidatie en zet de cache terug naar de vorige waarde als het verzoek een fout genereert.

De optie rollbackOnError: true is essentieel voor de correcte werking: zonder deze optie blijft mislukte optimistische data in de cache staan.

Wanneer rollbackOnError: true is ingesteld en de mutatie wordt afgewezen, herstelt SWR automatisch de cache naar de momentopname die vóór de optimistische update is gemaakt. Je hebt geen handmatige code voor het terugdraaien nodig.

Stel daarnaast populateCache: false in als de antwoordinhoud van de mutatie niet overeenkomt met de gegevensstructuur van useSWR, zodat het antwoord de cache niet verkeerd bijwerkt.

useSWR retourneert een gebonden mutate: const { data, mutate } = useSWR('/api/user', fetcher). Deze gebonden mutate richt zich automatisch op de sleutel '/api/user'; je geeft de sleutel niet opnieuw door.

Gebruik gebonden mutate binnen componenten die de gegevensweergave beheren. Gebruik globale mutate uit swr wanneer je een sleutel vanuit een niet-gerelateerde component of hulpfunctie ongeldig wilt maken.

React Query's useMutation heeft een vergelijkbaar trigger/isMutating-patroon. Belangrijke verschillen: de onSuccess-terugroepfunctie van React Query met queryClient.invalidateQueries is het gebruikelijke patroon voor cache-invalidatie. SWR gebruikt de mutate-functie rechtstreeks voor cache-updates.

Beide ondersteunen optimistische updates en terugdraaien, maar de API-vorm verschilt. Teams die vertrouwd zijn met de ene API kunnen de andere snel leren.

Na een geslaagde mutatie heb je drie opties: opnieuw ophalen door mutate(key) aan te roepen, de cache bijwerken met de antwoordinhoud (als de API de bijgewerkte bron teruggeeft), of beide combineren met optimistische updates en hervalidatie.

Bij lijstmutaties (een element toevoegen) werk je de cache handmatig bij door het nieuwe element toe te voegen en valideer je daarna opnieuw om de serverstatus te bevestigen. Zo vermijd je dat de hele lijst opnieuw wordt opgehaald en blijven de gegevens consistent.

Global mutate(key) start hervalidatie; mutate(key, data) werkt de cache bij zonder opnieuw op te halen. useSWRMutation verwerkt expliciete, door de gebruiker gestarte mutaties met trigger(), de isMutating-status en ondersteuning voor extraArg. Optimistische updates met optimisticData en rollbackOnError: true zorgen dat gebruikersinterfaces direct aanvoelen en herstellen automatisch na fouten.

De gebonden mutate van useSWR richt zich op de eigen sleutel; de globale mutate van swr werkt overal.