snapshotChanges delivers data twice from cache after updating to "@angular/fire": "^6.1.0" and "firebase": "^8.0.2"

lukfel commented 3 years ago

Version info

Angular: "~11.0.0",

Firebase: "^8.0.2",

AngularFire: "^6.1.0",

How to reproduce these conditions

1) I import the AngularFirestoreModule and set enablePersistence() for caching.

app.module.ts

...
import { AngularFirestoreModule } from '@angular/fire/firestore';

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

2) I create a service that allows to receive the required data from Firestore with an optional query. Additionally I log how many documents are loaded and where they are loaded from (network or cache).

firestore.service.ts

  // Load data from firestore with optional query
  public readAll$(query?: QueryFn): Observable {
    return this.getCollection(query).snapshotChanges().pipe(map(actions =>
      actions.map(action => {
        this.getLoadingInfos(action.payload.doc.metadata.fromCache);
        return data;
      }),
    ));
  }

  // Log whether data was loaded from cache or network
  private getLoadingInfos(fromCache: boolean): void {
    console.log('LOAD ' + this.collectionName + '-Docs from ' + (fromCache ? 'CACHE' : 'NETWORK'));
  }

3) Then I´ve a start page where I load and display all active user documents (currently two).

start.component.ts

  ngOnInit(): void {
    this.users$ = this.firebaseService.readAll$(ref => ref.where('active', '==', true).limit(10));
  }

start.component.html

  <div *ngIf="users$ | async as users">
    <user-list [users]="users"></user-list>
  </div>

4) I also have a profile page where upvoted users can be viewed (currently two).

profile.component.ts

  ngOnInit(): void {
    this.upvotedUsers$ = this._userDB.readAll$(ref => ref.where('id', 'in', user.upvotedIds));
  }

profile.component.html

<div *ngIf="user$ | async as user">

  <mat-tab-group mat-stretch-tabs>
    <mat-tab label="Tab 1"></mat-tab>

    <mat-tab label="Tab 2">
      <!-- lazy load data with ng-template -->
      <ng-template matTabContent>
        <br>
        <div *ngIf="upvotedUsers$ | async as upvotedUsers; else upvotedUsersNotFound">
          <user-list [users]="upvotedUsers"></user-list>
        </div>
        <ng-template #upvotedUsersNotFound>nothing found</ng-template>
      </ng-template>
    </mat-tab>
  </mat-tab-group>

</div>

Sample data and security rules

Debug output

However, since updating from "@angular/fire": "^6.0.3" to "@angular/fire": "^6.1.0" and from "firebase": "^7.22.0" to "firebase": "^8.0.2" the caching behaviour seems to have changed.

On the start page, the two users are loaded twice every time I load the page (see gif below). In the console output you can even see that it first loads two and then jumps to 4 shortly later (this was always correct before the update). start

The next problem the updates introduced was on the profile page when lazy loading data in the Angular Material tabs. Now, data seems to loaded again (as expected), but stacked on the previous data (see gif below). profile

Expected behavior

To load the required data once from cache if the data has already been loaded from network before.