[Bug or Feature] sometime value not update after refesh, only display cached data, have video record (tested with angularfire 6)

[hiepxanh]

Think you found a bug?

Yes. Hello, I just experience some buggy. There is some collection update on change but other is not. Don't know why. even I'm using snapshotChanges (or valueChanges) it still happen.
someone have same issue:

#2336
#2012

It's being cache and return old data even I'm refresh page. Only have new value on new tab but it still return old value after refresh (on this new tab)
There is a Proposal by @davideast #1819 Which maybe can resolving cache problem ???

Version info

Angular:
"@angular/core": "^9.0.5",
Firebase:
"firebase": "^7.10.0",
AngularFire:
"@angular/fire": "^6.0.0"
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Window
Nodejs 12

How to reproduce these conditions

  ftCollection(collectionPath: string, query?: QueryFn) {
    return this.dbft
      .collection(collectionPath, query)
      .get({ source: 'server' })
      .pipe(addIdOnceServer());
      // .snapshotChanges()
      // .pipe(addIdOnce());
    }

I using the same of this function: only different collection path and query.

the query return cached data look like this:

return this.ftCollection('types', ref => ref.where('kind','==', 'category'))

the query return normal data look like this:

return this.ftCollection('books', ref => {
      let query = ref
        .orderBy("createdAt", "desc")
        .limit(6)
        .where("categoryId", "==", categoryId)

export function addIdOnce() {
  return <T>(source: Observable<T>) => {
    return source.pipe(
      take(1), 
      addId(),
    );
  }
}

export function addId() {
  return <T>(source: Observable<T>) => {
    return source.pipe(
      map((bookSnapshots: any) => {
        console.log("bookSnapshots", bookSnapshots);
        try {
          if (Array.isArray(bookSnapshots)) {
            return bookSnapshots.map((bookSnapshot) => {
              const data: Omit<T, "id"> = bookSnapshot.payload.doc.data();
              // console.log('id, data', bookSnapshot.payload.doc.id, data);
              return { id: bookSnapshot.payload.doc.id, ...data };
            });
          } else {
            const data: Omit<T, "id"> = bookSnapshots.payload.data();
            // console.log('id, data', id, data);
            return { id: bookSnapshots.payload.id, ...data };
          }
        } catch (error) {
          return bookSnapshots
        }
      })
    );
  }
}

** Screenshots **

video record here: https://www.youtube.com/watch?v=VotScm8Ssd8&feature=youtu.be

Expected behavior

It should not being cache like this

Actual behavior

It's being cache and return old data even I'm refresh page. Only have new value on new tab but it still return old value after refresh (on this new tab)

[hiepxanh]

After comment take(1), I can see the return data have twice:

1. the first time angularfire return object have key: type: "added" which have old value
2. the second time angularfire return object have key: type: "modified" which have new value

It's really interesting. If I change rxjs pipe() from take(1) to take(2) the data return twice and have that one I expect

So I guest that if you want to get the latest data instead of cache data. You should take from stream take(2) instead of take(1) to get new fresh data