Для чего в RTK Query используются mutations? Опишите базовую мутацию.

RTK Query — это инструмент из Redux Toolkit для работы с серверными данными. Он разделяет операции на два типа: queries (чтение данных) и mutations (изменение данных). Мутации нужны для отправки изменений на сервер: POST, PUT, PATCH, DELETE. В отличие от queries, мутации не выполняются автоматически при монтировании компонента и не кэшируются — их запускают вручную через возвращаемую функцию-триггер.

Как создать базовую мутацию

Мутация определяется внутри createApi в свойстве endpoints через builder.mutation. Обязательно указывается query, который описывает запрос, и invalidatesTags для инвалидации кэша связанных queries.

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

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    addPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useAddPostMutation } = api;

Использование в компоненте

Хук useAddPostMutation возвращает кортеж: функцию-триггер и объект состояния. Триггер можно вызвать с аргументом и получить промис с результатом.

function AddPostForm() {
  const [addPost, { isLoading, isError }] = useAddPostMutation();

  const handleSubmit = async (data) => {
    try {
      await addPost(data).unwrap();
    } catch (err) {
      console.error(err);
    }
  };

  return <button onClick={() => handleSubmit({ title: 'Hi' })}>Add</button>;
}

Ключевые особенности

• Мутации не кэшируются и не выполняются автоматически.
• Триггер возвращает промис с полями data, error и методом unwrap().
• Через invalidatesTags можно автоматически обновить связанные queries.
• Состояние мутации доступно через isLoading, isError, isSuccess.

Мутации стоит применять везде, где нужно изменить данные на сервере: формы создания, редактирование, удаление. Они упрощают работу с состоянием запроса и синхронизацию кэша без ручного написания thunk-ов.