每次更改多次触发 GraphQl 订阅解析器

Posted 2023-03-10

【中文标题】每次更改多次触发 GraphQl 订阅解析器

【英文标题】：Fire QraphQl subscription resolver multiple times per single change

【发布时间】：2018-07-23 02:06:28

【问题描述】：

使用 GraphQl 订阅我正面临一个奇怪的问题。 出于实时更新的目的，我在服务器 (NodeJs) 上使用 MongoDB Change Stream 功能并为前端 (Angular) 使用 GraphQl 订阅。因此，当数据库中出现一些更改时，它会通过 GraphQl 订阅发送到客户端。 在 Angular 组件上，有 GraphQl 订阅实现（使用Apollo client）：

...
ngOnInit() 
    this.subscribeToApprovedNews(this.params);


subscribeToApprovedNews(params) 
  this.newsQuery.subscribeToMore(
      document: addApprovedNews,
      variables: 
        projectId: params
      ,
      updateQuery: (previous,  subscriptionData ) => 
        ...
        const newItem = subscriptionData.data['addApprovedNews'];
        console.log(`$params -> added news -> $newItem`);
        ...
      
  );

但是当我们进入这个组件 n 次时，在 数据库中的一次更改 上，我们会收到这 n 次订阅的数据。 据我了解，当我们进入组件时，客户端已经建立了新的 WebSocket 连接： "Network" tab of the Chrome developer tools 作为 GraphQL 订阅的传输，我使用 subscriptions-transport-ws 包。

因此，数据库上的一个更改会触发多个 QraphQl 订阅解析器，因此在客户端，我们会收到有关更改的重复通知。 如何解决此问题并无论用户进入组件多少次，每次订阅都只接收一个数据？

提前谢谢你！

【参考方案1】：

我认为您应该在离开组件时取消订阅。好地方是 ngOnDestroy 方法。

【讨论】：

你说得对！顺便说一句，这个resource 描述了如何为subscribeToMore 实现取消订阅方法。谢谢！