Vue使用apollo-client调用GraphQL API报watchQuery未定义错误如何解决

对应报错信息：Error in created hook: "TypeError: Cannot read property 'watchQuery' of undefined"
该报错的核心原因是调用watchQuery方法的Apollo Client实例为undefined，对应Vue集成场景下就是组件实例的$apollo属性未被正确注入，可通过以下场景逐一排查：

排查1：确认VueApollo插件注册与挂载流程正确 #

这是90%以上同类报错的诱因，完整的注册流程示例如下（以Vue2为例）：

// main.js入口文件
import Vue from 'vue'
import App from './App.vue'
// 导入依赖
import VueApollo from 'vue-apollo'
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'

// 1. 注册VueApollo插件
Vue.use(VueApollo)

// 2. 初始化Apollo Client实例
const httpLink = createHttpLink({
  uri: '你的GraphQL服务端接口地址'
})
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

// 3. 构造ApolloProvider
const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

// 4. *必须将apolloProvider挂载到根Vue实例，漏写这步会导致所有组件拿不到$apollo*
new Vue({
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

如果是Vue3项目，需要使用适配Vue3的@vue/apollo-composable或vue-apollo@4版本，不可混用Vue2适配的旧版vue-apollo包。

排查2：确认调用时机与调用对象正确 #

• 不要在插件注册完成前调用$apollo相关方法，若在异步逻辑中调用，可先判断this.$apollo是否存在再执行后续逻辑
• 检查调用时是否拼写错误，例如把this.$apollo误写为this.apollo等写法
• 若在created生命周期中调用无效，可尝试移到mounted生命周期验证，部分场景下根实例的provider注入会略晚于组件created触发

Apollo Client常用使用经验 #

• 权限类请求可统一通过Apollo Link中间件处理，无需每个请求单独配置请求头：

import { setContext } from '@apollo/client/link/context'

const authLink = setContext((_, { headers }) => {
  // 从本地存储取token
  const token = localStorage.getItem('user_token')
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
})
// 初始化client时拼接link即可
const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

• Vue3项目优先使用组合式API封装的useQuery/useMutation方法，会自动管理响应式状态与请求生命周期，无需手动调用watchQuery监听数据变化
• 频繁变更的数据查询可配置fetchPolicy参数调整缓存策略，减少重复请求：可选值包括cache-first（优先读缓存，默认）、network-only（始终走网络请求）、cache-and-network（先返回缓存再同步网络最新数据）等

内容的提问来源于stack exchange，提问作者Odessa Turner