2

I'd like to call a function just once whenever my Firebase document data changes, but chaining a .subscribe() onto my valueChanges() causes the subscription to fire twice every time there's an update.

Basic code without a subscription:

home.component.ts:

constructor(private firestore: AngularFirestore) { }

ngOnInit(): void {
    let docName = this.buildDocName();
    this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges();
}

home.component.html:

<mat-list *ngIf="(plants | async)">
    <mat-list-item>Humidity: {{ (plants | async)?.humidity }}</mat-list-item>
    <mat-list-item>Temperature: {{ (plants | async)?.temperature }}</mat-list-item>
</mat-list>

This code causes the subscription to fire twice:

home.component.ts:

ngOnInit(): void {
    let docName = this.buildDocName();
    this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges()
        .subscribe(data => {
            if (!data)
                return;

            console.log('doc updated...', data);
            // ...
        });
}

2 Answers 2

8

It might be actually changing twice and your subscription is doing what it is supposed to. You're just not handling that case. Try either to debounce it or filter it if there was no change.

this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges()
  .pipe(
    debounceTime(500)
    //distinctUntilChanged() // or try this, ignores equal data
   )
  .subscribe(data => { /*...*/});

The second problem can be, that you forgot to unsubscribe and you have two living subscriptions at the same time. You need to get rid of them properly.

ngOnDestory() {
  this.plants.unsubscribe();
}
1
  • Solution worked for me in handling an issue where it was returning one document from the cache first and then the actual results second. This stopped the cached results from being displayed.
    – MadMac
    Apr 26 at 22:06
0

Your two subscriptions are causing this, try this to fix the issue:

ngOnInit(): void {
  let docName = this.buildDocName();
  this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges().pipe(shareReplay());
  this.plants.subscribe(data => {
        if (!data)
            return;

        console.log('doc updated...', data);
        // ...
    });
}

Have a look at pitfall 2 for a deeper explanation.

UPDATE: Sorry, didn't see the multiple pipes. Give this a go in the template:

<mat-list *ngIf="plants | async as pl">
    <mat-list-item>Humidity: {{ pl.humidity }}</mat-list-item>
    <mat-list-item>Temperature: {{ pl.temperature }}</mat-list-item>
</mat-list>
2
  • i've added import { shareReplay } from 'rxjs/operators'; but this still results in 2 callbacks May 13, 2021 at 6:59
  • thanks for the update. ive tried it and it somehow still gives off 2 events May 13, 2021 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.