Firebase Realtime Listener Concept - how to detach / unsubscribe from the listener?

Question

Get realtime updates with Cloud Firestore shows how to subscribe to, or listen to, document changes.

db.collection("cities").doc("SF")
    .onSnapshot(function(doc) {
        console.log("Current data: ", doc.data());
    });

The example above makes sense. My question concerns detaching the listener. Is it accurate to say that when we want to detach / unsubscribe / unlisten to a document, we simply subscribe a second time to the same database reference?

...that's what it looks like, but I'm not crystal clear as to how/why?

var unsubscribe = db.collection("cities")
    .onSnapshot(function (){
      // Respond to data
      // ...
    });

// Later ...

// Stop listening to changes
unsubscribe();

This seems unnecessarily confusing. ...Why not simply have 2 methods, .onSnapshot and .offSnapshot ? I supposed the only difference I see between the two provided examples is that the latter is assigned to a variable and that the method is called on the whole collection, rather than a single document.

So, is the bottom line: to unsubscribe, attach the .onSnapshot method to the parent collection and assign it to a variable?

Answer 1

My question concerns detaching the listener. Is it accurate to say that when we want to detach / unsubscribe / unlisten to a document, we simply subscribe a second time to the same database reference?

You don't need to subscribe twice.

The initial subscription you made returns a function which when called, unsubscribes you. You don't add that code a second time, instead store the return value from the initial call to the collection into a variable and invoke it when you intend to unsubscribe.

Imagine something like this:

function subscribe() {
  ... do things that subscribe me
  return function() {
    ... do things that unsubscribe me
  }
}

let unsubscribe = subscribe()

// later when I want to unsubscribe
unsubscribe()

Answer 2

Yes, according to the documentation , you just need to call that unsubscribe function to unsubscribe. The variable your listener returns is in fact a listener registration (see below for detail), so calling it to unregister kind of make sense.

It is indeed quite confusing, but since I have a similar set up on Android, and the way you unsubscribe in Android is call remove() on a ListenerRegistration instance (the same unsubscribe variable in web), I'd say it's only a design problem for the web.