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

Question

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

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

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

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

我想说的是，通过这种方式，我无法轻松启动 apollo typescript 生成器来搜索我的项目中的任何 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.

有没有人可以告诉我我做错了什么，或者有什么选项可以将我的模式转换为有效的打字稿？

提前致谢！！

问候朱尔斯；）

标签： angulartypescriptgraphqlapollo

Answer 1

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

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

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