how to return Observables from firebase firebase function

Question

I have running my application perfectly with

"@angular/fire": "^6.1.5",
"firebase": "^8.6.3",

and it was like

Service.ts

getUserEventSummary(userId) {
this.firestore.collection(`/user/${userId}/event_summary`).doc('current').snapshotChanges().pipe(
      map(changes => changes.payload.data())
    );
}

Component.ts

this.service.getUserEventSummary(this.userId).subscribe((res: any) => {
    this.values = res;
}

And such code is all over the application. Now I have moved to the latest version of firebase that is

"firebase": "^9.0.1", "@angular/fire": "^7.0.4",

And new changes are

service.ts

getUserEventSummary(userId) {
 return getDoc(doc(db, `user/${userId}/event_summary`, 'current'));
}

And component.ts

this.service.getUserEventSummary(this.userId).subscribe((docSnap: any) => {
   if (docSnap.exists()) {
        this.values = docSnap.data();;
    }
 }

I need a method that returns the same behavior i.e. observables that this code returning promise.

Moreover, snapshot changes are hard to implement on the service files. Please help me with a better approach than changing the code of components.

Octavian Mărculescu Octavian Mărculescu · Accepted Answer · 2021-09-09T17:14:04

If you filter and map inside the service method, then you should be able to leave the component code untouched. You should go for something like this in your service:

import { /* ... */, from } from 'rxjs';

getUserEventSummary(userId) {
  return from(getDoc(doc(db, `user/${userId}/event_summary`, 'current'))).pipe(
    filter((docSnap) => docSnap.exists()),
    map(docSnap => docSnap.data())
  );
}

You can use from to create an observable from that Promise object.

how to return Observables from firebase firebase function

1 Answers