Мутации и оптимистичные обновления с SWR

Глобальная функция mutate из пакета swr позволяет запускать ревалидацию для любого ключа кэша из любой точки приложения: mutate('/api/user') заставляет все хуки useSWR('/api/user') повторно получить данные.

Импортируйте её так: import { mutate } from 'swr'. Это удобно для признания данных устаревшими после действия на сервере, выполненного вне компонента, у которого есть прямой доступ к связанной функции mutate.

Передайте данные вторым аргументом в mutate: mutate('/api/user', updatedUser) немедленно устанавливает в кэше значение updatedUser без сетевого запроса. Иногда это называют локальным изменением.

Добавьте { revalidate: false } третьим аргументом, чтобы запретить SWR повторно получать данные после оптимистического обновления.

useSWRMutation предназначен для изменений, инициированных пользователем (отправка форм, нажатия кнопок), в отличие от автоматического получения данных. Он не запускается при монтировании, а выполняется только при вызове trigger().

Импортируйте его из swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Функция получения данных для useSWRMutation получает (key, { arg }), где arg — значение, переданное в trigger(). Пример: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Вызовите trigger({ title: 'New Post', content: '...' }), чтобы выполнить изменение с данными публикации в качестве arg.

isMutating из useSWRMutation имеет значение true, пока выполняется запрос мутации. Используйте его, чтобы отключать кнопки отправки и показывать индикаторы загрузки во время запроса, предотвращая повторные отправки.

Это заменяет переменную состояния isSubmitting, которой в противном случае пришлось бы управлять с помощью useState.

Оптимистичное обновление немедленно применяет ожидаемый результат к интерфейсу ещё до того, как сервер подтвердит изменение. Если сервер успешно обрабатывает запрос, больше ничего делать не нужно. Если запрос завершается ошибкой, обновление откатывается к предыдущему состоянию.

Благодаря этому подходу интерфейс кажется мгновенным: кнопка отметки «Нравится» выглядит нажатой сразу, не дожидаясь ответа POST.

Используйте mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR немедленно устанавливает optimisticValue в кэш, отправляет запрос повторной проверки и возвращается к предыдущему значению, если запрос завершается ошибкой.

Параметр rollbackOnError: true необходим для корректной работы: без него после неудачной мутации в кэше останутся устаревшие оптимистичные данные.

Если задано rollbackOnError: true и мутация отклонена, SWR автоматически восстанавливает кэш из снимка, сделанного до оптимистичного обновления. Писать код для ручного отката не требуется.

Кроме того, задайте populateCache: false, если тело ответа мутации не соответствует структуре данных useSWR, чтобы ответ не обновил кэш некорректно.

useSWR возвращает привязанную mutate: const { data, mutate } = useSWR('/api/user', fetcher). Эта привязанная mutate автоматически работает с ключом '/api/user', поэтому повторно передавать ключ не нужно.

Используйте привязанную mutate внутри компонентов, отвечающих за отображение данных. Используйте глобальную mutate из swr, когда нужно сделать ключ недействительным из несвязанного компонента или вспомогательной функции.

useMutation в React Query использует похожую схему с trigger и isMutating. Основные различия: в React Query принято делать кэш недействительным в обратном вызове onSuccess с помощью queryClient.invalidateQueries. В SWR для обновления кэша непосредственно используется функция mutate.

Обе библиотеки поддерживают оптимистичные обновления и откат, но форма программного интерфейса различается. Команды, хорошо владеющие одной библиотекой, быстро осваивают другую.

После успешной мутации есть три варианта: повторно загрузить данные, вызвав mutate(key), обновить кэш телом ответа, если API возвращает обновлённый ресурс, или объединить оба подхода с оптимистичным обновлением и повторной проверкой.

Для мутаций списков, например добавления элемента, вручную обновите кэш, добавив новый элемент в конец, а затем выполните повторную проверку, чтобы подтвердить состояние на сервере. Это позволяет не загружать весь список заново и сохраняет согласованность данных.

Какую опцию необходимо задать в mutate в SWR, чтобы автоматически отменять оптимистичное обновление при ошибке?

Global mutate(key) запускает повторную проверку; mutate(key, data) обновляет кэш без повторной загрузки. useSWRMutation обрабатывает явные мутации, инициированные пользователем, с помощью trigger(), состояния isMutating и поддержки extraArg. Оптимистичные обновления с optimisticData и rollbackOnError: true делают интерфейс мгновенным и обеспечивают автоматическое восстановление после ошибок.

Привязанная mutate из useSWR работает со своим ключом, а глобальная mutate из swr доступна откуда угодно.