Firestore Add Sub-Collection Example

[bryanpearson]

Well, I've been at it a week or too, and I'm just too green to figure out how to reference a sub-collection from within a template (if that's even possible), or what the best way to get this data would be.

What Im attempting to accomplish is loop through a collection of tickets, in which each ticket has a sub-collection of comments. I'd want to display all comments, for each ticket in the list.

Heirarchy goes: DB > Tickets Collection > ticketdocs > Comments Collection > commentdocs

app.js:

const List = {
  template: require('./list.html'),
  // template: '<div>Ticket List!</div>',
  data: function () {
    return {
      tickets: [],
    }
  },
  firestore() {
    return {
      tickets:     db.collection('tickets'),
    }
  },
}

list.html.js:

<div v-for="ticket in tickets">
  <p>{{ ticket.comments }}
</div>

Displaying/iterating over {{ ticket }} works great and binds up fine, but accessing the sub-collection is where I'm stumped.

I'm sorry for such a basic request with poor descriptions/examples, but with the new Firestore sub-collections, Im sure some folks would love some examples of how to get access to sub-collections in the various ways available.

Thank you!

[posva]

I don't think is such a basic request, it's definitely something worth looking at not easy to add in a declarative way.
Unfortunately, after some research, I couldn't find a way of reading the collections from a document (in the web sdk) (https://cloud.google.com/firestore/docs/query-data/get-data).
Maybe I can add some API to allow the user bind collections on the document:

this.$bind('collection', collectionRef, { onDocumentBind })
function onDocumentBind(doc, bind) {
	// bind is bound to doc
	bind('comments', db.collection(`collection/${doc.id}/comments`), { onDocumentBind: () => {} })
}

this would allow me to automatically unbind the collection when document is unbound. But I still need to check if it's feasible 🙂

[bryanpearson]

Just saw this, maybe you havent see it yet and it'll help. Thanks 👍

https://cloud.google.com/nodejs/docs/reference/firestore/0.8.x/DocumentReference#getCollections

[posva]

Unfortunately, that only exists on the node.js library 😞

[stevenmanton]

@posva I think that even the example you gave using the constructed string path (collection/${doc.id}/comments) would be a useful example for binding to a sub-collection. I ran into this issue with Vuexfire and your solution worked nicely

[posva]

I'm glad it helped! I will add it to the docs once the whole thing is available, that will be easier to understand and to contextualise in docs

[itsjop]

Howdy! I've just recently found this framework, and I couldn't find the aforementioned example for subcollection fetching in the docs. I'm building a music player application with the following structure:
users (col) > user (autogenerated, doc) > songs (col) > song (autogenerated, doc)
I'm trying to fetch the songs published by an artist, but I'm not quite sure how to pull them, even statically, let alone bound and dynamically. Since the user names are auto-generated, it becomes difficult to find and bind their sub-collections correctly. Is this something that's been addressed, and is there a better way to access this data from within the firestore(){} block? Thanks!

Edit: If this isn't quite implemented yet, I guess I can move the songs to their own top-level collection and instead add an array of reference objects to the user documents .

[SumNeuron]

@posva is there any update on this? or should I just have two bound firestore ref, 1 for the main collection (e.g. collection('articles').where(...)) and another for the subcollections (collection('articles').where(...).collection('history'))

[posva]

@SumNeuron yes, you still need to do that

[SumNeuron]

can you please provide a clean example? I am struggling