Как организовать оптимистичные обновления (optimistic updates) при работе с RTK Query?

Что такое оптимистичные обновления?

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

Реализация в RTK Query

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

Пример кода

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    updatePost: builder.mutation({
      query: ({ id, ...patch }) => ({
        url: `posts/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      onQueryStarted: async ({ id, ...patch }, { dispatch, queryFulfilled }) => {
        // Оптимистичное обновление
        const patchResult = dispatch(
          api.util.updateQueryData('getPost', id, (draft) => {
            Object.assign(draft, patch);
          })
        );
        try {
          await queryFulfilled;
        } catch {
          // Откат при ошибке
          patchResult.undo();
        }
      },
    }),
  }),
});

Ключевые моменты

• updateQueryData — функция для изменения кэша, возвращает объект с методом undo.
• Важно обрабатывать ошибки, чтобы откатить изменения и, возможно, показать уведомление.
• Подходит для операций, где вероятность ошибки мала, например, лайки, редактирование текста.

Вывод

Оптимистичные обновления в RTK Query — мощный инструмент для создания отзывчивых интерфейсов. Их стоит применять в сценариях, где пользователь ожидает мгновенной обратной связи, а серверные ошибки редки или могут быть gracefully обработаны.