如何使用 Apollo 后端在 TypeScript Angular 应用程序中键入部分类型?

Question

编辑：我正在寻找来自Graphql-Angular社区的权威和来源答案，以提供最佳实践示例。

例如，我们在 TypeScript 中定义了这样的 Person 类型：

interface Person {
firstName: string;
lastName: string;
birthDate: Date;
age: number;
...and many more attributes
}

假设你有一个组件，根据 graphql 的口头禅，你只获取你需要的东西。没有过度提取和欠提取。

我只需要Person的firstName和age，所以我在我的阿波罗查询中这样做。

现在，如何键入刚刚获取的此对象？

结构是Person的一部分，所以我倾向于简单地做Partial<Person>。这使得在Person上声明的所有属性都是可选的。

但这不是这里发生的事情。我们只用age和firstName拉了一部分Person.就是这样。

除了制作另一个界面之外，没有其他方法可以正确键入它，例如：

interace MyComponentPerson {
firstName: string;
age: number;
}

是否有官方的风格指南/方法？我问过他们的懈怠，没有得到答案。也查看了文档，没有看到任何关于此的内容。

Answer 1

您可以定义：

type MyComponentPerson = Pick<Person, "firstName" | "age">;

如果要根据查询自动生成此类型，则类似于TypeScript中的Type gql-tag之类的内容可能适合您。 如果该解决方案不太正确，请提供您的查询示例，我可能会提供帮助。

Answer 2

因为 GraphQL 模式可以静态分析，所以根本不需要手动编写接口。有许多工具可以为您完成。

我的团队的工作主要基于 GraphQL，我们使用 GraphQL 代码生成器。而不是手动编写接口，然后从中选择一些字段，您可以使用该工具获得可能需要的所有类型和接口。

https://github.com/dotansimha/graphql-code-generator

它会创建特定于查询的类型。如果您只获取名字和年龄，它将仅使用该类型创建类型。

---

但是还有更好的方法来使用阿波罗和生成类型。而不是用gql标记包装查询，然后生成类型并将其附加到其中。您可以将 GraphQL 代码生成器与我编写的库 Apollo Angular 结合使用。

这个想法是让你只在.graphql文件中编写查询，这样你就可以获得完整的IDE支持(自动完成，验证等(，codegen会生成一个现成的服务，即强类型。

例如，您编写查询：

query MyFeed {
feed {
id
name
}
}

接下来，你运行 codegen，作为回报，你会得到一个名为MyFeedGQL的角度服务：

import { MyFeedGQL } from './graphql';
class AppComponent {
constructor(myFeed: MyFeedGQL) {
this.myFeed.watch().valueChanges.subscribe(() => ...);
}
}

因此，您不再需要在 Apollo 中定义类型。

这是一篇关于它的文章： https://medium.com/the-guild/apollo-angular-code-generation-7903da1f8559