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

Question

I am using Vue typeScript with GraphQL. Whenever I try to use a query using deconstructor I get an error from Vetur. I am able to use GetPostData query in the Vue Component and its working fine.

Trying to use this - https://github.com/apollographql/graphql-tag#support-for-multiple-operations

Vue File

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();
  }
};

Answer 1

I think it states that's what you can do but I don't think you really can. It's better to put all your queries in a javascript file and import 'graphql-tag' to store queries instead of using a .gql file.

Answer 2

Just tested and Vetur didn't complain, could have been a bug that is already fixed.

According to graphql-tag package this case is supported ( docs ), so if Vetur complains must be an issue with the extension itself.