0Pricing
Vue Academy · Урок

useMutation для изменения данных

useMutation(MUTATION), mutate(), стратегии обновления кэша и оптимистичные ответы

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

Изменение данных с помощью мутаций

Запросы читают данные, а мутации изменяют их — создают, обновляют и удаляют. Компонуемая функция useMutation выполняет мутацию GraphQL и предоставляет функцию mutate, которую можно вызвать в нужный момент.

Базовое использование useMutation

Передайте документ мутации. В отличие от useQuery, она не выполняется сразу: вместо этого возвращается функция mutate, которую Вы вызываете в ответ на событие.

import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { mutate } = useMutation(gql(
  'mutation { addPost { id } }'
))

Выполнение мутации

Вызовите mutate() из обработчика события, например при отправке формы. Функция возвращает Promise, который разрешается результатом.

async function submit() {
  await mutate()
}

Передача переменных

Передайте в mutate объект переменных. Документ мутации объявляет их с помощью синтаксиса $.

const { mutate } = useMutation(gql(
  'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
  return mutate({ title })
}

Состояния загрузки и ошибки

useMutation также возвращает ссылки loading и error, чтобы Вы могли отключить кнопку отправки и показать сведения об ошибках.

<template>
  <button :disabled="loading" @click="submit">Save</button>
  <p v-if="error">{{ error.message }}</p>
</template>

Реакция на успешное выполнение

Хук onDone срабатывает после успешной мутации — очистите форму, покажите уведомление или перейдите на другую страницу.

const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
  console.log('Created', res.data.addPost.id)
})

Обновление кэша

После мутации кэш Apollo может устареть. Функция update позволяет напрямую изменить кэш, чтобы интерфейс отразил изменения без повторного запроса.

useMutation(ADD_POST, {
  update(cache, { data }) {
    const existing = cache.readQuery({ query: GET_POSTS })
    cache.writeQuery({
      query: GET_POSTS,
      data: { posts: [...existing.posts, data.addPost] }
    })
  }
})

Почему обновление лучше повторного запроса

update кэша позволяет избежать дополнительного обмена данными по сети. Новый элемент появляется сразу, поскольку Вы записали его в кэш, из которого читает каждый вызов useQuery.

Повторное выполнение запросов вместо этого

Если ручное редактирование кэша слишком неудобно, используйте refetchQueries, чтобы повторно выполнить определённые запросы после завершения мутации.

useMutation(ADD_POST, {
  refetchQueries: [{ query: GET_POSTS }]
})

Оптимистичные ответы

optimisticResponse обновляет интерфейс до ответа сервера, предполагая успешное выполнение. Если запрос завершается ошибкой, Apollo автоматически отменяет это изменение.

mutate(
  { title: 'New' },
  {
    optimisticResponse: {
      addPost: { __typename: 'Post', id: 'temp', title: 'New' }
    }
  }
)

Зачем нужен оптимистичный интерфейс

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

Проверка знаний

Проверьте свои знания о мутациях.

Итоги

Вы изучили мутации:

  • useMutation возвращает функцию mutate, которую Вы вызываете при событиях.
  • Передавайте переменные в mutate(); используйте loading/error и onDone.
  • Функция update изменяет кэш после мутации, устраняя необходимость в повторном запросе.
  • optimisticResponse мгновенно обновляет интерфейс и автоматически отменяет изменение при ошибке.

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

Урок «useMutation для изменения данных» бесплатный?

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

Чему я научусь в уроке «useMutation для изменения данных»?

useMutation(MUTATION), mutate(), стратегии обновления кэша и оптимистичные ответы Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «useMutation для изменения данных»?

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

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

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

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

  1. Настройка Apollo Client во Vue 3
  2. useQuery для получения данных
  3. useMutation для изменения данных
  4. Подписки в реальном времени с useSubscription
← Назад к Vue Academy