apollo.watchQuery 堆栈/重复 = 性能问题？答案

【问题标题】：apollo.watchQuery stacks/duplicates = performance issue?apollo.watchQuery 堆栈/重复 = 性能问题？
【发布时间】：2018-05-11 23:27:29
【问题描述】：

场景：

使用 Angular 5、apollo-angular 和 apollo-client 构建的 Web 应用程序。

拥有一个订阅项目数据的组件。 OnInit() 我调用了 docs 中指定的 apollo.watchQuery()。到目前为止，一切都很好！订阅在访问组件时以及在同一模型的变异查询中返回值时获取数据！太好了！

问题是，当我在我的应用程序中单击，使用 apollo 执行大量 CRUD 操作时，我发现应用程序变得越来越慢。我注意到的一件事是，如果我导航到另一个组件，然后返回到前面提到的项目组件，在我的 Apollo Chrome 开发工具中，我可以看到之前用于项目的活动 WatchQuery（下图中没有 19）保持不变，而另一个添加了一个（第 35 个）。

这可能是个问题吗？多余的活动 WatchQueries 在客户端会话中占用了不必要的内存，使应用程序运行速度越来越慢，或者这是正常的吗？您是否应该在组件的 OnDestroy 方法中手动终止 watchQueries，在这种情况下，我该怎么做（在文档中看不到任何关于此的内容）？

【问题讨论】：

标签： angular apollo-client

【解决方案1】：

是的，您需要取消订阅 watchQueries，我遇到了完全相同的问题。但是简单的.query() 就可以了。
我不确定表演，但我认为当你有很多表演时，这可能是个问题。在我的应用中，一个被破坏的组件中的 watchQuery 仍在做一些事情，并导致了意外的行为。

取消订阅的最佳方式是使用 RxJS 中的 takeUntil 运算符，以及您在 OnDestroy 方法中完成的主题。
看到这个答案：https://stackoverflow.com/a/41177163/3859915

示例（使用 apollo 2.0 和 RxJS lettable 运算符）：

import { Subject } from 'rxjs/Subject';
import { takeUntil } from 'rxjs/operators';

export class MyComponent implements OnInit, OnDestroy {
    private ngUnsubscribe: Subject<void> = new Subject<void>();

    ngOnInit() {
        this.apollo.watchQuery({...})
            .valueChanges
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(response => {
                ...
            });
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

【讨论】：