当我不通过 GraphQL 请求项目时，如何在 Typescript 中处理非 null？ - 打字稿 - GraphQL答案

【问题标题】：How do I handle non-null in Typescript when I don't request the item via GraphQL? - Typescript - GraphQL当我不通过 GraphQL 请求项目时，如何在 Typescript 中处理非 null？ - 打字稿 - GraphQL
【发布时间】：2021-04-18 17:17:42
【问题描述】：

我有一个 GraphQL (GQL) 服务器并在前端使用 TypeScript (TS)。这是我的 GQL 类型。

type AutomatedAlgorithmValue {
  politicalEntityAlgorithmValueId: Long
  politicalEntityId: Long!
  ...
}

politicalEntityId 不可为空。如果我要求politicalEntityId，这给了我行为，那么它保证在那里，但如果我不要求它，那么查询将正常运行。

我使用graphql-codegenerator 从 GQL 架构中创建 TS 类型。 TS 类型使politicalEntityId 为非空，所以现在在前端我必须始终请求politicalEntityId 作为AutomatedAlgorithmValue 类型的一部分，即使它不是我想要请求的东西。

在我的前端代码中，我将数据保存在一个钩子中

let [results, setResults] = useState<AutomatedAlgorithmValue[]>([]);

这是我的 GQL 请求

executeAutomatedAlgorithmProcess(politicalEntityId: $id, type: $type) {
    values {
      politicalEntityAlgorithmValueId
    }
  }

此时我不需要politicalEntityId，但是当我尝试将数据添加到我的results 时，TS 编译器知道我正在为non-null 属性politicalEntityId 添加null 和抛出一个错误。

如果有一个带有其他 non-null 属性的 non-null 对象，情况会变得更糟，因为现在请求会随着每个不必要的 non-null 属性/对象而变得越来越大。

其他人是如何处理这个问题的？我每次都必须创建一个新类型吗？我是否使用Pick 来确定@987654339@ hook 中的数据？是否有一个插件可以使所有内容都可以为空，如果是，我应该使用它吗？

【问题讨论】：

只是不要复制数据从查询到状态？根本没有必要...使用别名重命名结果data?
没有必要，但是当我使用结果时我会失去所有类型的优点，或者每次从 GQL 查询中提取一些数据时我都必须创建新类型，这只是站不住脚。

标签： typescript graphql graphql-codegen

【解决方案1】：

所以我认为您使用的类型是使用 graphql-code-generator 的 typescript 插件根据您的 GraphQL 模式生成的。正如您所说，这些类型在架构中指定了每个字段。

我相信您还需要使用typescript-operations plugin。 typescript 操作插件基本上可以使用Pick 完成您所说的操作，但它会根据您定义的前端查询自动执行。因此 typescript 操作插件生成的类型与您声明的操作相匹配。

您通常还会在这两个插件之上使用第三个插件，这是特定于您的客户端的，例如 react-query、react-apollo、urql 等，因此您最终可以为每个插件使用准备好的钩子具有类型安全性的操作。

【讨论】：