首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

订阅angular Apollo query observable带来旧值,缓存问题

是指在使用Angular和Apollo进行开发时,订阅Apollo查询可观察对象(Observable)可能会导致旧值的缓存问题。

在Angular中,Apollo是一个用于管理GraphQL数据的库。当我们订阅Apollo查询可观察对象时,它会返回一个Observable,该Observable将在数据发生变化时发出新的值。然而,有时候我们可能会遇到一个问题,即在订阅新值之前,旧值仍然存在于缓存中。

这个问题的原因是Apollo客户端默认会对查询结果进行缓存,以提高性能和减少网络请求。当我们订阅同一个查询时,Apollo会首先从缓存中获取数据并立即发出旧值,然后再发出新值。这可能会导致我们在订阅时收到旧值,而不是预期的最新值。

为了解决这个问题,我们可以使用Apollo提供的fetchPolicy选项来控制查询的缓存行为。fetchPolicy有几个可选值,包括:

  1. cache-first:默认值,首先尝试从缓存中获取数据,然后再发出网络请求。
  2. cache-and-network:首先从缓存中获取数据并发出旧值,然后再发出网络请求获取最新值。
  3. network-only:忽略缓存,直接发出网络请求获取最新值。
  4. cache-only:只从缓存中获取数据,不发出网络请求。
  5. no-cache:忽略缓存,直接发出网络请求获取最新值,并且不将结果存入缓存。

根据具体的需求,我们可以选择合适的fetchPolicy来解决订阅旧值的问题。例如,如果我们希望始终获取最新值并忽略缓存,可以将fetchPolicy设置为network-only

以下是一些腾讯云相关产品和产品介绍链接地址,可以帮助解决这个问题:

  1. 腾讯云云原生应用引擎(Cloud Native Application Engine):提供了一种基于容器和微服务的云原生应用托管服务,可以帮助开发者更轻松地构建、部署和管理应用程序。了解更多:腾讯云云原生应用引擎
  2. 腾讯云数据库(TencentDB):提供了多种类型的数据库服务,包括关系型数据库、NoSQL数据库和分布式数据库等,可以满足不同应用场景的需求。了解更多:腾讯云数据库
  3. 腾讯云安全产品:腾讯云提供了多种安全产品,包括Web应用防火墙(WAF)、DDoS防护、云安全中心等,可以帮助保护云计算环境的安全。了解更多:腾讯云安全产品

请注意,以上提供的腾讯云产品仅作为示例,实际选择产品时应根据具体需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

冷热ObservableObservable从被订阅时就发出整个序列 热Observable无论是否被订阅都会发出,机制类似于javascript事件。...pluck(prop:string)- 操作符,提取对象属性,是一个柯里化后的函数,只接受一个参数。 二....Angular应用中的Http请求 Angular应用中基本HTTP请求的方式: import { Injectable } from '@angular/core'; import { Observable...4.1 shareReplay与请求缓存 开发中常会遇到这样一种场景,某些集合型的常量,完全是可以复用的,通常开发者会将其进行缓存至某个全局单例中,接着在优化阶段,通过增加一个if判断在请求之前先检查缓存再决定是否需要请求...Observable(注意:shareReplay( )不是唯一一种可以加热Observable的方法),这样在第一次被订阅时,网络请求被发出并进行了缓存,之后再有其他订阅者加入时,就会得到之前缓存的数据

6.7K20

写在 2021: 值得关注学习的前端框架和工具库

SWR[6]、React-Query[7]、useRequest[8],网络请求的状态管理、缓存、竞态处理等。 生态 GatsbyJS[9],基于React的静态页面生成器,非常快。...Ionic[20],出现比较早的一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题(所以Angular YES)。...强大的地方在于实现了一套GraphQL的缓存方案(GraphQL不像REST API那样可以用URL作为缓存的key,它只有单个schema,要缓存必须基于Schema拍平整个数据结构,然后再基于各个field...进行缓存控制)。...GraphQL-Playground[46],类似上一个,但是更美观一些,支持跟踪请求链路(Tracing)以及 Apollo Federation[47] 插件的集成(Query Plan)。

4.2K10
  • 进阶 | 重新认识Angular

    与此同时,指令、事件和插等binder也同时完成了绑定,使得最终产生的Dom是与Model相维系的,即是活动的。 3....Angular 核心:使用脏检测(新/比较)Diff 当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图 Zone.js(猴子补丁:运行时动态替换) 将Javascript中异步任务包裹一层...Rx的数据是否流出不取决于是否subscribe,也就是说一个observable在未被订阅的时候也可以流出数据,在之后它被订阅过后,先前的数据是无法被数据消费者所查知,所以Rx还引入了一个lazy模式...,允许数据缓存着直到被subscribe,但是数据是否流出还是并不依赖subscribe。...Rx的observable被subscribe之后,并不是继续返回一个新的observable,而是返回一个subscriber,这样用来取消订阅,但是这也导致了链式断裂,所以它不能像Promise那样组成无限

    2.6K10

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

    最后会看看刚刚发布的 Angular 4 的新特性给响应式编程带来了什么新鲜的元素。...Async 管道 到目前为止,我们还没有进行对 Observable订阅,如果不订阅的话,写的再漂亮的语句也不会执行的。...所以,我们需要再页面销毁(ngOnDestroy 中)的适合取消订阅。 需要订阅的 Observable 少的时候还好,一旦多起来,处理时也挺麻烦,像下面的代码那样。...所幸的是,Angular 提供了对于响应式编程非常友好的设计,我们完全可以不在代码中做订阅或取消订阅的动作。那么问题来了,不订阅的话,怎么获得呢?答案是 Async 管道。...,那么 | async 是说 computed$ 是一个 Observable,请对他采用异步处理,即初始化时自动的订阅以及在组件销毁时自动取消订阅

    5.3K10

    angular5面试题_大数据面试题

    双向绑定效率问题 Angular数据绑定的三种方式 关于angular的Module 什么是angular的Module Root Module和Feature Module的区别。...脏检测的基本原理是存储数值,并在进行检测时,把当前时刻的新比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2中有了Zone.js。...Angular双向绑定效率问题 对于页面中需要绑定DOM元素极其多的情况(成百上千),必然会遇到效率问题。(具体还取决于PC、浏览器性能)。另外,脏检查超过10次(经验?)...pipe方式: 它和绑定function类似,每次脏检测classPipe都会被调用。不过Angular给pipe做了优化,加了缓存,如果item和上次相等,则直接返回结果。...Promise返回一个Observable返回0至N个

    4.3K20

    流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

    ➤业务上的挑战 在前端渲染的情况下,这么一种界面形态,所带来的挑战有哪些呢?...带着这些问题,我们来开始今天的思考过程。 ➤同步和异步 在前端,经常会碰到同步、异步代码的统一。假设我们要实现一个方法:当有某个的时候,就返回这个,否则去服务端获取这个。...我们只用Promise当然也可以解决问题,但RxJS中的Observable在这一点上可以一样做到: function getDataO() { if (a) { return Observable.of...=> { // Observable 可以有多个返回,响应多次 console.log(data) }) 在这一节里,我们不对比两者优势,只看解决问题可以通过怎样的办法: getData()...结论就是,无论Promise还是Observable,都可以实现同步和异步的封装。 ➤获取和订阅 通常,我们在前端会使用观察者或者订阅发布模式来实现自定义事件这样的东西,这实际上就是一种订阅

    2.2K60

    RxSwift介绍(三)——更加灵活的Subject

    前一篇文章讲述 RxSwift 框架中最重要的类 Observable ,但是其局限性只能作为被订阅者被动接收信号并响应事件。...Subject 其订阅者也是 Observable,首先可以动态地接受新,其次当 subject 值更新时,会通过 event 把新发送给所有的订阅者。...除了包含 PublishSubject 的功能,还可以手动设置订阅者接收到的 event 个数。...因此,在使用时必须在创建时设置 bufferSize,表示将会返回给订阅者对应个数最近缓存 event (注:若一个订阅者去订阅已经结束的 ReplaySubject ,除了会收到缓存的 .next...另外,如果缓存对象是图片、视频等极耗内存的资源时也可能导致内存问题

    1.6K30

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径。...在文中,我们将会接触到很多Angular 2的重要概念,并附扩展阅读资料和自查小测试,供大家评估自己对Angular的了解程度。 Angular 经典问题及扩展阅读 1. ...这通常用在setter中,当类中的被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...因为它缓存的DOM将在浏览器中呈现得更快,并提供更好的性能。此外,还可以相对很好地管理shadow DOM,同时检测Angular 2应用的改变,并且可以有效地管理视图的重新绘制。...如果服务器的HTTP请求结果或其它一些异步操作不再需要,则Observable订阅者可以取消订阅,而Promise将最终调用成功或失败的回调,即使你不需要通知或其提供的结果。

    17.3K80

    响应式编程在前端领域的应用

    其实在好多年前因为 Angular 的原因接触过响应式编程,而这些年的一些项目经验,让我在再次回顾响应式编程的时候又有了新的理解。...这两个其实很不一样:Promise 会发生状态扭转,状态扭转不可逆;而 Observable 是无状态的,数据流可以源源不断,可用于随着时间的推移获取多个Promise 在定义时就会被执行;而 Observable...只有在被订阅时才会执行Promise 不支持取消;而 Observable 可通过取消订阅取消正在进行的工作事件同样是基于观察者模式,相信很多人都对事件和响应式编程之间的关系比较迷惑。...同时,结合响应式编程的合流、缓存等能力,我们可以收获更多。响应式编程提供了怎样的服务前面说了很多,相信大家对响应式编程的概念和使用有一定的理解了。现在,我们一起来看看它还能给我们带来怎样的服务。...0,1,2,3,4,而第二个输出的是3,4,此处为热观察热观察和冷观察根据具体的场景可能会有不同的需要,而 Observable 提供的缓存能力也能解决不少业务场景。

    39880

    浅谈Angular

    Angular里的数据绑定: 1.插表达式 {{}}--括号里可填表达式,不能填语句!...当前比特币的价格是:{{5000.123456 | currency:'JPY':true:'5.1-4'}} 5.Angular里路径传: 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法...: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个,一旦该订阅,如果其存储的数据发生变化,订阅者就会收到通知,进而做出对应的处理 注意点: AngularJS...里,并不是所有的都可以被订阅,只有Observable类或者Observable的子类创建出的对象可以被订阅 subscribe是Observable类下的一个函数。

    4.4K10

    彻底搞懂RxJS中的Subjects

    如果您是Angular开发人员,则不会错过RxJS Observables,但您可能对Subjects不太熟悉。虽然它们不像简单的Observable被频繁使用,但还是非常有用的。...如果两秒钟后再次订阅Observable,我们将在控制台中看到两个"计数器",第二个计数器有两秒钟的延迟。...BehaviorSubject Subject可能存在的问题是,观察者将仅收到订阅主题后发出的。 在上一个示例中,第二个发射器未接收到0、1和2。...有时,我们需要在订阅该对象之前,知道该对象最后一次发射了哪个。例如,如果我们发出日期,情况就是这样。任何在3月1日订阅的观察者,无论何时订阅,都将获得3月1日的订阅。...订阅时,它将收到最后一个:59。 这使得AsyncSubjects对于获取和缓存很有用,例如HTTP响应,我们只希望获取一次,但是以后可以从其他位置进行访问。

    2.6K20

    Rxjs&Angular-退订可观察对象的n种方式

    原文/出处: RxJS & Angular — Unsubscribe Like a Pro 在angular项目中我们不可避免的要使用RxJS可观察对象(Observables)来进行订阅(Subscribe...{ getEmissions(scope: string): Observable { return Observable.create((observer) => {...方式一 "常规"的取消订阅的方式 最简单的订阅和取消订阅一个可观察对象的方式是在 ngOnInit 方法中订阅可观察对象(Observable), 然后在组件类中创建一个类属性用来保存这个订阅(Subscription...简单起见, 我们可以使用Subscription.EMPTY来初始化一个订阅对象(Subscription), 这样可以防止在取消订阅时遇到空引用对问题...., 如果我们的组件类中只有一个订阅对象(Subscription), 这种方式没什么问题.

    1.2K00
    领券