Question

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

例如，我们在TypeScript中定义了一个Person类型：

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

假设您有一个组件，并且根据graphql的口头禅，您只获取需要的东西。没有过度获取和不足获取。

我只需要Person的{{1}}和firstName，因此可以在我的Apollo查询中实现。

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

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

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

除了创建另一个界面，没有其他方法可以正确键入此内容：

firstName

是否有官方的样式指南/方法？我问他们的懈怠，没有得到答案。在文档上看也没有看到任何关于此的信息。

Answer 1

您可以定义：

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

如果您要基于查询自动生成此类型，则类似Type gql-tag in TypeScript的方法可能对您有用。如果该解决方案不太正确，请提供您的查询示例，我可能会为您提供帮助。

Answer 2

因为GraphQL模式可以静态分析，所以根本不需要手工编写接口。有很多工具可以帮您实现。

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

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

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

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

这个想法是让您仅在.graphql文件中编写查询，以便获得完整的IDE支持（自动完成，验证等），并且代码生成了强类型的即用型服务。

一个示例，您编写查询：

query MyFeed {
  feed {
    id
    name
  }
}

接下来，您运行代码生成，然后返回名为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

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

2 个答案: