[support] How to do I get a document’s sub-collection?

[chasebank]

Sorry for posting support here, but fwiw I tried the forums first, a few weeks ago.

My test concept is a task app where I have a collection of days, each is identified by a “date” property, and has a sub-collection of "tasks".

In Vuex I have a focusedDay that defaults to today and I have a getter focusedDayEntries that returns the matching document from firebase

const store = new Vuex.Store({
  state: {
    focusedDay: dayjs(),
    days: [],
  },
  
  getters: {
    focusedDayEntries: state => {
      let entries = state.days.find(day => day.date === state.focusedDay.format(`MM/DD/YYYY`))
      
      return entries
    },
  }

Then I need to get the 'tasks' sub collection, which doesn't seem to be available in the previous getter? But, I do have the document ID... so I tried referencing that in a second getter, to directly query for the sub-collection

    focusedDayTasks: (state, getters) => {
      return daysRef.doc(getters.focusedDayEntries.id).collection('tasks')
        .get()
        .then(snapshot => {
          let docs = snapshot.docs.map(doc => {
            return {
              id: doc.id,
              ...doc.data()
            }
          })
          console.log(docs)
          return docs
        })
    }

That seems to work, (I get the collection in console) but Vuex gives me an object Promise. What’s the best way to deal with that, or is there a better way to go about this?

Thanks!

[posva]

Hello, this project is not affiliated to Firebase so I cannot provide support for Firebase

You don't seem to be using vuefire but in vuefire which relies on the firebase SDK, you bind sub collections as collections. It's not done automatically because there is no information on the retrieved data

[chasebank]

@posva Sorry, I actually am using Vuefire. I was just trying to cut the code down to what I thought was the important bits. So sorry about that! I should have been more clear.

Vuex

var db = firebase.initializeApp({
  ...
}).firestore();

const daysRef = db.collection('days');

Vue.use(Vuex);
Vue.use(Vuexfire);

let { Store, mapState, mapGetters } = Vuex,
    { firestoreAction, vuexfireMutations } = Vuexfire

const store = new Vuex.Store({
  state: {
    focusedDay: dayjs(),
    days: [],
  },
  
  getters: {
    focusedDayEntries: state => {
      let entries = state.days.find(day => day.date === state.focusedDay.format(`MM/DD/YYYY`))
      
      return entries
    },

    focusedDayTasks: (state, getters) => {
      // return daysRef.doc(`6pXHLHSFHMJ7i4IAwtkI`).collection('tasks')
      return daysRef.doc(getters.focusedDayEntries.id).collection('tasks')
        .get()
        .then(snapshot => {
          let docs = snapshot.docs.map(doc => {
            return {
              id: doc.id,
              ...doc.data()
            }
          })
          console.log(docs)
          return docs
        })
    }
  }, 
  
  mutations: {
    ...vuexfireMutations,
  },
  
  actions: {
    init: firestoreAction((context) => {
      context.bindFirestoreRef('days', daysRef)
    }),
  }
});

App

new Vue({
  el: '#app',
  store,

  created() {
    this.$store.dispatch('init')
  },

  computed: {
    ...Vuex.mapState(['focusedDay']),
    ...Vuex.mapGetters(['focusedDayEntries','focusedDayTasks']),
  },
});

...you bind sub collections as collections. It's not done automatically because there is no information on the retrieved data

Right, that's why I was trying to do it in a getter. I'm binding the top-level "days" collection in the initial bindFirestoreRef firestoreAction, which gives me all the day documents, but at that point we don't know which day document to look at. So I handled that in a getter, filtering down to a particular day, but doesn't seem to include it's sub-collection.

But now that I've got a particular document, and it's ID, I tried to get that document's sub-collection in an additional getter.

But I'm thinking this should instead be handled as another binding action? This is looking similar to #153 but I still haven't figured out a solution