Navigating through nested Firebase realtime DB queries using await/async techniques

Question

Navigating through nested Firebase realtime DB queries using await/async techniques

In the process of developing a Firebase function (Gist), I encountered a challenge that I'm seeking assistance for.

The function starts by querying a realtime database reference (events) using this code:
```
 await admin.database().ref('/events_geo').once('value').then(snapshots => {
```
It then proceeds to iterate through all the events with this snippet:
```
 snapshots.forEach(snapshot => {
```
Next, it filters events based on a specific criterion for further processing.

Subsequently, multiple queries are made to the realtime database to retrieve details related to each event like so:

 await database().ref("/ratings").orderByChild('fk_event').equalTo(snapshot.key).once('value').then(snapshots => {

Data is prepared for SendGrid and the processing is finalized.

Although the data processing functions correctly, I am facing an issue where the outer 'await' command mentioned in point 1 does not wait for the inner awaits (the queries to the realtime DB) to complete. Consequently, when it's time to call SendGrid, the data is empty initially, only arriving a moment later. Reviewing the Firebase function logs below can provide more clarity:

 10:54:12.642 AM Function execution started

 10:54:13.945 AM There are no emails to be sent in afterEventHostMailGoodRating

 10:54:14.048 AM There are no emails to be sent in afterEventHostMailBadRating

 10:54:14.052 AM Function execution took 1412 ms, finished with status: 'ok'

 10:54:14.148 AM <p style="margin: 1em 0px;">Super hyggelig aften :)</p><p style="margin: 1em 0px;">super oplevelse, ... long string generated

Gist displaying the concerned function

I suspect my confusion lies within the asynchronous nature of my async/await statements, particularly due to nested awaits. Although breaking down the code into smaller units might help, it could lead to complex integration of numerous awaits, making it less readable.

Therefore, I have two questions at hand. Is there a solution for this issue in the existing code structure? Additionally, what would be the most effective approach to handle such scenarios involving additional processing post retrieval from the Realtime DB?

Regards, Simon

typescript firebase firebase-realtime-database async-await

Answer 1

Answer №1

One potential issue you may encounter is the utilization of async within a forEach loop in this section:

  Object.keys(event.participants).forEach(async (value: any) => {

It's crucial to note that forEach loops do not support asynchronous functions. To address this, consider mapping the data to a regular array and implementing a for loop instead. This way, you can utilize await appropriately.

Answer 2

One potential issue you may encounter is the utilization of async within a forEach loop in this section:

  Object.keys(event.participants).forEach(async (value: any) => {

It's crucial to note that forEach loops do not support asynchronous functions. To address this, consider mapping the data to a regular array and implementing a for loop instead. This way, you can utilize await appropriately.

Answer 3

Answer №2

After receiving valuable guidance from Tarik Huber's response, I decided to refactor the function and simplify it significantly.

The key points that helped me were:

Avoid using forEach and instead opt for iterating with for(const event of events), which is better suited for asynchronous calls.
Divide the function into smaller, modular parts. One part now handles fetching, filtering, and storing data in an array, while the second part iterates through the array and makes additional async calls.

This approach resulted in code that was easier to read and debug. The original function attempted to perform both tasks simultaneously using forEach, leading to issues with unresolved async calls.

An overview of the updated function is provided below, highlighting only the crucial sections.

async function afterEventHostMail() {
 // Initialize variables
  events = [];

  await admin.database().ref('/events_geo').once('value').then(snapshots => {
    snapshots.forEach(snapshot => {
      var event = snapshot.val();
      var eventKey = snapshot.key;
      
      // Implement some filtering
      const mergedObj = { ...event, ...{ key: eventKey } };
      events.push(mergedObj)
    });
  });

  for (const event of events) {
    // Perform numerous await calls here
  }

  // Proceed with the remaining functionality within the function
}

Answer 4

After receiving valuable guidance from Tarik Huber's response, I decided to refactor the function and simplify it significantly.

The key points that helped me were:

Avoid using forEach and instead opt for iterating with for(const event of events), which is better suited for asynchronous calls.
Divide the function into smaller, modular parts. One part now handles fetching, filtering, and storing data in an array, while the second part iterates through the array and makes additional async calls.

This approach resulted in code that was easier to read and debug. The original function attempted to perform both tasks simultaneously using forEach, leading to issues with unresolved async calls.

An overview of the updated function is provided below, highlighting only the crucial sections.

async function afterEventHostMail() {
 // Initialize variables
  events = [];

  await admin.database().ref('/events_geo').once('value').then(snapshots => {
    snapshots.forEach(snapshot => {
      var event = snapshot.val();
      var eventKey = snapshot.key;
      
      // Implement some filtering
      const mergedObj = { ...event, ...{ key: eventKey } };
      events.push(mergedObj)
    });
  });

  for (const event of events) {
    // Perform numerous await calls here
  }

  // Proceed with the remaining functionality within the function
}

Navigating through nested Firebase realtime DB queries using await/async techniques

Answer №1

Answer №2

Similar questions

What steps can be taken to resolve the Angular error stating that the property 'bankCode' is not found on type 'User' while attempting to bind it to ng model?

Ways to display all utilized typescript types within a project

Links in Next.js fail to function properly after deploying on Firebase

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

What is the reason for the removal of HTML tags in the environment when converting Angular dependencies from es2015 to esm2015 during

Converting retrieved data into table cells through mapping

How can I pass DOCUMENT in Angular?

Can anyone guide me on troubleshooting the firebase import error in order to resolve it? The error message I am encountering is "Module not found: Error:

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

Trouble arises in TypeScript when defining a class - SyntaxError crops up

How can eslint be used to enforce a particular named export?

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

My function doesn't seem to be cooperating with async/await

What is the resolution if I need to utilize a property that is untyped?

Learn how to effortlessly move a file into a drag-and-drop area on a web page with Playwright

Utilizing constants within if statements in JavaScript/TypeScript

getItemForm does not make a second promise call

How to retrieve the HTTPClient value in Angular?

Enhancing data validation and converting strings to dates with Nest.js - DTO approach

Can you explain the distinction between Reflect.getMetadata and Reflect.getOwnMetadata?