reactjs - How to make asynchronous calls inside of a firestore .forEach loop?

Question

Im using the firebase admin SDK server-side, and in one of my routes, im getting a collection, and then looping over each document in said collection...during each iteration, i use a property value to do a second get(). in the then() of this secondary get(), i again use data from the initial get to make final, tertiary get().

unfortunately the asynchronous nature of these nested calls seems to be creating undesirable outcomes.

heres the route function:

router.get('/list', authorization, (req, res) => {
  console.log('/reports/list entered...')

  admin
    .firestore()
    .collection('user-reports')
    .get()
    .then(querySnapshot => {
      const reports = []
      querySnapshot.forEach(snapshotDocument => {
        const closed = snapshotDocument.get('closed')
        console.log(`closed status: ${closed}`)

        if (closed === false) {
          const data = snapshotDocument.data()
          console.log(`condition passed, data: ${JSON.stringify(data)}`)
          // get # of reports made by sender
          admin
            .firestore()
            .collection('users')
            .doc(data.reportee)
            .get()
            .then(doc => {
              data['reportee'] = {
                reportActivity: doc.get('reportActivity')
              }
              console.log(`first then => data; ${JSON.stringify(data)}`)
              // get report history of reportee
             
              admin
                .firestore()
                .collection('users')
                .doc(data.reporter)
                .get()
                .then(doc => {
                  data['reporter'] = {
                    reportActivity: doc.get('reportActivity')
                  }
                  console.log(`second then, ${JSON.stringify(data)}`)
                  reports.push(data)
                })
                .catch(err => {
                  return res.json({ error: true, message: err })
                })
            })
            .catch(err => {
              return res.json({ error: true, message: err })
            })
        }
      })
      console.log(`pre-response: ${JSON.stringify(reports)}`)
      return res.json({ reports })
    })
    .catch(err => res.json({ error: true, message: err }))
})

what im logging is the "first condition passed", "pre-response: []", and "first then => data". by the time i ultimately return "reports" its empty. is there a more effective way to run firestore methods inside of foreach loops?

question from:https://stackoverflow.com/questions/66056095/how-to-make-asynchronous-calls-inside-of-a-firestore-foreach-loop

Answer 1

The solution almost always is to use Promise.all() to wait for a bunch of promises to resolve:

  rturn Promise.all(querySnapshot.map(snapshotDocument => {
    const closed = snapshotDocument.get('closed')
    console.log(`closed status: ${closed}`)

    if (closed === false) {
      const data = snapshotDocument.data()
      console.log(`condition passed, data: ${JSON.stringify(data)}`)
      // get # of reports made by sender
      return admin
        .firestore()
        .collection('users')
        .doc(data.reportee)
        .get()
        .then(doc => {
          data['reportee'] = {
            reportActivity: doc.get('reportActivity')
          }
          console.log(`first then => data; ${JSON.stringify(data)}`)
          // get report history of reportee
         
          return admin
            .firestore()
            .collection('users')
            .doc(data.reporter)
            .get()
            .then(doc => {
              data['reporter'] = {
                reportActivity: doc.get('reportActivity')
              }
              console.log(`second then, ${JSON.stringify(data)}`)
              return data;
            })
            .catch(err => {
              return res.json({ error: true, message: err })
            })
        })
        .catch(err => {
          return res.json({ error: true, message: err })
        })
    }
  })
  .then((reports) => {
    console.log(`pre-response: ${JSON.stringify(reports)}`)
    return res.json({ reports })
  })

There might be some syntax errors, but the basic changes:

1. Turn the documents into a list of promises/results with querySnapshot.map(snapshotDocument => {.
2. Use Promise.all to create a promise that resolves when all these results are done.
3. Returns results from as deep down as needed all the way up to the main code.

Note that nesting of promises the way you do here is unusual and an anti-pattern, so in recommend also looking into learning to chain promises (so that you end up with a single catch - instead of having them all over the place.