时间戳

首页 > 解决方案 > 如何在 angular apollo 客户端中停止轮询？

angular - 如何在 angular apollo 客户端中停止轮询？

问题描述

我有一个仪表板预览页面，在该页面上各种视觉效果使用 graphql 查询获取数据。我已在查询选项中启用轮询以继续轮询任何数据更改并在预览中更新它。到目前为止，一切都按预期工作。

问题是当我更改路线时（例如，我回到管理页面），graphql 轮询并没有停止。从 apollo client for angular 的文档中，我找不到任何可以停止对路由更改进行轮询的内容。阿波罗的反应客户端在这里停止轮询有一些细节，但我无法理解。

如果有人能告诉我如何停止 angular 中的 graphql 轮询，那就太好了。

如果需要任何进一步的细节，请告诉我。

标签： angularpollingapollo-client

解决方案

这可能为时已晚，无法帮助原始海报，但这就是我所做的。希望它可以帮助其他人。这是针对 Angular 8 的，因此对于早期版本可能会有所不同。

apollo.watchquery(....) 返回一个 QueryRef 实例。此 QueryRef 实例的 valueChanges 属性返回我们在视图中使用的查询数据。将返回的 QueryRef 实例存储在您的组件或服务中。然后通过在路由导航期间调用的 Angular 组件生命周期钩子之一调用它的 stopPolling() - 可能使用 ngOnDestroy。我不需要停止对导航的轮询，但是当查询显示“稳定”状态时，表明它已经“完成”并且将来不会改变。

在我的应用程序中，我有一个运行 graphql 查询的 Angular 服务类。在查询调用中，我有如下代码：

this.my_qRef = this.apollo.watchQuery<any>({
    query: MY_QUERY,
    variables: {
      MY_VARIABLEs: my_variables
    },
    pollInterval: 1000
})
return this.my_qRef.valueChanges

然后，该服务还公开了一个 stopPolling 方法，例如：

stopStatusPolling() {
  this.my_qRef.stopPolling()
}

由于视图组件将服务实例作为私有数据成员，因此只要满足正确的条件，就可以在其上调用 stopStatusPolling 方法，例如，当导航离开组件时 - 在 ngOnDestroy() 方法/生命周期挂钩中（或当轮询查询结果“稳定”并且预计不会改变时）。

推荐阅读