Angular Firestore: Map DocumentReference attribute to object while fetching collection

Question

I have an entity:

export interface FriendRequest {
    sender: Profile;
    recipient: Profile;
    isAccepted: boolean;
    dateSend: Date;
    dateAccepted?: Date;
}

This is how these etities are saved in firestore:

The problem: I want to fetch all documents from friend-request collection and map recipient, sender from DocumentReference type to Profile object.

I tried this. This is my method which fetches all friend-request documents:

listenOnReceivedFriendRequests(profileId: string): Observable<Array<FriendRequest>> {
        const myProfileReference = this.$db.doc(`${PROFILE_COLLECTION}/${profileId}`);

        return this.$db.collection<FriendRequest>(
            FRIEND_REQUEST_COLLECTION,
            ref => ref.where('recipient', '==', myProfileReference.ref)
        )
            .valueChanges()
            .pipe(
                map((friendRequests) => {
                    return friendRequests.map((friendRequest) => {

                        // This is the place where it goes wrong I guess
                        return {
                            ...friendRequest,
                            sender: friendRequest.sender.get().then((senderDoc) => friendRequest.sender = senderDoc.data()),
                            recipient: friendRequest.recipient.get().then((senderDoc) => friendRequest.recipient = senderDoc.data())
                        };
                    });

                }),
                tap(result => console.log(result))
            );
    }

But it returns:

[
    {
        sender: ZoneAwarePromise,       // <-- Instead of Profile object
        recipient: ZoneAwarePromise,    // <-- Instead of Profile object
        isAccepted: ...,
        dateSend: ...,
        dateAccepted: ...,
    },
    {
        sender: ZoneAwarePromise,       // <-- Instead of Profile object
        recipient: ZoneAwarePromise,    // <-- Instead of Profile object
        isAccepted: ...,
        dateSend: ...,
        dateAccepted: ...,
    },
]

Instead of my required output:

[
    {
        sender: Profile,
        recipient: Profile,
        isAccepted: ...,
        dateSend: ...,
        dateAccepted: ...,
    },
    {
        sender: Profile,
        recipient: Profile,
        isAccepted: ...,
        dateSend: ...,
        dateAccepted: ...,
    },
]

I know I should wait until promises of sender and recipient finish, but I dont know how to do it to return my required output.

Amer · Accepted Answer · 2022-03-11 11:52:59Z

1

Instead of the map operator, you can handle it like the following:

Use one of the higher-order RxJS mapping operators, to map each one of the FriendRequest to an Observable.
Each Observable will fetch the related sender and recipient by combining the two Promise(s) to one Observable using forkJoin function (after converting each one of the Promise(s) to an Observable using from function)
Then map each Observable result again to a FriendRequest object.
Wrap the result array of Observable with forkJoin function, to return in the end Array<FriendRequest.

Try something like the following:

// import { forkJoin, from, Observable } from 'rxjs';
// import { map, mergeMap } from 'rxjs/operators';

listenOnReceivedFriendRequests(
  profileId: string
): Observable<Array<FriendRequest>> {
  const myProfileReference = this.$db.doc(
    `${PROFILE_COLLECTION}/${profileId}`
  );

  return this.$db
    .collection<FriendRequest>(FRIEND_REQUEST_COLLECTION, (ref) =>
      ref.where('recipient', '==', myProfileReference.ref)
    )
    .valueChanges()
    .pipe(
      mergeMap((friendRequests: Array<FriendRequest>) =>
        // forkJoin returns Observable<Array<FriendRequest>>
        forkJoin(
          // map each item to an Observable<FriendRequest>, after resolving the related profiles.
          friendRequests.map((friendRequest) =>
            forkJoin({
              senderDoc: from(friendRequest.sender.get()),
              recipientDoc: from(friendRequest.recipient.get()),
            }).pipe(
              map(({ senderDoc, recipientDoc }) => ({
                ...friendRequest,
                sender: senderDoc.data(),
                recipient: recipientDoc.data(),
              }))
            )
          )
        )
      )
    );
}

edited Mar 11, 2022 at 11:52

answered Mar 11, 2022 at 9:49

Amer

6,7442 gold badges11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

prusama Over a year ago

Unfortunatelly this is returning Observable<Observable<FriendRequest>> instead of Observable<Array<FriendRequest>>.

Amer Over a year ago

Sorry, my bad! I just forgot to wrap the result array with forkJoin. I updated my answer, please check it now.

Collectives™ on Stack Overflow

Angular Firestore: Map DocumentReference attribute to object while fetching collection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related