Vue Academy · 课时

使用 useMutation 修改数据

Q: 「使用 useMutation 修改数据」这节课中我会学到什么？

useMutation(MUTATION)、mutate()、缓存更新策略，以及乐观响应 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

useMutation(MUTATION)、mutate()、缓存更新策略，以及乐观响应

使用 useMutation 修改数据 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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()，例如在表单提交处理程序中调用。它会返回一个最终得到结果的异步承诺对象。

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 修改数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 useMutation 修改数据」这节课中我会学到什么？

useMutation(MUTATION)、mutate()、缓存更新策略，以及乐观响应你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「使用 useMutation 修改数据」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy