Nuxt.js 3中ApolloClient注入失败：无法解析default客户端ID求助

问题重现 #

我在nuxt.config.ts中配置了Apollo相关内容：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  apollo: {
    autoImports: true,
    authType: "Bearer",
    authHeader: "Authorization",
    tokenStorage: "cookie",
    proxyCookies: true,
    clients: {
      default: {
        httpEndpoint: "...",
      },
      local: {
        httpEndpoint: "...",
      },
    },
  },
  // ...
});

登录页面中使用useMutation的代码：

<script setup lang="ts">
const query = gql`...`;

const { mutate: login } = useMutation<Login>(query);

async function handleSubmit(values) {
  const { onLogin } = useApollo();
  const { cpf, password } = values;

  const variables = { cpf, password };

  const result = await login(variables);

  console.log(result);
}
</script>

调用login回调时抛出错误：

Uncaught (in promise) Error: No apolloClients injection found, tried to resolve 'default' clientId

背景：最初仅安装@nuxtjs/apollo时，执行查询或突变提示缺少@vue/apollo-composable模块，于是通过npm i --force @vue/apollo-composable手动安装，之后出现上述客户端解析失败的错误。

解决方案 #

1. 卸载手动安装的冲突依赖
   @nuxtjs/apollo模块已内置适配版本的@vue/apollo-composable，强制手动安装会导致版本不兼容。先卸载该包：

npm uninstall @vue/apollo-composable

2. 确保Apollo模块正确注册
   检查nuxt.config.ts中是否将@nuxtjs/apollo加入modules数组（Nuxt 3通常会自动识别，但手动配置更稳妥）：

export default defineNuxtConfig({
  modules: ['@nuxtjs/apollo'],
  // 你的Apollo配置...
});

3. 清除缓存并重启服务
   Nuxt的缓存可能导致依赖加载异常，执行以下命令：

npx nuxt clean
npm run dev

4. 验证端点配置
   确认httpEndpoint填写的是后端GraphQL服务的有效地址，确保服务正常运行。

5. 显式指定客户端ID（可选）
   如果上述步骤仍未解决，尝试在useMutation中显式指定客户端：

const { mutate: login } = useMutation<Login>(query, {
  clientId: 'default'
});

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