Dynamically bind a list of firebase collections with vuexfire

Question

I have a list of firebase documents in a vuex store, and that list gets dynamically updated. I would like to bind the documents in that list dynamically with vuexfire.

state: {
   docsToBind: [], // dynamic: this gets updated so I cannot hardcode a few bindings
   documents: {} // bind documents here?
},
actions:{
   bindOne: firestoreAction(({ state, bindFirestoreRef }) => {
      return bindFirestoreRef(...)
      }),
   bindAll({state}){
   for(const doc of state.docsToBind){
       // bind the document to a dictionary item?
   },
   unbindTeam({state}){
      // whenever a doc is removed from the listunbind it
   }   
}

Is this the right way to do it?

Note: I cannot bind the entire collection, because the client doesn't have access to all the documents. So I need to bind the subset in docsToBind

Answer 1

With Vuexfire, when you bind, you should only provide the key of the state where to bind, and the Source (Collection, Query or Document).

So if you want to bind to a subset of a collection, you need to bind to a Query and as such you need to know the Query definition (i.e. the definition of the subset).

If you want to bind, in "one action", a set of documents (which definition is dynamic, e.g. a set of docs identified through a variable list of ids) you may need to use another approach.

Either you can define a Query, for example, by having a field in the document with the ID and use the in operator to combine up to 10 equality (==) clauses on the same field with a logical OR.

Or you will need to create your own home-made binding, by for example using Promise.all() in a Vuex action.