Observable not working with async await function in Doc reader

Question

I am trying to put await on Observable like below:

    documentXFDFRetriever: async () => {
            const rows = await this.annotationsService.getAnnotations(this.userService.getCurrentDocumentId()).toPromise();
            console.log(rows);
            return rows.map(row => row.annotationNode);
          }

My Service function:

    public getAnnotations(docId): Observable<Annotation[]> {
        const userId = this.userService.getCurrentUserId();
        const annotationsRef = collection(this.firestore, `annotations/${docId}/${userId}`);
        return collectionData(annotationsRef) as Observable<Annotation[]>;
    }

But it can't return rows on documentXFDFRetriever function.

I m sure something is missing here on the return observable.

Can anyone help me with this issue?

Answer 1

Ironically, this exact confusion is why RxJS has deprecated toPromise. If you're using a newer version of RxJS, I would recommend firstValueFrom or lastValueFrom.

If you're using an older version of RxJS, you can use take(1) or first() to ensure the observable completes and resolves the promise.

documentXFDFRetriever: () => this.annotationsService.getAnnotations(
  this.userService.getCurrentDocumentId()
).pipe(
  map(rows => rows.map(row => row.annotationNode)),
  first() // Complete Observable after first emission
).toPromise();