apollo.watchQuery 堆栈/重复 = 性能问题?
Posted
技术标签:
【中文标题】apollo.watchQuery 堆栈/重复 = 性能问题?【英文标题】:apollo.watchQuery stacks/duplicates = performance issue? 【发布时间】: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,在这种情况下,我该怎么做(在文档中看不到任何关于此的内容)?
【问题讨论】:
【参考方案1】:是的,您需要取消订阅 watchQueries,我遇到了完全相同的问题。但是简单的.query()
就可以了。
我不确定表演,但我认为当你有很多表演时,这可能是个问题。在我的应用中,一个被破坏的组件中的 watchQuery 仍在做一些事情,并导致了意外的行为。
取消订阅的最佳方式是使用 RxJS 中的 takeUntil
运算符,以及您在 OnDestroy
方法中完成的主题。
看到这个答案:https://***.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();
【讨论】:
以上是关于apollo.watchQuery 堆栈/重复 = 性能问题?的主要内容,如果未能解决你的问题,请参考以下文章