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

Posted 2023-02-22

【中文标题】为啥 WebStorm 在 Vue 组件或 .graphql 文件中的 apollo 对象内的 gql 查询中显示错误

【英文标题】：Why WebStorm show errors in gql query inside apollo object in Vue component or .grapgql files为什么 WebStorm 在 Vue 组件或 .graphql 文件中的 apollo 对象内的 gql 查询中显示错误

【发布时间】：2020-01-06 17:24:18

【问题描述】：

我遇到了 WebStorm 语法高亮的问题。我创建了适用于 localhost 应用程序的有效 GraphQL 查询，但 WebStorm 说

对象类型“Query”上的未知字段“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',
        ],
    ,
;

一些截图：

【参考方案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