Mutaciones y actualizaciones optimistas con SWR

La función mutate global de swr permite activar la revalidación de cualquier key de caché desde cualquier lugar de la aplicación: mutate('/api/user') hace que todos los hooks useSWR('/api/user') vuelvan a obtener los datos.

Impórtela con: import { mutate } from 'swr'. Esto resulta útil para invalidar datos después de una acción del servidor realizada fuera de un componente que tenga acceso directo a la función mutate vinculada.

Pase los datos como segundo argumento de mutate: mutate('/api/user', updatedUser) establece inmediatamente la caché en updatedUser sin realizar una solicitud de red. A esto a veces se le llama mutación local.

Añada { revalidate: false } como tercer argumento para evitar que SWR vuelva a obtener los datos después de la actualización optimista.

useSWRMutation está diseñado para mutaciones iniciadas por el usuario (envíos de formularios y clics en botones), en lugar de para la obtención automática. No se ejecuta al montarse; solo se ejecuta cuando se llama a trigger().

Impórtelo desde swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

El fetcher de useSWRMutation recibe (key, { arg}), donde arg es el valor que se pasa a trigger(). Ejemplo: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Llame a trigger({ title: 'New Post', content: '...' }) para ejecutar la mutación con los datos de la publicación como arg.

isMutating de useSWRMutation es true mientras la solicitud de mutación está en curso. Utilícelo para deshabilitar los botones de envío y mostrar indicadores de carga durante la solicitud, evitando envíos duplicados.

Esto reemplaza la variable de estado isSubmitting que, de otro modo, tendría que gestionar manualmente con useState.

Una actualización optimista aplica inmediatamente a la interfaz de usuario el resultado esperado antes de que el servidor confirme el cambio. Si el servidor responde correctamente, no es necesario hacer nada más. Si falla, la actualización se revierte al estado anterior.

Este patrón hace que las interfaces parezcan instantáneas: un botón de «Me gusta» aparece pulsado de inmediato, sin esperar la respuesta de POST.

Utilice mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR establece inmediatamente la caché en optimisticValue, envía la solicitud de revalidación y revierte el valor anterior si la solicitud genera una excepción.

La opción rollbackOnError: true es esencial para garantizar el comportamiento correcto: sin ella, una mutación fallida deja datos optimistas obsoletos en la caché.

Cuando se establece rollbackOnError: true y la mutación se rechaza, SWR restaura automáticamente la caché a la instantánea tomada antes de la actualización optimista. No se necesita código de reversión manual.

Además, establezca populateCache: false si el cuerpo de la respuesta de la mutación no coincide con la forma de los datos de useSWR, para evitar que la respuesta actualice incorrectamente la caché.

useSWR devuelve una mutate enlazada: const { data, mutate } = useSWR('/api/user', fetcher). Esta mutate enlazada apunta automáticamente a la clave '/api/user'; no es necesario volver a pasarle la clave.

Utilice la mutate enlazada dentro de los componentes que muestran los datos que poseen. Utilice la mutate global de swr cuando necesite invalidar una clave desde un componente no relacionado o desde una función de utilidad.

El useMutation de React Query tiene un patrón trigger/isMutating similar. Diferencias clave: la función de devolución de llamada onSuccess de React Query, junto con queryClient.invalidateQueries, es el patrón idiomático para invalidar la caché. SWR utiliza directamente la función mutate para actualizar la caché.

Ambas bibliotecas admiten actualizaciones optimistas y reversiones, pero la forma de su API es diferente. Los equipos con experiencia en una pueden aprender la otra rápidamente.

Después de una mutación correcta, tiene tres opciones: volver a obtener los datos llamando a mutate(key), actualizar la caché con el cuerpo de la respuesta (si la API devuelve el recurso actualizado) o combinar ambas opciones mediante actualizaciones optimistas y revalidación.

Para mutaciones sobre listas (como añadir un elemento), actualice manualmente la caché para agregar el elemento nuevo y, después, revalide para confirmar el estado del servidor. Así evitará volver a obtener la lista completa y mantendrá los datos coherentes.

¿Qué opción debe establecer en mutate de SWR para revertir automáticamente una actualización optimista cuando se produce un error?

Global mutate(key) activa la revalidación; mutate(key, data) actualiza la caché sin volver a obtener los datos. useSWRMutation gestiona mutaciones explícitas iniciadas por el usuario mediante trigger(), el estado isMutating y la compatibilidad con extraArg. Las actualizaciones optimistas con optimisticData y rollbackOnError: true hacen que las interfaces parezcan instantáneas y permiten recuperarse automáticamente de los errores.

La mutate enlazada de useSWR apunta a su propia clave; la mutate global de swr funciona en cualquier lugar.