为什么 WebStorm 在 Vue 组件或 .graphql 文件中的 apollo 对象内的 gql 查询中显示错误

Question

我对 WebStorm 语法突出显示有疑问。我创建了适用于本地主机应用程序的有效 GraphQL 查询，但 WebStorm 说

unknown field "familyMembers" on object type "Query"

并以红色突出显示整个查询。

我真的很困惑，但也许我应该改变里面的东西 apollo.config.js - 如果是，请告诉我什么。

HelloWorld.vue

<script>
import gql from 'graphql-tag';
export default {
  apollo: {
    familyMembers: gql `
    query familyMembers {
        familyMembers {
            id
            firstName
            lastName
        }
    }`
  },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

apollo.config.js

module.exports = {
    client: {
        service: {
            name: 'vav',
            // URL to the GraphQL API
            url: 'http://localhost:4000',
        },
        // Files processed by the extension
        includes: [
            'src/**/*.vue',
            'src/**/*.js',
        ],
    },
};

部分截图：

Answer 1

好的，所以我想出了如何做到这一点，你不需要 apollo.config.js 你必须创建 .graphqlconfig，你将在其中声明本地模式路径和端点 url 像这样：

{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:4000",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

为什么 WebStorm 在 Vue 组件或 .graphql 文件中的 apollo 对象内的 gql 查询中显示错误

Why WebStorm show errors in gql query inside apollo object in Vue component or .grapgql files

javascript

webstorm

vue.js

graphql

vue-apollo