如何将本地 @client 模式扩展添加到 apollo-codegen答案

【问题标题】：How does one add local @client schema extension to apollo-codegen如何将本地 @client 模式扩展添加到 apollo-codegen
【发布时间】：2018-10-22 20:24:19
【问题描述】：

我正在使用apollo-link-state to add local state，它将一些字段添加到查询根，我提供了一个看起来像这样的typeDef：

extend type Query {
    foo: String
}

我也在使用apollo-codegen to add flow annotations。但是，它不应用扩展，并返回错误：

.../src/components/Foo/Foo.js: Cannot query field "foo" on type "Query".

当遇到对扩展字段的查询时：

query FooQuery {
    foo @client
}

所以我的问题是：我如何告诉apollo-codegen 客户端扩展？

【问题讨论】：

标签： graphql apollo react-apollo flow apollo-client

【解决方案1】：

好的，所以根据this issue，还没有内置方式。受zhenwenc's gist 的启发，我编写了一个快速脚本来合并服务器和客户端模式：

#!/usr/bin/env node

const fs = require("fs");
const path = require("path");

const { introspectionFromSchema } = require("graphql/utilities");
const { makeExecutableSchema } = require("graphql-tools");
const { fileLoader, mergeTypes } = require("merge-graphql-schemas");

// Make sure unhandled errors in async code are propagated correctly
process.on("uncaughtException", error => {
  console.error(error);
  process.exit(1);
});

process.on("unhandledRejection", error => {
  throw error;
});

async function introspectSchema(input, output) {
  const schemas = [].concat(...input.map(i => fileLoader(i)));
  const typeDefs = mergeTypes(schemas, {
    all: true
  });

  const schema = await makeExecutableSchema({
    typeDefs,
    resolverValidationOptions: { requireResolversForResolveType: false }
  });
  const introspection = await introspectionFromSchema(schema);
  const json = JSON.stringify(introspection, null, 2);
  fs.writeFileSync(output, json);
}

const input = [
  path.join(__dirname, "../data/*.graphql"),
  path.join(__dirname, "../src/*.graphql")
];

const output = path.join(__dirname, "../src/__generated__/schema.json");

// Generate an introspection JSON format from remote GraphQL server merging
// with any local GraphQL schemas
introspectSchema(input, output, true);

并在运行 codegen 之前调用它：

node scripts/merge.js && \
apollo-codegen generate src/components/**/*.js \
  --schema src/__generated__/schema.json \
  --target flow-modern \
  --add-typename \
  --use-flow-exact-objects false \
  --use-flow-read-only-types true

请注意，这不会验证对客户端架构的查询是否使用@client 指令，这将是一流支持的巨大优势。但是，这至少会保持生成的类型正常工作！

【讨论】：