时间戳

首页 > 解决方案 > 如何将本地 @client 模式扩展添加到 apollo-codegen

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

问题描述

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

extend type Query {
    foo: String
}

我还使用apollo-codegen 来添加流注释。但是，它不应用扩展，并返回错误：

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

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

query FooQuery {
    foo @client
}

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

标签： graphqlapolloreact-apolloflowapollo-client

解决方案

好的，所以根据这个问题，还没有内置的方法。受zhenwenc 的 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指令，这将是一流支持的巨大优势。但是，这至少会保持生成的类型正常工作！

推荐阅读