React Academy · Урок

Мутации с useMutation

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

«Мутации с useMutation» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

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

Основы useMutation

Вызовите useMutation с mutationFn. Он возвращает функцию mutate и свойства состояния. Вызовите mutate(), чтобы запустить операцию.

import { useMutation } from '@tanstack/react-query';

const { mutate, isLoading, isError } = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }).then(r => r.json()),
});

Вызов mutate

Вызовите `mutate(variables)` из обработчика события. Переменные передаются в mutationFn в качестве первого аргумента.

<button onClick={() => mutate({ title: 'New Post' })}>
  Create Post
</button>

Обратные вызовы: onSuccess, onError, onSettled

Добавьте параметры обратных вызовов в useMutation: onSuccess выполняется после успешной мутации, onError — при ошибке, а onSettled — в обоих случаях (аналогично finally).

useMutation({
  mutationFn: createPost,
  onSuccess: (data) => {
    console.log('Created:', data);
    navigate('/posts/' + data.id);
  },
  onError: (error) => {
    toast.error(error.message);
  },
})

Признание запросов недействительными после мутации

После успешной мутации признайте связанные запросы недействительными, чтобы React Query повторно загрузил актуальные данные. Используйте queryClient.invalidateQueries в onSuccess.

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

mutateAsync для синтаксиса await

Используйте `mutateAsync` вместо `mutate`, чтобы дождаться завершения мутации и обработать её с помощью try/catch.

const { mutateAsync } = useMutation({ mutationFn: createPost });

async function handleSubmit() {
  try {
    const post = await mutateAsync({ title: 'Draft' });
    navigate('/posts/' + post.id);
  } catch (err) {
    setError(err.message);
  }
}

Отключение отправки во время мутации

Используйте `isPending` (или `isLoading`), чтобы отключить кнопку отправки, пока мутация выполняется.

const { mutate, isPending } = useMutation({ mutationFn: saveItem });

<button onClick={() => mutate(item)} disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Оптимистичные обновления с onMutate

Используйте onMutate, чтобы оптимистично обновить кэш до ответа сервера. Выполните откат в onError с помощью контекста, возвращённого onMutate.

useMutation({
  mutationFn: likePost,
  onMutate: async (id) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] });
    const prev = queryClient.getQueryData(['posts']);
    queryClient.setQueryData(['posts'], old => old.map(p =>
      p.id === id ? { ...p, likes: p.likes + 1 } : p));
    return { prev };
  },
  onError: (err, id, ctx) => queryClient.setQueryData(['posts'], ctx.prev),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['posts'] }),
})

Сброс состояния мутации

Вызовите `reset()` из useMutation, чтобы очистить состояние мутации (данные, ошибку и статус). Это полезно после перехода на другую страницу или очистки формы.

const { mutate, isError, reset } = useMutation({ /* ... */ });

{isError && (
  <>
    <p>Error!</p>
    <button onClick={reset}>Try Again</button>
  </>
)}

Несколько мутаций параллельно

Вызывайте mutate несколько раз параллельно — каждый вызов отслеживается независимо. Используйте mutateAsync вместе с Promise.all для параллельных мутаций.

await Promise.all([
  mutateAsync({ id: 1, title: 'First' }),
  mutateAsync({ id: 2, title: 'Second' }),
]);

Быстрая проверка

Как рекомендуется поступить после успешной мутации, чтобы интерфейс отображал актуальные данные?

Повторение

useMutation предоставляет mutate, isPending и обратные вызовы жизненного цикла. Используйте onSuccess, чтобы признать связанные запросы недействительными. Используйте mutateAsync в сценариях с await. Используйте onMutate/onError для оптимистичных обновлений с откатом.

Следующий урок: **бесконечная прокрутка и постраничная навигация с useInfiniteQuery** — Вы получите данные по страницам и сможете плавно загружать дополнительные страницы.

Часто задаваемые вопросы

Урок «Мутации с useMutation» бесплатный?

Да — полный текст урока «Мутации с useMutation» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Мутации с useMutation»?

Отправляйте данные в API с помощью useMutation, обрабатывайте состояния загрузки и ошибок и аннулируйте запросы после успеха. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Мутации с useMutation»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy