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

Question

我对 WebStorm 语法突出显示有问题。我创建了有效的 GraphQL 查询，它适用于 localhost 应用程序，但 WebStorm 说

对象类型“查询”上的未知字段“familyMembers”

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

我真的很困惑，但也许我应该在里面改变一些东西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
      }
    }
  }
}