启用 enablePersistance 时，AngularFire 从缓存和服务器返回结果答案

【问题标题】：AngularFire returns results from cache AND server when enablePersistance is enabled启用 enablePersistance 时，AngularFire 从缓存和服务器返回结果
【发布时间】：2021-05-13 04:05:03
【问题描述】：

我在我的 Angular (11.1.1) 项目中使用AngularFire (6.1.4) 并具有离线持久性，我很惊讶地看到在加载时提供了两次数据：一次来自缓存，一次来自服务器（我使用变量fromCache来证明来源）。

app.module.ts

import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(Config),
    AngularFirestoreModule.enablePersistence(),
    AngularFireAuthModule
  ]
})
export class AppModule { ...}

数据库服务

this.firestoreRef.collection(collectionName, query)
    .snapshotChanges()
    .pipe(
      map(actions => actions.map(a => {
         console.log('fromCache -> ', a.payload.doc.metadata.fromCache);
       }))
    ).subscribe(/* Just for TEST purposes */);

我认为get() 选项的相同逻辑将适用：

设置为默认值（或根本不设置）会导致 Firestore 尝试检索最新的（服务器检索的）快照，但如果无法访问服务器，则会退回到返回缓存数据。

如果用户在线，为什么还会返回缓存的数据？

当然，我可以监听离线/在线事件（尽管它们不可靠）甚至是软件来检查客户端是否在线，并相应地使用或跳过缓存的结果，但 Firestore 不应该检测在线/离线状态？

【问题讨论】：

投反对票的用户至少可以解释为什么这样做。至少我和其他人可以改进问题或进一步完善它们。我在文档中找不到我的问题的答案。只根据“感觉”投票是一种可悲的习惯

标签： javascript angular firebase angularfire2 angularfire2-offline

【解决方案1】：

来自listening to realtime updates上的文档：

您可以使用 onSnapshot() 方法收听文档。使用您提供的回调的初始调用会立即使用单个文档的当前内容创建文档快照。

虽然这是针对单个文档，但在收听多个文档时也是如此。

所以您看到的是 Firestore 的工作原理：当您为快照附加监听器时，它会立即以数据的本地状态（如果有）触发。然后它会检查服务器，这可能需要一些时间，如果服务器的状态与本地缓存不同（或者您已请求调用元数据更改），则再次使用来自服务器的状态触发。

【讨论】：

感谢 Frank 的出色回答（我阅读了该文档页面并盲目地错过了前 3 行）。然后需要一些自定义逻辑来过滤这个“双重”数据集（我通常使用valueChanges而不是onSnapshot ），因为2.时间是使用来自服务器的数据触发的，即使它是第一页加载，因此数据应该与缓存/本地中的数据相同。在这些情况下，是否有一种最佳做法可以避免在 HTML 模板中加载两次数据？
最佳做法是在数据进入时显示数据。因此，第一次显示本地数据时，然后当来自服务器的数据可用时，您使用该数据更新 UI
再次感谢。我将不得不看看这如何与 ngrx 操作相匹配，因为它们将被触发两次（例如 LoadDataSuccess），但它仍然有意义，因为它反映了来自服务器的更改。