如何使用 apollo 客户端从 schema.graphql 中提取 typescript 接口：codegen

Posted 2023-03-08

【中文标题】如何使用 apollo 客户端从 schema.graphql 中提取 typescript 接口：codegen

【英文标题】：How to extract a typescript interfaces from a schema.graphql with apollo client:codegen

【发布时间】：2020-07-08 16:14:08

【问题描述】：

看来我需要一些帮助，因为我一直在寻找解决方案。

我使用 graphql 创建了一个 Angular 项目，并为此配置了 apollo 客户端。在后端，我使用带有 rebing/graphql 扩展的 laravel。 现在我想从我的模式中提取一些打字稿接口以在我的逻辑中使用它们。 不久前，我开始开发自己的小系统，在该系统中，我在运行时从 json 定义动态生成 gql 查询。我想，这也可能会受到挑战-我想.. 这就是为什么我的代码本身没有真正的 graphql 查询定义的原因。我不使用任何 .gql/.graphql 文件。

我的 graphql 查询是使用以下内容创建的：

UserModel.with('posts',  pagination: 10, offset: 0 ).get() <-- QueryRef

我想说的是，这样一来，我不能轻易启动 apollo typescript generator 来搜索我项目中的任何 graphql 查询来生成类型。

我已经管理它从端点下载我的架构，如下所示：

apollo client:download-schema ./libs/graphql/src/lib/schema.graphql --endpoint https://api.ellingtons-palace.com/graphql

效果很好。这样我就可以获得 grapqhl 或 json 模式。

我无法生成交互的打字稿文件以在我的代码中使用。 我是这样试的：

apollo codegen:generate --localSchemaFile=libs/graphql/src/lib/schema.json --target=typescript --includes=libs/graphql/src/lib/schema.graphql --tagName=graphql --addTypename --globalTypesFile=libs/graphql/src/lib/graphql-global-types.ts

不幸的是，每次我遇到如下错误：

The type of your project could not be derived from your config.

或 Field "UserType.Locations" already exists in the schema. It cannot also be defined in this type extension.

是否有人可以告诉我我做错了什么，或者有哪些选项可以将我的架构转换为有效的打字稿？

提前致谢！！

问候朱尔斯 ;)

【问题讨论】：

试试 graphql2ts 吗？

似乎 graphql2ts 不能开箱即用。它在执行时抛出错误。但总的来说，这个模块是我想要实现的。

【参考方案1】：

我认为您的问题是，要使 apollo codegen:generate 工作，您不仅需要架构，还需要提供该工具可以解析的查询。

查询用于确定工具应生成的类型。它不会根据您查询的属性生成整个架构的所有潜在类型，只会生成您实际需要的类型。

这个UserModel.with 不是graphql 查询语法（看起来像javascript），所以我不认为apollo codegen:generate 可以解析它。它可以通过提取graphql部分来解析javascript（或TypeScript）中的graphql embedded。