Firestore, vue, vuex, vuexfire: How to make getter actually get data from store?

Question

If I want to query documents from a Firestore with Vuexfire. I can successfully do this by doing the following:

I can bind the docs using this action:

bindEntries: firestoreAction(({ bindFirestoreRef }) => {
  var query = db
    .collection("entries")
    .orderBy("date");
  return bindFirestoreRef("entries", query);
}),

that I dispatch in my App.vue like this:

created() {
  this.$store.dispatch("bindEntries");
},

To actually get the data in my component, I use this getter

entries(state) {
  return state.entries;
},

that I call in a computed property:

computed: {
  entries() {
    return this.$store.getters.entries;
  },
}

So far, so good.

Now I want to adjust my code to not query all the data from the Firestore, but filtered for the currently logged in user. I adapted the firestoreAction to

bindEntries: firestoreAction(({ bindFirestoreRef }, uid) => {
  var query = db
    .collection("entries")
    .where("editors", "array-contains", uid)
    .orderBy("date");
  return bindFirestoreRef("entries", query);
}),

and moved the dispatching part to the point where the user successfully logged in. It is not in the created hook of the App.vue. I moved it, because the user id is unknown in the created hook. I call it like so:

auth
  .signInWithEmailAndPassword(this.email, this.password)
  .then((data) => {
    this.$store.dispatch("bindEntries", data.user.uid);
  }

I'm not geeting any errors, but nothing is displayed. What am I doing wrong?

I uploaded the whole code, in case I forgot to mention something: https://github.com/juliangermek/haushaltsbuch

Thanks a lot!

---

Edit: I just found out that in another component (in Stats.vue > MonthOverview.vue > OverallSums.vue) everything looks fine!

The only difference I can see is that I redirect directly to Entries.vue (the page I'm having problems with) and switch to the stats afterwards as a user. I just switched this in my router and my Entries.vue looks just fine! Now it is the stats that throws an error due to missing data. How could this be explained?

Answer 1

With your query, which combines a where clause with array-contains and an orderBy clause you need to create an index.

More details in the doc:

• https://firebase.google.com/docs/firestore/query-data/order-limit-data
• https://firebase.google.com/docs/firestore/query-data/queries#in_not-in_and_array-contains-any
• https://firebase.google.com/docs/firestore/query-data/indexing