CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestorevuefire
Claus
Claus

Reputation: 5722

Firestore query with where returning undefined snapshot (Vue.js / Firestore / Vuefire)

I'm currently using Firestore/Vue.js with Vuefire support.

The Firestore DB has just one collection with a couple of users inside:

  • Users
    • 001
      • name: Jack
      • uid: {Firebase auth ID}
      • org_id: 123
    • 002
      • name: Frank
      • uid {Firebase auth ID}
      • org_id: 456

in the Vue component, I try to query the DB to get the first user using the auth ID (which is currently stored in a Vuex Store)

<script>
import { db } from "../main.js";    
export default {
  data() {
    return {
      items: [] // to be used later
    };
  },
  created() {
    this.getServices();
  },
  methods: {
    getServices() {
      console.log(this.$store.state.user.uid);
      db.collection("users")
        //.doc("001")
        .where("uid", "==", this.$store.state.user.uid)
        .get()
        .then((snapshot) => {
          console.log(snapshot);
          if (snapshot != null && snapshot.data != null) {
            const user = snapshot.data();
            // do something with document
            let org_id = user["org_id"];
            console.log("org id:" + org_id);
          } else {
            console.log("No data returned!");
          }
        });
    },
  },
};
</script>

the code always returns an empty snapshot. Checks I have performed:

I'm a total beginner but it looks to me the where clause is not working.

Upvotes: 1

Views: 1077

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83093

Since, with db.collection("users").where("uid", "==", this.$store.state.user.uid) you define a Query, the snapshot Object is actually a QuerySnapshot and not a DocumentSnapshot.

So snapshot.data != null is always false because a QuerySnapshot does not have such a property. It is also the case for snapshot.data() != null => it is always false because a QuerySnapshot does not have such a method.

You should either loop over the QuerySnapshot with the forEach() method or use map on the docs property, as shown in the Vuefire example (see "retrieve a collection"):

  db.collection("users")
    .where("uid", "==", this.$store.state.user.uid)
    .get()
    .then((snapshot) => {
      const documents = snapshot.docs.map(doc => doc.data())
      // do something with documents
   })

Upvotes: 5

Related Questions