求助: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
相关产品推荐
相关产品推荐

