What's the best way to get data from collections nested in documents in Firestore?

Question

I'm going through the Firestore docs and guide. My code samples below use AngularFire2.

Let's consider a "chats" collection similar to the examples provided here: https://firebase.google.com/docs/firestore/manage-data/structure-data

They recommend this kind of structure but I don't see where they discuss getting all the data efficiently.

Each chat document has properties, a collection of members, and a collection of messages:

• chatsCollection
  • chatDocument
    • [insert chat data fields here]
    • membersCollection
      • memberDocument
        • [insert member data fields here]
    • messagesCollection
      • messageDocument
        • [insert message data fields here]

Firestore queries are shallow, which could be great sometimes. My understanding is that there's no baked-in way to query deep and get nested collections. So, what are the best practices and most hassle-free ways to do this?

At the moment I'm retrieving and mapping snapshots to objects with IDs and adding the nested collection data onto the parent document data with additional queries and mappings, and I'm not happy with my approach, and could do it quicker even with denormalized Firebase structures.

This code example is just mapping on the members, adding back in messages is a whole other story...

getChatsFromFirestore() {
    this.chats = this.dataSvc.getChatsFromFirestore().snapshotChanges()
      .map(chatSnaps => {
        return chatSnaps.map(chat => {
          const chatData = chat.payload.doc.data();
          const chatId = chat.payload.doc.id;
          return this.dataSvc.getMembersForChat(chatId)
            .snapshotChanges()
            .map(memberSnaps => {
              return memberSnaps.map(member => {
                const data = member.payload.doc.data();
                const id = member.payload.doc.id;
                return { id, ...data }
              });
            })
            .map(members => {
              return { chatId, ...chatData, members: members };
            });
        })
      })
      .flatMap(chats => Observable.combineLatest(chats));
  }

And from the service:

getChatsFromFirestore() {
  return this.fsd.collection<any>('chats');
}
getChatFromFirestoreById(id: string) {
  return this.fsd.doc(`chats/${id}`);
}
getMembersForChat(chatId) {
  return this.getChatFromFirestoreById(chatId).collection('members');
}

Answer 1

The approach you posted seems like it would work and for a large chat application you probably do not want to track every single event that happens in every chatroom as that could be a lot of data. Instead it would probably be better to subscribe to only what is needed and handle periodic updates with cloud functions and cloud messaging.

By using a helper function observeCollection as well as small code restructuring it would cleanup the service and create observables for each chatroom that would be inactive until they are subscribed to.

class Service {
    // db is plan firestore / no angularfire
    db: firebase.firestore.Firestore;

    loadChatrooms() {
        const chatsRef = this.db.collection('chats');
        return observeCollection(chatsRef)
            .pipe(
                map(chats => {
                    return chats.map(chat => {
                        return {
                            chat,
                            members$: this.observeCollection(chat.ref.collection('members')),
                            messages$: this.observeCollection(chat.ref.collection('messages')),
                        };
                    })
                }),
            );
    }

    // Takes a reference and returns an array of documents
    // with the id and reference
    private observeCollection(ref) {
        return Observable.create((observer) => {
            const unsubscribeFn = ref.onSnapshot(
                snapshot => {
                    observer.next(snapshot.docs.map(doc => {
                        const data = doc.data();
                        return { 
                            ...doc.data(),
                            id: doc.id,
                            ref: doc.ref
                        };
                    }));
                },
                error => observer.error(error),
            );

            return unsubscribeFn;
        });
    }
}

In the application you could then only observe the currently selected chatrooms members and messages, which would save data. Since this post is tagged with Angular async pipes would help with switching by automatically handly subscriptisons.

In your component:

this.currentChat$ = combineLatest(
  service.loadChatrooms(),
  currentlySelectedRoomId
).pipe(
    map(([chats, selectedRoomId]) => {
        return chats.first(chat => chat.id === selectedRoomId)
    })
);

In your template:

<div *ngIf="currentChat$ as currentChat">
    {{ currentChat.name }}

    <div *ngIf="currentChat.members$ as members">
        <div *ngIf="let member of members">
          {{ member.name }}
        </div> 
    </div> 

    <div *ngIf="currentChat.messages$ as messages">
        <div *ngIf="let message of messages">
          {{ message.content }}
        </div> 
    </div> 
</div>