AngularFirestoreCollection sometimes returns duplicate of records after inserting a new record

[rodkar]

Version info

**Angular:**6.0.0

**Firebase:**5.0.4

AngularFire: 5.0.0-rc.10

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

I have created a firebase app at https://gallery-fb2f9.firebaseapp.com to reproduce the problem . I have not been able to reproduce the problem 100%, but I would say close to 90%. Duplicates are not shown in Firebase's actual database but only appears in the list view that got displayed after a new record has been inserted. If I refresh the screen that shows the duplicates, the correct records are displayed. Please click Titles on the toolbar to display the list.

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce
the source codes are at https://github.com/rodkar/angularfirestorecollection

Sample data and security rules

<-- include/attach/link to some json sample data (or provide credentials to a sanitized, test Firebase project) -->

Debug output

** Errors in the JavaScript console **

** Output from firebase.database().enableLogging(true); **

** Screenshots **

Expected behavior

Actual behavior

[hiepxanh]

the behavior make me confuse too, angularfire 2 actions very weird, I console log it and the data change like this:

after add 1 item, it got twice response !!!!!!!!!!
1-1) 1 items
1-2) 12 items
then I add again more:
2-1) it show 13 items
2-2) then 25 items

//Users/Shared/project/angularfirestorecollection/src/app/services/title.service.ts
 constructor(private firebase: AngularFirestore) {
    this.titlesCollection = this.firebase.collection('titles', ref => ref.orderBy('title_en'));

    this.titles = this.titlesCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Title;
        const id = a.payload.doc.id;
        return { id, ...data }
      })),
      tap(data => console.log('data',data))
    );
  }

  getAll() {
    return this.titles;
  }

 this.titleList$ = this.titleService.getAll().pipe(tap(data => console.log('at frontend',data)));

clone repo here
stackblitz here but It cannot run because some error that I'm not get it when running at local

[Bielik20]

I am facing a similar issue.

Let's say we have a collection with ids:

myCollection = ['1', '2', '3', '4', '5']

Correct Behavior

We do something like that:

this.afs.collection('myCollection').snapshotChagnes().subscribe(data => console.log(data))

This gives us:

(5) [{…}, {…}, {…}, {…}, {…}]

Everything is fine, just as expected.

Unexpected Behavior

However, if we do this:

this.afs.collection('myCollection').doc('1').valueChanges().subscribe()

this.afs.collection('myCollection').snapshotChagnes().subscribe(data => console.log(data))

This would produce:

[{…}]
(5) [{…}, {…}, {…}, {…}, {…}]

Note that I am not printing anything from the doc subscription.

Conclusion

Having subscription anywhere to a document that is part of a collection subscription results in collection returning twice. First time an array with just the document we have a subscription to. The second time an array with the entire collection.

I don't think this is by design. It makes it very hard to do something like take(1) to reduce network usage. Can anyone comment on that?

[kylecordes]

I can confirm the behaviors described here. valueChanges() and snapshotChagnes() typically (sometimes, but not necessarily every time) emit twice. First typically with a single record, then with the actual result. This occurs in an entirely static Firebase database, one which is had no data written to it for a long time.

I believe this is a valid bug, and that it is correct to expect that, in this situation, there would be just a single value emitted with the correct query output.

So far I have been working around this, although with the negative impact on both user experience and automated testing execution speed, with a short debounceTime() on the output.

[jamesdaniels]

#1825 should have dealt with the remaining duplicate issues

[Bielik20]

@jamesdaniels I am using "@angular/fire": "^5.0.0", "firebase": "^5.4.2" and the issue still persists.

[markgoho]

@jamesdaniels also seeing this issue persist, should we open a new issue?

[YoannBureau]

Bump, the issue still persists

[ericqi777]

Updated the version to "@angular/fire": "^5.2.1", "firebase": "^6.3.3". Issue still there.
I see this issue is closed, is there any conclusion or workaround?

[philstop]

Im still having this problem please help
seems like a remove function is necessary for snapshot... any one know the work around im trying to create a simple list?

[thameurr]

any help regarding duplicated items after update?

[Soolan]

Ping!

    "@angular/fire": "^6.0.0-rc.2",
    "firebase": "^7.14.2",

The issue is still there.

[hiepxanh]

I find out that the behavior of firestore is like this, first emit is cache data, second emit is true data from server

[waheb-benzaid]

the same problem with the latest version of AngularFire and firebase 9