Vuex/Firestore retrieve user data from another collection

Question

I am building a system where users can follow a course. The users can follow a course and this then adds both courseID and userID into a members table. I am failing to then simply list the users information that are following this club (firstName, lastName etc.)

I manage to get the data and console log it but when I commit to my state, the state only shows one of the objects rather than an array which I can loop through.

I have the following collections:

Users: -> auto-id -> { firstName, LastName etc. }
Courses: -> auto-id -> { courseName, courseLocation etc. }
Members: -> auto-id -> { courseID, userID etc. }

Here is my action within my store:

state: {
    members: []
},

mutations: {
    SET_MEMBER_DETAIL(state, val) {
      state.members = val
    },
},

actions: {
    retreiveMembers ({commit}, payload) {
        db.collection('members')
          .where('courseID', '==', payload.courseID)
          .get()
          .then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {
                const documents = doc.data()

                db.collection('users')
                  .doc(documents.userID)
                  .get()
                  .then((res) => {
                    console.log(res.data())
                    commit('SET_MEMBER_DETAIL', res.data())
                  })
            })
          })
    },
}

Here is the result in my console:

{admin: false, firstName: "Sam", lastName: "Staron"}

{admin: false, firstName: "Paul", lastName: "Staron"}

{admin: "Admin", firstName: "John", lastName: "Doe"}

When I view the state via vue chrome add on, I only receive the last array instead of all 3 and as an object.

members:    Object
admin:      "Admin"
firstName:  "John"
lastName:   "Doe"

I would like to commit the console logged results into my state as an array which i can then loop through on the front end.

Unless there is a more practical way to retrieve relational data with Firestore.

Thanking anyone in advance, Sam

Every time you call `commit('SET_MEMBER_DETAIL', res.data())`, you're replacing the previous value of `SET_MEMBER_DETAIL`. You'll want to implement `SET_MEMBER_DETAIL` as an array, and then push each new member to it. See for example the call to `push` in the answer here: https://stackoverflow.com/questions/41830731/push-to-vuex-store-array-not-working-in-vuejs — Frank van Puffelen, Sep 10 '19 at 13:32
I did try push, however whenever I loaded another course profile, this held the values of the previous course and duplicated the users to it. I have 3 test users joined to this club, when leaving and returning to that page, I had 6 :/ — Sam Staron, Sep 10 '19 at 13:42
So you'll want to commit an empty array to the list whenever you re-run the query. Something like `commit('SET_MEMBER_DETAIL', [])` just before `querySnapshot.forEach`. — Frank van Puffelen, Sep 10 '19 at 13:49
Ok thank you for the feedback, I’ll give that a go. Is there a best/better practice you could recommend for obtaining user related data from different collections? I will likely need to repeat this in order to retrieve related posts/comments etc as I continue to build the app. Thanks :) — Sam Staron, Sep 10 '19 at 13:52
You'll need to either perform additional document loads to get the additional data, or duplicate the data into each member document. — Frank van Puffelen, Sep 10 '19 at 14:10

score 0 · Answer 1 · answered Sep 10 '19 at 17:35

In your current code, every time you call commit('SET_MEMBER_DETAIL', res.data()), you're replacing the previous value of SET_MEMBER_DETAIL. You'll want to implement SET_MEMBER_DETAIL as an array, and then push each new member to it. See for example the call to push in the answer here: Push to vuex store array not working in VueJS.

If retreiveMembers may be called multiple times, you'll want to commit an empty array to the list whenever you re-run the query. Something like commit('SET_MEMBER_DETAIL', []) just before querySnapshot.forEach in your current code.

Vuex/Firestore retrieve user data from another collection

1 Answers1