Firestore anytime soon? #507 (onSnapshot, unsubscribe)

Author: EddyVerbruggen

demo-ng/app/item/items.component.html

@@ -12,7 +12,8 @@
     <Button text="Set (auto id)" (tap)="firestoreSetByAutoID()" class="button"></Button>
     <Button text="Update" (tap)="firestoreUpdate()" class="button"></Button>
     <Button text="Get" (tap)="firestoreGet()" class="button"></Button>
-    <Button text="Listen to SF" (tap)="firestoreListen()" class="button"></Button>
+    <Button text="Listen to changes in SF" (tap)="firestoreListen()" class="button"></Button>
+    <Button text="Stop listening" (tap)="firestoreStopListening()" class="button"></Button>
     <Button text="Where" (tap)="firestoreWhere()" class="button"></Button>
     <Button text="Where, Order, Limit" (tap)="firestoreWhereOrderLimit()" class="button"></Button>
     <Button text="Delete" (tap)="firestoreDelete()" class="button"></Button>

demo-ng/app/item/items.component.ts

@@ -9,6 +9,8 @@ const firebase = require("nativescript-plugin-firebase/app");
 })
 export class ItemsComponent implements OnInit {
 
+  private listenerUnsubscribe: () => void;
+
   constructor() {
   }
 
@@ -136,9 +138,14 @@ export class ItemsComponent implements OnInit {
   }
 
   public firestoreListen(): void {
+    if (this.listenerUnsubscribe !== undefined) {
+      console.log("Already listening ;)");
+      return;
+    }
+
     const docRef: firestore.DocumentReference = firebase.firestore().collection("cities").doc("SF");
 
-    docRef.onSnapshot((doc: firestore.DocumentSnapshot) => {
+    this.listenerUnsubscribe = docRef.onSnapshot((doc: firestore.DocumentSnapshot) => {
       if (doc.exists) {
         console.log("Document data:", JSON.stringify(doc.data()));
       } else {
@@ -147,6 +154,16 @@ export class ItemsComponent implements OnInit {
     });
   }
 
+  public firestoreStopListening(): void {
+    if (this.listenerUnsubscribe === undefined) {
+      console.log("Please start listening first ;)");
+      return;
+    }
+
+    this.listenerUnsubscribe();
+    this.listenerUnsubscribe = undefined;
+  }
+
   public firestoreWhere(): void {
     const query: firestore.Query = firebase.firestore().collection("cities")
         .where("state", "==", "CA")

docs/FIRESTORE.md

@@ -68,18 +68,25 @@ sanFranciscoDocument.get().then(doc => {
 ```
 
 ### `collection.doc().onSnapshot()`
-To listen to changes in a certain document, you can register a callback function that gets invoked every time data is changed:
+To listen to changes in a certain document, you can register a callback function that gets invoked every time data is changed.
+
+To unsubscribe the listener, just invoke the function that was returned when attaching the listener.
+
+> NOTE: Due to a bug in the iOS Firestore SDK 'unsubscribe' does not currently work (plugin version 5.0.0), so the plugin is silently ignoring further updates after unsubscribing. This should not hurt your usage in any way though.
 
 ```typescript
 const sanFranciscoDocument = firebase.firestore().collection("cities").doc("SF");
 
-sanFranciscoDocument.onSnapshot(doc => {
+const unsubscribe = sanFranciscoDocument.onSnapshot(doc => {
   if (doc.exists) {
     console.log("Document data:", JSON.stringify(doc.data()));
   } else {
     console.log("No such document!");
   }
 });
+
+// then after a while, to detach the listener:
+unsubscribe();
 ```
 
 ### `collection.add()`

src/firebase.android.ts

@@ -2216,8 +2216,8 @@ firebase.firestore.collection = (collectionPath: string): firestore.CollectionRe
   }
 };
 
-firebase.firestore.onSnapshot = (docRef: com.google.firebase.firestore.DocumentReference, callback: (doc: DocumentSnapshot) => void): void => {
-  docRef.addSnapshotListener(new com.google.firebase.firestore.EventListener({
+firebase.firestore.onSnapshot = (docRef: com.google.firebase.firestore.DocumentReference, callback: (doc: DocumentSnapshot) => void): ()=> void => {
+  const listener = docRef.addSnapshotListener(new com.google.firebase.firestore.EventListener({
         onEvent: ((snapshot: com.google.firebase.firestore.DocumentSnapshot, exception) => {
           if (exception !== null) {
             return;
@@ -2229,6 +2229,8 @@ firebase.firestore.onSnapshot = (docRef: com.google.firebase.firestore.DocumentR
         })
       })
   );
+
+  return () => listener.remove();
 };
 
 firebase.firestore.doc = (collectionPath: string, documentPath?: string): firestore.DocumentReference => {

src/firebase.d.ts

@@ -807,7 +807,7 @@ export namespace firestore {
     get: () => Promise<DocumentSnapshot>;
     update: (document: any) => Promise<void>;
     delete: () => Promise<void>;
-    onSnapshot(callback: (doc: DocumentSnapshot) => void): void;
+    onSnapshot(callback: (doc: DocumentSnapshot) => void): () => void;
   }
 
   export interface Query {

src/firebase.ios.ts

@@ -2243,10 +2243,20 @@ firebase.firestore.collection = (collectionPath: string): firestore.CollectionRe
   }
 };
 
-firebase.firestore.onSnapshot = (docRef: FIRDocumentReference, callback: (doc: DocumentSnapshot) => void): void => {
-  docRef.addSnapshotListener((snapshot: FIRDocumentSnapshot, error: NSError) => {
+firebase.firestore.onSnapshot = (docRef: FIRDocumentReference, callback: (doc: DocumentSnapshot) => void): () => void => {
+  const listener = docRef.addSnapshotListener((snapshot: FIRDocumentSnapshot, error: NSError) => {
     callback(new DocumentSnapshot(snapshot ? snapshot.documentID : null, !!snapshot, snapshot ? () => firebase.toJsObject(snapshot.data()) : null));
-  })
+  });
+
+  // There's a bug resulting this function to be undefined..
+  if (listener.remove === undefined) {
+    return () => {
+      // .. so we're just ignoring anything received from the server (until the callback is set again when 'onSnapshot' is invoked).
+      callback = () => {};
+    };
+  } else {
+    return () => listener.remove();
+  }
 };
 
 firebase.firestore.doc = (collectionPath: string, documentPath?: string): firestore.DocumentReference => {