Nuxt Composition API搭配Nuxt Apollo模块默认客户端缺失报错如何解决

• @vue/apollo-composable v4+ 版本不再默认识别通过DefaultApolloClient符号手动注入的客户端实例，要求使用官方提供的provideApolloClient方法完成注入
• 原代码中DefaultApolloClient从@vue/apollo-composable/dist路径导入，属于非公开导出路径，版本迭代时容易出现匹配异常
• 部分版本的Nuxt Apollo模块注入app.apolloProvider的时机晚于onGlobalSetup执行时机，直接可选链调用可能拿到空值，导致注入失效

直接替换原插件代码为如下版本即可：

import { Context } from '@nuxt/types'
import {
  onGlobalSetup,
  defineNuxtPlugin
} from '@nuxtjs/composition-api'
import { provideApolloClient } from '@vue/apollo-composable'

export default defineNuxtPlugin(({ app }: Context): void => {
  // 优先确认apollo实例已挂载，避免空值注入
  if (!app.apolloProvider?.defaultClient) return
  onGlobalSetup(() => {
    provideApolloClient(app.apolloProvider.defaultClient)
  })
})

• 确认nuxt.config.js中模块注册顺序，@nuxtjs/apollo要放在@nuxtjs/composition-api之前
• 确认nuxt.config.js的apollo配置项中存在default客户端的完整配置，没有自定义修改过客户端的id标识
• 不要在插件的全局作用域、中间件执行上下文等非组件setup/onGlobalSetup上下文内直接调用useQuery/useMutation等apollo组合式API

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