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

How can I access a file uploaded using dxFileUploader?

Deleting data from Firebase in Angular can be easily done using the AngularFire library. By

Using Angular 2, NodeJS, and Mongoose to send data from an Angular 2 frontend to a NodeJS backend REST API. However, encountering an issue where the Node API logs show that the OPTIONS

I am unfamiliar with this scenario but I can utilize Axios, async/await, and TypeScript to navigate it

Angular - Ensuring correct rendering of a subcomponent with input parameter on the first update

Compiling TypeScript files with an incorrect path when importing, appending "index" at the end of the @angular/material library

Encountering: error TS1128 - Expecting declaration or statement in a ReactJS and TypeScript application

ESLint not functioning properly on TypeScript (.ts and .tsx) files within Visual Studio Code

Develop a directive for transforming data

Demonstrate JSON data using ngFor loop in Angular

Angular v15 Footer Component Table

How to add an item to an array in JavaScript without specifying a key

How can I use the target type (and maybe even the property type) as a type parameter within a decorator?

Upon deployment, Angular encounters issues with routing to lazy loaded modules

Arrow functions do not function properly with Typescript decorators

Utilizing TypeScript with Svelte Components

Setting a value in Ionic 3 HTML template

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

Unable to utilize React Icons component as an object value in typescript

Error code 2532 occurs when trying to access an object using square brackets in TypeScript