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

Question

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

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

Vue文件

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

获取页面数据.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();
  }
};

Answer 1

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

Answer 2

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

根据 graphql-tag 包，支持这种情况（docs），所以如果 Vetur 抱怨必须是扩展本身的问题。