Mutationen und optimistische Aktualisierungen mit SWR

Mit der globalen mutate-Funktion aus swr können Sie von jeder Stelle Ihrer Anwendung aus eine Revalidierung für jeden Cache-Key auslösen: mutate('/api/user') veranlasst alle useSWR('/api/user')-Hooks, die Daten erneut abzurufen.

Importieren Sie die Funktion mit: import { mutate } from 'swr'. Das ist nützlich, um Daten nach einer Serveraktion außerhalb einer Komponente zu invalidieren, die keinen direkten Zugriff auf den gebundenen mutate hat.

Übergeben Sie data als zweites Argument an mutate: mutate('/api/user', updatedUser) setzt den Cache sofort auf updatedUser, ohne eine Netzwerkanfrage zu stellen. Dies wird manchmal als lokale Mutation bezeichnet.

Fügen Sie { revalidate: false } als drittes Argument hinzu, um zu verhindern, dass SWR nach dem optimistischen Update erneut Daten abruft.

useSWRMutation ist für vom Benutzer initiierte Mutationen (Formularübermittlungen, Klicks auf Schaltflächen) und nicht für automatisches Abrufen gedacht. Der Hook wird beim Mounten nicht ausgeführt, sondern nur, wenn Sie trigger() aufrufen.

Importieren Sie ihn aus swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Der Fetcher für useSWRMutation erhält (key, { arg}), wobei arg der Wert ist, der an trigger() übergeben wird. Beispiel: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Rufen Sie trigger({ title: 'New Post', content: '...' }) auf, um die Mutation mit den Beitragsdaten als arg auszulösen.

isMutating aus useSWRMutation ist true, solange die Mutationsanfrage läuft. Verwenden Sie es, um Submit-Buttons während der Anfrage zu deaktivieren und Ladeindikatoren anzuzeigen und so doppelte Übermittlungen zu verhindern.

Dies ersetzt die manuelle Zustandsvariable isSubmitting, die Sie andernfalls mit useState verwalten müssten.

Ein optimistisches Update wendet das erwartete Ergebnis sofort auf die UI an, bevor der Server die Änderung bestätigt. Bei Erfolg des Servers ist nichts weiter erforderlich. Bei einem Fehler wird das Update auf den vorherigen Zustand zurückgesetzt.

Dieses Muster lässt UIs unmittelbar reagieren: Ein Like-Button wirkt sofort als angeklickt, ohne auf die POST-Antwort zu warten.

Verwenden Sie mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR setzt den Cache sofort auf optimisticValue, sendet die Revalidierungsanfrage und setzt ihn auf den vorherigen Wert zurück, wenn die Anfrage einen Fehler auslöst.

Die Option rollbackOnError: true ist für die Korrektheit unerlässlich: Ohne sie hinterlässt eine fehlgeschlagene Mutation veraltete optimistische Daten im Cache.

Wenn rollbackOnError: true gesetzt ist und die Mutation abgelehnt wird, stellt SWR den Cache automatisch auf den Snapshot zurück, der vor dem optimistischen Update erstellt wurde. Manueller Code zum Zurücksetzen ist nicht erforderlich.

Setzen Sie außerdem populateCache: false, wenn der Antwort-Body der Mutation nicht der Datenstruktur von useSWR entspricht, damit die Antwort den Cache nicht fälschlicherweise aktualisiert.

useSWR gibt ein gebundenes mutate zurück: const { data, mutate } = useSWR('/api/user', fetcher). Dieses gebundene mutate zielt automatisch auf den Schlüssel '/api/user'; Sie müssen den Schlüssel nicht erneut übergeben.

Verwenden Sie gebundenes mutate in Komponenten, die für die Anzeige der Daten zuständig sind. Verwenden Sie globales mutate aus swr, wenn Sie einen Schlüssel aus einer unabhängigen Komponente oder einer Utility-Funktion heraus invalidieren müssen.

React Query hat mit useMutation ein ähnliches trigger/isMutating-Muster. Wichtige Unterschiede: React Querys onSuccess-Callback mit queryClient.invalidateQueries ist das idiomatische Muster zur Cache-Invalidierung. SWR verwendet die mutate-Funktion direkt für Cache-Aktualisierungen.

Beide unterstützen optimistische Updates und Rollback, aber die API-Struktur unterscheidet sich. Teams, die mit einer der beiden Lösungen vertraut sind, können die andere schnell erlernen.

Nach einer erfolgreichen Mutation haben Sie drei Optionen: Führen Sie einen erneuten Abruf durch, indem Sie mutate(key) aufrufen, aktualisieren Sie den Cache mit dem Antwort-Body (wenn die API die aktualisierte Ressource zurückgibt), oder kombinieren Sie beides mit optimistischen Updates plus Revalidierung.

Bei Listenmutationen, etwa dem Hinzufügen eines Elements, aktualisieren Sie den Cache manuell, um das neue Element anzuhängen, und führen Sie anschließend eine Revalidierung durch, um den Serverzustand zu bestätigen. So vermeiden Sie einen vollständigen erneuten Abruf der Liste und halten die Daten dennoch konsistent.

Welche Option müssen Sie in SWRs mutate setzen, damit ein optimistisches Update bei einem Fehler automatisch zurückgesetzt wird?

Globales mutate(key) löst eine Revalidierung aus; mutate(key, data) aktualisiert den Cache ohne erneuten Abruf. useSWRMutation verarbeitet explizit durch Benutzer ausgelöste Mutationen mit trigger(), dem Status isMutating und der Unterstützung für extraArg. Optimistische Updates mit optimisticData und rollbackOnError: true lassen UIs sofort reagieren und ermöglichen eine automatische Fehlerbehebung.

Das gebundene mutate von useSWR zielt auf seinen eigenen Schlüssel; globales mutate aus swr funktioniert überall.