Using Firestore in Vue, .where doesn't return any results - but they exist

Question

I'm pretty new to firestore. I've got this query that shows chat messages and updates when new ones appear. I only want the current user (school) to see messages from their own school. If I don't contain the .where clause - it shows all the messages, but nothing shows up if I use it (even though they exist)

Here is a link to an image of my firestore page (since I can't embed it):

I call the method on mount:

mounted() {
  //fetches the messages
  this.fetchMessages(this.$route.params.id);
},

Then the method is:

fetchMessages(schoolsIdentification) {
  db.collection('chat')
    .where("user.schoolId", "array-contains", schoolsIdentification)
    .orderBy('date')
    .onSnapshot((querySnapshot) => {
      let allMessages = [];
      querySnapshot.forEach(doc => {
        allMessages.push(doc.data())
      })
      console.log("the all messages array length is:", allMessages.length)
      this.messages = allMessages;
    })
}

Am I doing something wrong here?

Answer 1

Your filter expects that user.schoolId is an array:

.where("user.schoolId", "array-contains", schoolsIdentification)

But it's not an array - it's just a string. If you want to filter on a string field that could contain several different possible values, you should use an "in" query instead, as shown in the documentation .

Use the in operator to combine up to 10 equality ( == ) clauses on the same field with a logical OR. An in query returns documents where the given field matches any of the comparison values.

.where("user.schoolId", "in", schoolsIdentification)