问题标签 [graphql-codegen]

我们graphql-codegen用于为 graphql 操作生成类型。在我们的模式中，我们有 50 多种实现通用基础接口的类型Item。

示例：所有类型都实现Item：

示例查询：

当使用插件生成 Typescript 时typescript-operations，我们最终会得到如下所示的类型：

注意 TypeB 和 TypeC 也包含在选项中。这导致我们的 50 多种类型继承了巨大的生成类型Item。

有没有办法准确指定应该使用什么类型（可能在查询中？）而不是Item生成所有继承的类型？

解析器

突变

授权OpenedMutationUnion

授权突变

***OpenedMutation ***

用户

创建用户

所有代码都可以在这里查看。

这是我第一次使用 typescript 和 graphql-code-generator。

我不知道我应该为 AuthorizedOpenedMutationUnion、AuthorizedMutation、OpenedMutation、user、createUser 生成什么类型​​的文件。

我有一个使用 Urql 查询 Hasura graphql 端点的 Vue 3 组件。我已经设法使相当简单的查询工作，现在正试图使组件类型安全。

我正在使用 graphql Codegen 来构建类型，它正在生成一个 Types 文件，但是在生成的文件中抛出了错误。

我对 Typescript 有点陌生，所以希望有人能够纠正我。我很想解决生成的 Types 文件中报告的问题。

我提供了以下内容：

1. 工作 ListTodos.vue 组件的副本。
2. 生成的类型文件 (graphql.d.ts) 的缩写副本。错误发生在第 975 - 989 行，因此我提供了文件的简短版本，仅包含相关行。
3. 报告的错误副本
4. 我的 codegen.js 配置文件的副本。

任何建议表示赞赏。

1.ListTodos.vue

2. Generated Types（略）显示错误下划线

3. 错误

4.codegen.js配置文件

（已编辑）使用生成的查询类型重新获取似乎与 Apollo 客户端中的重新获取功能不同useQuery。我不明白如何表达它 - 任何人都可以提供一个例子吗？

我意识到问题可能是我的 refetch 措辞不正确，或者商店只是命中了缓存的查询。几天来我一直在检查我的代码，但我无法弄清楚它可能是什么。我也尝试过等待块。

refetch 与 svelte-apollo 一起工作，但我正试图消除这种依赖。我也尝试过 Apollo Client's useQuery，但是带有 typescript-svelte-apollo 的 graphql-codegen 的全部意义在于使用生成的 typescript 包装器进行查询。

当我将生成的查询分配给我的 Svelte 前端代码中的反应常数时，

正如我所料，当我更新查询变量时，查询不会重新获取。

这就是我的苗条模板使用查询的方式。过滤器对象根据表单用户输入进行更改。await我也用块试过这个。

由于这个插件允许直接使用查询，没有 Apollo's useQuery，我不知道如何措辞重新获取。如果我在$observations.refetch();里面做handleFilter(e)，我会得到一个错误

我的配置没有什么花哨的。我在这里做错了吗？

这是客户端：

生成的查询：

这是构建它的查询文档：

是否有一种标准方法可以使用 Apollo 客户端在同一请求中发送动态数量的突变？

我必须处理一个只公开一个删除突变的 Graphql API，我想用多个 id 来调用它。这是它的定义方式：

从我读到的，我可以做类似的事情

但是我怎么能动态地生成这样的查询呢？无论如何，这是一个好习惯吗？我总是读到动态生成graphql查询不是一个好主意。

另外，我正在使用 graphql-codegen 并在 .graphql 文件中静态定义查询，所以我想它在解析动态查询时会遇到问题。

我正在使用 Apollo 和 TypeScript 在 React 中启动一个 GraphQL 客户端，用于一个项目，其中 GraphQL 后端处于非常早期的阶段，只实现了一些功能。我使用 TypeScript 代码生成器从片段和查询中生成类型和钩子。这一切都很好，但我正在寻找的是如何处理需要将字段添加到尚未添加到后端的查询的场景？我寻找这个的原因是能够加快前端开发，而不必等待后端团队首先实现一个新领域。

Say that I have an entity called ToDo, and I want to implement the front-end part of a new feature that is showing a status per ToDo entity. The status field is not yet added to the backend, and since my models and hooks are generated directly from the graphql schema on the server, I will have to wait for the backend to add the new status column before I can start working with it.

What I would like, is to be able to add custom hardcoded fields to act as temporary placeholders for functionality that has not yet been implemented on the server. Then I could define the status field client-side, and assign it a hard-coded dummy value. When the status field has then been implemented by the backend team, I could just take out the dummy from the frontend, and it should start working.

What is generally considered the best way to handle such a case?

我现在已经将我的单体应用程序分成两个包。我会进一步细分

1. 核心模型/类型 - 具有基本的 graphql 模型和一些其他 TS 接口。这意味着由其他网络应用程序使用
2. Web App - 这使用核心模型/类型。我有 graphql 文件，它从核心模型扩展了 graphql 文件，它定义了查询、突变、订阅、输入和输出

我现在想为这些生成代码。我想

1. 核心类型已生成打字稿模型。这可以通过使用轻松实现graphql-codegen
2. Web 应用程序，它基本上只生成扩展 graphql 的代码（不应包含核心 graphql 代码）。如何才能做到这一点？

在我的 React 应用程序中，我使用 graphQL 代码生成器来生成查询和变异 React 钩子（我使用的是 Apollo 客户端）。生成的查询工作得很好，但是当涉及到突变时，我收到了这个错误：

消息：“尝试解析字段'createSuborder'时出错。”，位置：[{line：2，column：3

这是我对 graphQL 架构的重要部分：

奇怪的是，当我尝试在 graphQL 操场上运行这个突变时，它可以工作。

这是我从 codegen 生成的代码，以及我的 React 组件中使用的钩子。

我正在寻找一种方法来使用typescript-react-apollo插件graphql-code-generator（https://www.graphql-code-generator.com/plugins/typescript-react-apollo）和typegraphql（https://typegraphql.com/docs/getting-started .html）。

我遇到的问题是graphql-code-generator插件typescript-react-apollo需要operation.graphql定义文件，但似乎没有type-graphql给我们发出该文件的选项。

根据type-graphql文档，我们只能生成：https ://typegraphql.com/docs/emit-schema.html

有谁知道把这个文件拿出来的方法type-graphql吗？

或者是否operations.graphql可以通过远程连接到 graphql 服务器或从文件中推断它来生成schema.graphql文件？

在我们的项目中，我们使用react-query插件生成我们的 TS 类型，这在生成所需的钩子（查询/突变）时非常方便。但是，我们发现apollo:codegen在生成类型方面做得更好。

例子

GraphQL 查询

带有 React Query 插件的 GraphQL Code Gen

Apollo GraphQL 代码生成

而apollo:codegen我们得到以下结果：

正如您从上面的示例中看到的那样，最后一个结果更清晰，更清晰，并且允许我们访问查询返回的类型（即：）UpdateUserProfile_merchantCenter_updateUserProfile_data，因为这是引用的，而不仅仅是像第一个react-query插件示例那样内联编码。

此外，另一个有趣的点是 codegen 正在生成所有可能的类型，而apollo:codegen只为声明的查询/突变生成类型。

我们尝试了多种配置选项，但都不尽如人意。我们想知道是否会有其他配置选项尽可能接近 apollo 生成的类型。

我们正在考虑放弃 react-query codegen 插件，只使用apollo:codegen. 这涉及大量重构和可能的一些手动工作，其中必须手动创建单个查询/突变（效率不高）。