You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:Nuxt 3中使用nuxtjs/apollo的useMutation报错问题

Nuxt3中nuxtjs/apollo useMutation正确用法

首先检查代码语法错误:你第一次尝试的代码里,解构useMutation返回值时缺少了=符号,正确的解构写法应为:

<script setup>
// 省略其他代码
const { mutate } = useMutation(MY_MUTATION) // 补充缺失的=符号
const myFunction = async () => {
  const response = await mutate(variables)
  // 处理响应逻辑
}
</script>

如果语法修正后仍报错,可尝试以下方案:

  • 确保useMutation在组件setup顶层调用:不要将useMutation放在函数内部(比如你第二次尝试把它放进myFunction里是错误的,Nuxt的composable必须在setup顶层执行,才能正确获取上下文)。

  • 显式指定客户端ID:如果你的Apollo配置了多客户端,或默认客户端ID不是default,可在useMutation中指定:

const { mutate } = useMutation(MY_MUTATION, {
  clientId: 'default' // 替换为你配置的实际客户端ID
})
  • 手动提供Apollo客户端:若以上方法无效,可在组件setup内手动注入客户端并包裹useMutation:
<script setup>
import { useApolloClient, provideApolloClient } from '@vue/apollo-composable'

const apolloClient = useApolloClient()
const { mutate } = provideApolloClient(apolloClient)(() => useMutation(MY_MUTATION))

const myFunction = async () => {
  const response = await mutate(variables)
}
</script>

另外,确认你的nuxt.config.ts中apollo模块配置正确(你提到useQuery可正常工作,说明配置本身无大问题,此步可作为验证):

export default defineNuxtConfig({
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clients: {
      default: {
        httpEndpoint: '你的GraphQL接口地址'
      }
    }
  }
})

内容的提问来源于stack exchange,提问作者Scott Carlton

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 00:01:19