Read Data from Firebase and save it into an Array - React

Question

i just can't figure out why i can't save my loaded data into an array.

i`m trying to push the data to the array once the data is fully loaded (Within then())

Any idea why it's not working?

Many thanks :)

useEffect(() => {

  fetchData = async () => {
  
  let tempArray = [];
  
  await firebase.firestore().collection('users').get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      firebase.firestore().collection('users').doc(doc.id).collection('posts').get().then((snapShot) => {
        snapShot.forEach((newDoc) => {
          tempArray.push({
            id: doc.id,
            data: newDoc.data()
          })
        })
      })
    })
  })
  
  console.log(tempArray) // Output: Array []
  
  }

 fetchData();

}, [])

LeadDreamer · Accepted Answer · 2021-07-10 23:14:41Z

.forEach IS NOT ASYNCHRONOUS - it WILL NOT wait for your inner-loop .get()s. You need to do something like:

  await firebase.firestore().collection('users').get().then((querySnapshot) => {
    Promise.all(querySnapshot.map((doc) => {
      firebase.firestore().collection('users').doc(doc.id).collection('posts').get().then((snapShot) => {
        snapShot.forEach((newDoc) => {
          tempArray.push({
            id: doc.id,
            data: newDoc.data()
          })
        })
      })
    })
    )
  })

In addition - this seems pretty dang inefficient - since you're fetching ALL your users, and ALL their posts, you could just use a collectionGroup is a SINGLE round-trip, then sort by .parent if you need sorting (you don't show any such need in the example presented)

await firebase.firestore()..collectionGroup('posts').get().then((querySnapShot) => {
      querySnapShot.forEach((newDoc) => {
        tempArray.push({
          id: doc.id,
          data: newDoc.data()
        })
      })
    })

Finally, you're mixing async/await with .then() syntax, which is generally not recommended:

// .get() is asynchronous
const querySnapShot = await firebase.firestore()..collectionGroup('posts').get();
// push() is synchronous, so need for await
querySnapShot.forEach((newDoc) => {
  tempArray.push({
    id: doc.id,
    data: newDoc.data()
  })
})

Collectives™ on Stack Overflow

Read Data from Firebase and save it into an Array - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related