在同一.gql文件中使用多个查询时出现Vetur报错求助

我之前在Vue+TS+GraphQL的项目里也碰到过一模一样的问题，Vetur对多操作的.gql文件解构支持不太友好，咱们来一步步搞定它！

问题根源 #

你的getPageData.gql里包含了两个查询操作，但graphql-tag默认把整个文件导出为一个DocumentNode对象，TypeScript和Vetur没法自动识别里面的单个查询，所以解构的时候就会报错。

解决方案1：手动声明类型（快速临时方案） #

如果不想引入额外工具，可以手动从导出的查询集合里提取单个操作，并声明类型：

// 先导入整个查询文件
import getPageDataQueries from "../../util/queries/getPageData.gql";
import type { DocumentNode } from "graphql";

// 提取并声明GetPostData查询
const GetPostData = getPageDataQueries.definitions.find(
  (def: any) => def.name?.value === "GetPostData"
) as DocumentNode;

// 同理提取GetCountries查询
const GetCountries = getPageDataQueries.definitions.find(
  (def: any) => def.name?.value === "GetCountries"
) as DocumentNode;

这样你就能正常使用这两个查询，Vetur也不会再报错了。

解决方案2：使用GraphQL代码生成（推荐长期方案） #

手动处理类型太麻烦，用代码生成工具能自动帮我们生成TS类型和Vue Apollo的组合式函数，完美解决Vetur的类型识别问题：

1. 安装依赖

npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-vue-apollo --save-dev

2. 创建代码生成配置文件
   在项目根目录新建codegen.yml：

overwrite: true
schema: "https://your-graphql-api-url.com" # 替换成你的GraphQL API地址或本地schema文件路径
documents: "./src/util/queries/**/*.gql" # 匹配所有查询文件
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-vue-apollo"

3. 添加npm脚本
   在package.json的scripts里加一行：

"scripts": {
  // ...其他脚本
  "codegen": "graphql-codegen --config codegen.yml"
}

4. 生成类型文件
   运行命令：

npm run codegen

5. 在组件中使用生成的查询

import { useGetPostDataQuery, useGetCountriesQuery } from "../generated/graphql";

export default defineComponent({
  setup() {
    // 使用GetPostData查询
    const { result: postData } = useGetPostDataQuery();
    
    // 使用带变量的GetCountries查询
    const { result: countryData } = useGetCountriesQuery({
      variables: { code: "CN" }
    });

    return {
      postData,
      countryData
    };
  }
});

这种方式不仅能让Vetur完美识别类型，还能自动处理查询变量、返回值的类型提示，开发体验提升很多！

额外检查 #

你的Vue.config.js里的GraphQL Loader配置是正确的，已经配置了graphql-tag/loader，这部分不用改。

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