Skip to content

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

Closed
@hiepxanh

Description

@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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions