WebStorm使用Apollo-Client 3出现unknown directive @client警告如何解决

该警告触发原因是WebStorm的GraphQL插件默认加载的服务端Schema未包含Apollo客户端专属的@client指令定义，不属于代码逻辑错误，按以下任意一种方法配置即可消除：

方法1：通过本地GraphQL配置文件扩展指令定义 #

1. 在项目根目录创建.graphqlconfig配置文件，内容参考：

{
  "schema": [
    "你的服务端Schema地址/本地Schema文件路径",
    "./src/graphql/local-directives.graphql"
  ],
  "documents": "src/**/*.{graphql,js,ts,jsx,tsx}"
}

2. 在项目内新建本地指令定义文件src/graphql/local-directives.graphql，写入@client指令的标准定义：

directive @client on FIELD

3. 点击WebStorm右下角GraphQL图标，选择Restart GraphQL Service刷新识别即可。

方法2：直接在IDE设置中屏蔽该警告 #

如果不需要调整GraphQL配置，可直接关闭对应检查项：

• 打开WebStorm设置页：Settings > Languages & Frameworks > GraphQL
• 找到Unknown GraphQL directive检查规则，可选择两种处理方式：
  • 在Ignore directives输入框中添加client，单独忽略该指令的未定义警告
  • 直接将该检查项的严重级别调整为No highlighting, only fix，关闭所有未知指令警告

方法3：通过Apollo配置文件自动识别（推荐） #

如果你安装了WebStorm的Apollo辅助插件，可直接在项目根目录创建apollo.config.js，插件会自动识别所有Apollo客户端专属指令：

module.exports = {
  client: {
    service: {
      name: "自定义你的服务名称",
      url: "你的GraphQL服务接口地址"
    },
    includes: ["src/**/*.{js,ts,jsx,tsx,graphql}"]
  }
}

问题报错参考截图：

内容的提问来源于stack exchange，提问作者Spencer Bigum