Graphql-config 无法识别 Apollo Graphql @client 指令答案

【问题标题】：Graphql-config does not recognize Apollo Graphql @client directiveGraphql-config 无法识别 Apollo Graphql @client 指令
【发布时间】：2019-11-16 13:58:26
【问题描述】：

我正在使用带有 React 的 Apollo 客户端、加载了 Webpack 的 graphql-tag 和 graphql-config 来维护客户端上的架构。

有一个文件./myclient/src/features/stats/graphql/getStart.graphql

query GetStart {
    start @client
}

其中 start 和 @client 不使用 IDE graphql 插件进行验证，因为它们不包含在自动生成的架构中。

./myclient/.graphqlconfig 文件

{
    "projects": {
    "client": {
      "schemaPath": "schema.graphql",
      "extensions": {
        "endpoints": {
          "dev": "http://localhost:3000/graphql"
        }
      }
    }
  }
}

Webpack 配置为在客户端加载 graphql 架构

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: 'graphql-tag/loader',
},

它将正确加载服务器架构。但是，如何配置它以验证或忽略导致 Unknown field "start" on object "Query" 和 Unknown directive "@client" 错误的 start @client？

【问题讨论】：

标签： intellij-idea graphql apollo-client graphql-tag

【解决方案1】：

可以为 Apollo 客户端 the docs 定义客户端模式。我创建了一个包含类型定义的文件./src/apollo/graphql/typeDefs.graphql。

directive @client on FIELD

type RestParams {
    limit: Int
    page: Int
}

extend type Query {
    restParams: RestParams
}

我将typeDefs.graphql 导入到client.js 文件中，并将typeDefs 添加到ApolloClient 构造函数选项中。

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';

import TYPE_DEFS from './graphql/typeDefs.graphql';
import createHttpLink from './links/httpLink';
import createErrorLink from './links/errorLink';
import createAuthLink from './links/authLink';

const errorLink = createErrorLink();
const httpLink = createHttpLink();
const authLink = createAuthLink();

const cache = new InMemoryCache({});

const client = new ApolloClient({
  cache,
  link: ApolloLink.from([
    authLink,
    errorLink,
    httpLink,
  ]),
  // resolves,
  typeDefs: TYPE_DEFS,
  connectToDevTools: true,
});

export default client;

IDE 无法发现类型定义，但 Apollo Chrome 检查器插件也可以发现它们。

【讨论】：