Как реализовано кэширование в RTK Query?

RTK Query — это инструмент для работы с серверным состоянием, встроенный в Redux Toolkit. Его кэш устроен как нормализованное хранилище, где каждая запись идентифицируется парой: имя эндпоинта и сериализованный аргумент запроса. Это позволяет автоматически переиспользовать данные между компонентами без повторных сетевых вызовов.

Как формируется ключ кэша

Когда вы вызываете хук, например useGetUserQuery(1), RTK Query строит ключ вида getUser(1). Если другой компонент запросит того же пользователя, он получит данные из кэша мгновенно, а сетевой запрос не будет отправлен повторно.

Жизненный цикл записи

• При первом запросе создаётся запись со статусом pending, затем fulfilled или rejected.
• Пока есть активные подписчики (компоненты, использующие хук), запись хранится в кэше.
• Когда подписчиков не остаётся, запускается таймер keepUnusedDataFor (по умолчанию 60 секунд), после чего запись удаляется.
• Повторная подписка в течение этого времени вернёт данные из кэша без запроса.

Инвалидация и теги

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

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (id) => `users/${id}`,
      providesTags: (result, error, id) => [{ type: 'User', id }],
    }),
    updateUser: builder.mutation({
      query: ({ id, ...patch }) => ({
        url: `users/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      invalidatesTags: (result, error, { id }) => [{ type: 'User', id }],
    }),
  }),
});

Ручное управление кэшем

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

Итог: кэширование в RTK Query избавляет от ручного управления состоянием загрузки и ошибок, автоматически переиспользует данные и синхронизирует их через теги. Применяйте RTK Query, когда в приложении много серверных данных и важна производительность и консистентность.