Search code examples
typescriptgoogle-cloud-firestoreangularfire2firefox-developer-tools

How is snapshotChanges aware of changes?


I have installed @angular/fire (latest version 5) dependency.

  getCustomersList() {
    this.customerService.getCustomersList().snapshotChanges().pipe(
      map(changes =>
        changes.map(c =>
          ({ key: c.payload.doc.id, ...c.payload.doc.data() })
        )
      )
    ).subscribe(customers => {
      this.customers = customers;
    });

If I open with F12 the Network tab of Firefox, I don't see any network activity, even if I "magically" receive a change (from another browser instance, for example). But I assume that the app client (living in the browser) is polling periodically the remote db: is it confirmed somehow? Which is the mechanism - under the covers - by which it can subscribe changes done elsewhere? Why can't I visualize it in the browser developer tools? Since @angular/fire is open source on github, can someone point me to the relevant part of the code?


Solution

  • Actually I was wrong, now I can see (screenshot below) the requests coming approx one per minute from the Zone.js scheduler.

    Indeed, the first paragraph of this article simply answers my question

    Angular introduced Zone.js to handle change detection. This allows Angular to decide when the UI has to be refreshed. Usually, you don’t have to care about any of this, because Zone.js just works.

    enter image description here