Within my Vuex store, there is an action designed to retrieve a list of uids for followed users from the current user's Firestore UserDataCollection document. The action then processes each uid to extract data that will be displayed on the UI. While this process functions correctly using .get(), I am attempting to transition it to .onSnapshot() in order to receive real-time updates.
I have encountered difficulties while trying to incorporate .onSnapshot(). There seems to be a lack of resources online or in the Firebase documentation regarding the implementation of this method after iterating through the array of uids.
After experimenting by removing promises and substituting .get() with .onSnapshot(), I have not achieved success.
If anyone has insight on the correct way to integrate the Firestore .onSnapshot() listener into the provided code snippet, please share your expertise.
getCircle({state, commit}) {
const circle = state.userProfile.circle
let promises = circle.map(u => userDataCollection.doc(u).get())
return Promise.all(promises)
.then(querySnapShot => {
let circleData = []
if (querySnapShot.empty) {
console.log("empty")
} else {
querySnapShot.forEach(doc => {
let item = doc.data()
circleData.push(item)
}
)
}
commit('setUserCircle', circleData)
})
},
Edit based on response
To address feedback, I have integrated .onSnapshot within the forEach loop as demonstrated below. Although Vue devtools display the correct number of data entries in my Vuex store, they are all undefined.
getCircle({state, commit}) {
const circle = state.userProfile.circle
let promises = circle.map(u => userDataCollection.doc(u).get())
return Promise.all(promises)
.then(querySnapShot => {
let circleData = []
if (querySnapShot.empty) {
console.log("empty")
} else {
querySnapShot.forEach(x => {
let itemId = x.data().uid
userDataCollection.doc(itemId)
.onSnapshot((doc) => {
let item = doc.data()
console.log(doc.data())
circleData.push(item)
})
}
)
}
commit('setUserCircle', circleData)
})