Mutation e aggiornamenti ottimistici con SWR

La funzione mutate globale di swr consente di attivare la revalidazione per qualsiasi chiave della cache da qualunque punto dell'applicazione: mutate('/api/user') fa sì che tutti gli hook useSWR('/api/user') eseguano nuovamente il recupero.

La si importi con: import { mutate } from 'swr'. È utile per invalidare i dati dopo un'azione sul server esterna a un componente che abbia accesso diretto a mutate associato.

Passi i dati come secondo argomento a mutate: mutate('/api/user', updatedUser) imposta immediatamente la cache su updatedUser senza effettuare una richiesta di rete. Questa operazione viene talvolta chiamata mutazione locale.

Aggiunga { revalidate: false } come terzo argomento per impedire a SWR di eseguire nuovamente il recupero dopo l'aggiornamento ottimistico.

useSWRMutation è progettato per le mutazioni avviate dall'utente (invii di moduli, clic su pulsanti), a differenza del recupero automatico. Non viene eseguito al montaggio, ma solo quando si chiama trigger().

Lo si importi da swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Il fetcher di useSWRMutation riceve (key, { arg}), dove arg è il valore passato a trigger(). Esempio: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Chiami trigger({ title: 'New Post', content: '...' }) per eseguire la mutazione con i dati del post come argomento.

isMutating di useSWRMutation è true mentre la richiesta di mutation è in corso. Lo utilizzi per disabilitare i pulsanti di invio e mostrare gli indicatori di caricamento durante la richiesta, evitando invii duplicati.

Questo sostituisce la variabile di stato manuale isSubmitting che altrimenti dovrebbe gestire con useState.

Un aggiornamento ottimistico applica immediatamente all'interfaccia il risultato previsto, prima che il server confermi la modifica. Se il server restituisce esito positivo, non è necessario fare altro. Se invece si verifica un errore, l'aggiornamento viene annullato e lo stato precedente viene ripristinato.

Questo schema rende le interfacce apparentemente istantanee: un pulsante Mi piace appare immediatamente come premuto, senza attendere la risposta POST.

Utilizzi mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR imposta immediatamente la cache su optimisticValue, invia la richiesta di revalidazione e ripristina il valore precedente se la richiesta genera un'eccezione.

L'opzione rollbackOnError: true è essenziale per la correttezza: senza di essa, una mutation non riuscita lascia nella cache dati ottimistici obsoleti.

Quando rollbackOnError: true è impostato e la mutation viene rifiutata, SWR ripristina automaticamente la cache allo snapshot acquisito prima dell'aggiornamento ottimistico. Non è necessario scrivere codice per il rollback manuale.

Inoltre, imposti populateCache: false se il corpo della risposta della mutation non corrisponde alla struttura dei dati di useSWR, per evitare che la risposta aggiorni la cache in modo errato.

useSWR restituisce una mutate associata: const { data, mutate } = useSWR('/api/user', fetcher). Questa mutate associata punta automaticamente alla chiave '/api/user'; non è necessario passare di nuovo la chiave.

Utilizzi la mutate associata nei componenti che gestiscono la visualizzazione dei dati. Utilizzi la mutate globale da swr quando deve invalidare una chiave da un componente non correlato o da una funzione di utilità.

useMutation di React Query segue uno schema trigger/isMutating simile. Le differenze principali sono le seguenti: il callback onSuccess di React Query, insieme a queryClient.invalidateQueries, è il pattern idiomatico per l'invalidazione della cache. SWR utilizza direttamente la funzione mutate per aggiornare la cache.

Entrambi supportano gli aggiornamenti ottimistici e il rollback, ma la struttura dell'API è diversa. I team esperti con una delle due librerie possono imparare rapidamente a usare l'altra.

Dopo una mutation riuscita, ha tre possibilità: effettuare nuovamente il fetch chiamando mutate(key), aggiornare la cache con il corpo della risposta (se l'API restituisce la risorsa aggiornata) oppure combinare entrambe le opzioni con aggiornamenti ottimistici e revalidazione.

Per le mutation su liste, ad esempio quando si aggiunge un elemento, aggiorni manualmente la cache aggiungendo il nuovo elemento in coda, quindi esegua la revalidazione per confermare lo stato del server. In questo modo evita di recuperare nuovamente l'intera lista, mantenendo al contempo i dati coerenti.

Global mutate(key) avvia la revalidazione; mutate(key, data) aggiorna la cache senza effettuare un nuovo fetch. useSWRMutation gestisce le mutation esplicite avviate dall'utente con trigger(), lo stato isMutating e il supporto per extraArg. Gli aggiornamenti ottimistici con optimisticData e rollbackOnError: true rendono le interfacce apparentemente istantanee, con il ripristino automatico in caso di errore.

La mutate associata restituita da useSWR agisce sulla propria chiave; la mutate globale da swr funziona ovunque.