在同一个 .gql 文件中使用多个查询时出现 Vetur 错误答案

【问题标题】：Vetur error when using multiple queries in same .gql file在同一个 .gql 文件中使用多个查询时出现 Vetur 错误
【发布时间】：2020-01-30 11:09:52
【问题描述】：

我正在使用带有 GraphQL 的 Vue typeScript。每当我尝试使用解构函数进行查询时，我都会从 Vetur 收到错误消息。我可以在 Vue 组件中使用 GetPostData 查询，并且工作正常。

尝试使用这个 - https://github.com/apollographql/graphql-tag#support-for-multiple-operations

Vue 文件

import { GetPostData } from "../../util/queries/getPageData.gql";

getPageData.gql

query GetPostData {
  continents {
    code
  }
}
query GetCountries($code: String!) {
  country(code: $code) {
    code
  }
}

Vue.config.js

const antdTheme = require("./src/theme.js");

module.exports = {
  publicPath: "/",
  pwa: {
    iconPaths: {
      favicon32: "./favicon.png",
      favicon16: "./favicon.png",
      appleTouchIcon: "./favicon.png",
      maskIcon: "./favicon.png",
      msTileImage: "./favicon.png"
    }
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: antdTheme,
        javascriptEnabled: true
      }
    }
  },
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule("graphql")
      .test(/\.(graphql|gql)$/)
      .use("graphql-tag/loader")
      .loader("graphql-tag/loader")
      .end();
  }
};

【问题讨论】：

标签： vue.js graphql vue-apollo vetur

【解决方案1】：

我认为它表明这是你可以做的，但我认为你真的不能。最好将所有查询放在 javascript 文件中并导入“graphql-tag”来存储查询，而不是使用 .gql 文件。

【讨论】：

【解决方案2】：

刚刚测试，Vetur 没有抱怨，可能是已经修复的错误。

根据 graphql-tag 包，支持这种情况 (docs)，所以如果 Vetur 抱怨一定是扩展本身的问题。

【讨论】：