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

It is not clear to me what you exactly want to achieve. 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). — Renaud Tarnec, Sep 01 '20 at 12:45
Thx for the answer. What would be a query binding to several documents in a collection then? That is what I am at loss to find in the docs. — Malo Marrec, Sep 01 '20 at 12:56
How do you want to query this collection? Based on a specific field? — Renaud Tarnec, Sep 01 '20 at 12:58
I want to bind to a list of documents, so I have a list of document ids. myCollection.doc(id1), ..., myCollection.doc(idn) — Malo Marrec, Sep 01 '20 at 13:00
And this list of ids is variable? Because normally you would have to bind doc by doc (if you are not able to write a [query](https://firebase.google.com/docs/firestore/query-data/queries) that return this set of docs). I guess you want to dynamically bind this list of docs... — Renaud Tarnec, Sep 01 '20 at 13:13
Indeed, it is variable. But the way this is going, I guess the answer will be "change your firestore database structure" :) — Malo Marrec, Sep 01 '20 at 13:17
There are other possible approaches, like 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`. Can you limit the number of docs to 10? — Renaud Tarnec, Sep 01 '20 at 13:32
No, but I guess I will have to work around that. You should turn that into an answer :) — Malo Marrec, Sep 01 '20 at 13:36

score 2 · Accepted Answer · answered Sep 01 '20 at 13:48

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.

Dynamically bind a list of firebase collections with vuexfire

1 Answers1