Not going to lie this did stump me for about an hour. Then I looked at how I was rendering my list from Firestore:



this.groups$ = this.getGroupsAsObservable();

// groups$ to indicate is an Observable getGroupsAsObservable(): Observable<Group[]> {

return this.afs.collection<Group>("groups").valueChanges();

}

Notice the valueChanges() part — that is the secret sauce that allows your app to livestream data from firestore

Now what was happening was that when clicking on the item, behind the scenes it would check to see if that item belongs to a group and if not would add the item to the group as well as small piece of data which listed the associated items for that group (an object) in Firestore.

This meant that the group’s document changed and would trigger a re-render in our application!

This is where I realised that I would need my groups list to be purely static.

This was actually kind of tricky, nowhere in the docs does it specifically mention ‘static’ or ‘read once’ data.

First thing I needed to data was to return a Snapshot of the data. There was a little bit in the docs about this:

getUsersGroupsOnce(userId): Promise<QuerySnapshot> {

// return a static snapshot of the users groups return this.afs.collection("groups", ref =>

ref.where(`users.${userId}`, "==", true)

)

.ref.get(); // this is the static part }

Sweet, so now I have a static reference — I need to build out an array for this, following on from the docs I did this:

this.fb.getUsersGroupsOnce(user.uid).then(q => {

q.forEach(doc => {

console.log(doc.data())

});

});

Ok so now I have my data I just need to push to an array right? I tried this:

q.forEach(doc => {

this.groups.push(doc.data());

});

But typescript was complaining, so I kind of forced it like so:

q.forEach(doc => {

this.groups.push(doc.data() as Group);

});

And voila, I now have a static — or as I like to call it ‘read once’ list. Now I know that 99/100 live data streams are awesome but it’s handy to know how to get static data every now and then.

Is there a better way to do this? Feel free to leave a comment below.