Firestore anytime soon? #507 (onSnapshot)

Author: EddyVerbruggen

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

@@ -12,6 +12,7 @@
     <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="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

@@ -135,6 +135,18 @@ export class ItemsComponent implements OnInit {
     });
   }
 
+  public firestoreListen(): void {
+    const docRef: firestore.DocumentReference = firebase.firestore().collection("cities").doc("SF");
+
+    docRef.onSnapshot((doc: firestore.DocumentSnapshot) => {
+      if (doc.exists) {
+        console.log("Document data:", JSON.stringify(doc.data()));
+      } else {
+        console.log("No such document!");
+      }
+    });
+  }
+
   public firestoreWhere(): void {
     const query: firestore.Query = firebase.firestore().collection("cities")
         .where("state", "==", "CA")

docs/FIRESTORE.md

@@ -67,6 +67,21 @@ 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:
+
+```typescript
+const sanFranciscoDocument = firebase.firestore().collection("cities").doc("SF");
+
+sanFranciscoDocument.onSnapshot(doc => {
+  if (doc.exists) {
+    console.log("Document data:", JSON.stringify(doc.data()));
+  } else {
+    console.log("No such document!");
+  }
+});
+```
+
 ### `collection.add()`
 If you want to add a document with an auto-generated ID, use `add` on a *collection*:
 
@@ -173,6 +188,4 @@ query
 ```
 
 ## Future work
-I'll soon add [`onSnapshot`](https://firebase.google.com/docs/firestore/query-data/listen) to support realtime updates.
-
 Need something else that's not supported yet? Please open an Issue or PR 😚

src/firebase.android.ts

@@ -2216,6 +2216,21 @@ 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({
+        onEvent: ((snapshot: com.google.firebase.firestore.DocumentSnapshot, exception) => {
+          if (exception !== null) {
+            return;
+          }
+          callback(new DocumentSnapshot(
+              snapshot ? snapshot.getId() : null,
+              snapshot.exists(),
+              snapshot ? () => firebase.toJsObject(snapshot.getData()) : null));
+        })
+      })
+  );
+};
+
 firebase.firestore.doc = (collectionPath: string, documentPath?: string): firestore.DocumentReference => {
   try {
 
@@ -2234,7 +2249,8 @@ firebase.firestore.doc = (collectionPath: string, documentPath?: string): firest
       set: (data: any, options?: firestore.SetOptions) => firebase.firestore.set(collectionPath, docRef.getId(), data, options),
       get: () => firebase.firestore.getDocument(collectionPath, docRef.getId()),
       update: (data: any) => firebase.firestore.update(collectionPath, docRef.getId(), data),
-      delete: () => firebase.firestore.delete(collectionPath, docRef.getId())
+      delete: () => firebase.firestore.delete(collectionPath, docRef.getId()),
+      onSnapshot: (callback: (doc: DocumentSnapshot) => void) => firebase.firestore.onSnapshot(docRef, callback)
     };
 
   } catch (ex) {
@@ -2255,14 +2271,15 @@ firebase.firestore.add = (collectionPath: string, document: any): Promise<firest
       const db = com.google.firebase.firestore.FirebaseFirestore.getInstance();
 
       const onSuccessListener = new com.google.android.gms.tasks.OnSuccessListener({
-        onSuccess: (documentReference: com.google.firebase.firestore.DocumentReference) => {
+        onSuccess: (docRef: com.google.firebase.firestore.DocumentReference) => {
           resolve({
-            id: documentReference.getId(),
+            id: docRef.getId(),
             collection: cp => firebase.firestore.collection(cp),
-            set: (data: any, options?: firestore.SetOptions) => firebase.firestore.set(collectionPath, documentReference.getId(), data, options),
-            get: () => firebase.firestore.getDocument(collectionPath, documentReference.getId()),
-            update: (data: any) => firebase.firestore.update(collectionPath, documentReference.getId(), data),
-            delete: () => firebase.firestore.delete(collectionPath, documentReference.getId())
+            set: (data: any, options?: firestore.SetOptions) => firebase.firestore.set(collectionPath, docRef.getId(), data, options),
+            get: () => firebase.firestore.getDocument(collectionPath, docRef.getId()),
+            update: (data: any) => firebase.firestore.update(collectionPath, docRef.getId(), data),
+            delete: () => firebase.firestore.delete(collectionPath, docRef.getId()),
+            onSnapshot: (callback: (doc: DocumentSnapshot) => void) => firebase.firestore.onSnapshot(docRef, callback)
           });
         }
       });

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,6 +2243,12 @@ firebase.firestore.collection = (collectionPath: string): firestore.CollectionRe
   }
 };
 
+firebase.firestore.onSnapshot = (docRef: FIRDocumentReference, callback: (doc: DocumentSnapshot) => void): void => {
+  docRef.addSnapshotListener((snapshot: FIRDocumentSnapshot, error: NSError) => {
+    callback(new DocumentSnapshot(snapshot ? snapshot.documentID : null, !!snapshot, snapshot ? () => firebase.toJsObject(snapshot.data()) : null));
+  })
+};
+
 firebase.firestore.doc = (collectionPath: string, documentPath?: string): firestore.DocumentReference => {
   try {
     if (typeof(FIRFirestore) === "undefined") {
@@ -2259,8 +2265,8 @@ firebase.firestore.doc = (collectionPath: string, documentPath?: string): firest
       set: (data: any, options?: firestore.SetOptions) => firebase.firestore.set(collectionPath, fIRDocumentReference.documentID, data, options),
       get: () => firebase.firestore.getDocument(collectionPath, fIRDocumentReference.documentID),
       update: (data: any) => firebase.firestore.update(collectionPath, fIRDocumentReference.documentID, data),
-      delete: () => firebase.firestore.delete(collectionPath, fIRDocumentReference.documentID)
-      // onSnapshot: (callback: (doc: DocumentSnapshot) => void) => firebase.firestore.onSnapshot(fIRDocumentReference, callback)
+      delete: () => firebase.firestore.delete(collectionPath, fIRDocumentReference.documentID),
+      onSnapshot: (callback: (doc: DocumentSnapshot) => void) => firebase.firestore.onSnapshot(fIRDocumentReference, callback)
     };
 
   } catch (ex) {
@@ -2269,12 +2275,6 @@ firebase.firestore.doc = (collectionPath: string, documentPath?: string): firest
   }
 };
 
-// firebase.firestore.onSnapshot = (docRef: FIRDocumentReference, callback: (doc: DocumentSnapshot) => void): void => {
-//   docRef.addSnapshotListener((snapshot: FIRDocumentSnapshot, error: NSError) => {
-//     callback(new DocumentSnapshot(snapshot ? snapshot.documentID : null, !!snapshot, snapshot ? firebase.toJsObject(snapshot.data()) : null));
-//   })
-// };
-
 firebase.firestore.add = (collectionPath: string, document: any): Promise<firestore.DocumentReference> => {
   return new Promise((resolve, reject) => {
     try {
@@ -2296,7 +2296,8 @@ firebase.firestore.add = (collectionPath: string, document: any): Promise<firest
                 set: (data: any, options?: firestore.SetOptions) => firebase.firestore.set(collectionPath, fIRDocumentReference.documentID, data, options),
                 get: () => firebase.firestore.getDocument(collectionPath, fIRDocumentReference.documentID),
                 update: (data: any) => firebase.firestore.update(collectionPath, fIRDocumentReference.documentID, data),
-                delete: () => firebase.firestore.delete(collectionPath, fIRDocumentReference.documentID)
+                delete: () => firebase.firestore.delete(collectionPath, fIRDocumentReference.documentID),
+                onSnapshot: (callback: (doc: DocumentSnapshot) => void) => firebase.firestore.onSnapshot(fIRDocumentReference, callback)
               });
             }
           });