GraphQL + Angular 2 服务

Posted 2023-03-08

【中文标题】GraphQL + Angular 2 服务

【英文标题】：GraphQL + Angular 2 services

【发布时间】：2018-04-10 20:26:34

【问题描述】：

目前每个智能组件都有自己的 apollo.watchQuery， 这符合每个组件得到的正是它所要求的原则。

就像有 3 个地方在拉同一个实体，但每个组件都想要一些不同的东西。 而且我找不到为它创建服务的方法。

是否有为 graphql 实体创建服务的方法？

【参考方案1】：

好问题！

因此，使用 GraphQL 管理客户端本地数据的全部意义在于将组件彼此分离，而获取 REST API 的常规 Angular 服务实际上是在创建耦合。

apollo-client 将负责自动完成共享工作。 因此，在您的示例中，这 3 个地方，即使它们不共享服务，apollo-client 也会对来自每个查询的数据进行规范化，这意味着它们共享相同的实体数据。

因此，如果一个查询更新了实体的数据，那么所有其他查询也应该得到更新，即使它们还没有运行。 如果不是这样，您应该检查一下您是否使用dataIdFromObject 配置好 apollo-client

但是apollo-client 这样做的同时仍然保持逻辑解耦，这意味着如果其中一个查询发生变化，它不会影响其他 2 个查询。

所以我认为你有两种结构选择：

将apollo.watchQuery 放入一个 HOC（这在 React 世界中也很常见）。现在因为 Angular 的工作方式，有时感觉有点尴尬，因为 props 不像 React 那样在组件之间隐式传输。 将apollo.watchQuery 放入与组件绑定 的服务中，并放置在彼此相邻的文件夹中（并且可能具有相同的名称，例如-chat-view.component.ts 和chat-view.service.ts。

对于 Angular 开发人员来说，这可能看起来违反直觉，但我认为这是最好的方法。服务是组件的外部依赖项，但在这种情况下，您不想与其他组件共享它，因此您不会像使用 REST 创建的常规服务那样创建单点故障。

重要说明 - 即使您从服务器（或使用 Firebase 或任何其他协议..）查询 REST API，以上所有内容都适用于 apollo-client 2.0 和 apollo-angular 1.0。 您仍然可以在您的客户端应用程序上使用 Apollo 和 GraphQL 来获得所有这些好处，同时使用 apollo-link-rest 向您的服务器发送常规 REST 调用

---

【讨论】：

我也面临同样的困境。我不明白为什么常规的 Angular 服务会在组件之间创建耦合，组件仍然是解耦的，并且服务是注入的。我仍然不喜欢将查询放在每个组件中的想法。我认为相当于 React HOC 的将是 Angular 中的服务。但是我仍然不明白为什么它需要绑定到组件。

@AsGoodAsItGets 自从我上次回答以来，我们发布了这个：medium.com/the-guild/… 我认为这可以更好地满足这一需求（我们将其视为当前的最佳实践）

我们也陷入了这个陷阱，创建单独的组件特定服务会创建大量额外的文件而没有任何好处。相反，开始将阿波罗视为您唯一的服务。您的整个应用程序应该通过 graphql 进行通信。查询应该在组件中组成和执行。如果您有共享的业务逻辑，请不要将查询隐藏在 Angular 服务后面，而是创建客户端解析器（是的，这是一回事）。这种方法除了刚开始时肚子感觉不好之外没有任何缺点，但那是因为 graphql 提供的东西比我们习惯的要多。