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 堆栈/重复 = 性能问题?的主要内容,如果未能解决你的问题,请参考以下文章

将可观察的有效载荷拆分为多个可观察的

GraphQL + Angular 2 服务

从可观察对象返回的复杂对象中访问数据

堆栈内存和堆内存之间的区别[重复]

堆栈和堆如何工作,内存存储(重复)[重复]

堆栈和堆内存的大小[重复]