Tips for achieving asynchronous behavior using nested iterations in Firebase's forEach function

Question

Tips for achieving asynchronous behavior using nested iterations in Firebase's forEach function

I have a collection of items, with each item linked to multiple transaction records.

- items
   - itemA
      - transactionA
      - transactionB
   - itemB
      - transactionC
      - transactionD

In my express application, I need to create an endpoint that retrieves all items along with their associated transactions as shown above.

The challenge lies in synchronizing Firebase with async-await. I attempted to utilize Promise.all() but encountered difficulties with nested operations:

let items = await db
      .collection(collections.items)
      .where("active", "==", true)
      .get()
      .then(async (snapshot) => {
        let itemList = [];
        snapshot.forEach(async (doc) => {
          let transactions = await doc.ref
            .collection("transactions")
            .get()
            .then(async (transactionSnapshot) => {
              let promises = [];
              transactionSnapshot.forEach(async (transactionDoc) => {
                promises.push(transactionDoc.data());
              });
              return Promise.all(promises);
            });
          functions.logger.log("transactions", transactions);
          itemList.push({ data: doc, transactions });
        });
        return Promise.all(itemList);
      });
    functions.logger.log("items", items);
    res.status(BASIC_HTTP_STATUS_CODES.success).json({ items });

Upon reviewing the logs, I noticed that some transactions are logged after the items, and the returned object is empty.

The code works fine when querying only the items without their transactions.

How can I ensure that the program waits for all item documents to finish attaching their respective transaction details before proceeding?

javascript firebase express google-cloud-firestore async-await

Answer 1

Answer №1

The issue lies specifically within this line of code:

Promise.all(prods);

In this case, the variable prods is structured as a

({ data: QueryDocumentSnapshot, prices: DocumentData[] })[]

, instead of an array of Promises. This discrepancy results in varying outcomes depending on how Promise.all() is utilized.

To address this, it is necessary for prods to be defined as a

Promise<{ data: QueryDocumentSnapshot, prices: DocumentData[] }>[]

.

When attempting to parallelize your code in such a manner, I would suggest avoiding the use of async/await as it can introduce unexpected behaviors and is often unnecessary.

let products = await db
  .collection(collections.products)
  .where("active", "==", true)
  .get()
  .then((activeProductsQSnap) => { // QSnap = QuerySnapshot
    const fetchProductAndPricesPromises = [];
    
    activeProductsQSnap.forEach((productDoc) => {
    
      const thisProductPromise = productDoc.ref
        .collection("prices")
        .get()
        .then((productPricesQSnap) => {
          const prices = [];
          productPricesQSnap.forEach((priceDoc) => {
            prices.push(priceDoc.data());
          });
          
          functions.logger.log("prices for product #" + productDoc.id, prices);
          
          return { data: productDoc.data(), prices };
        });
      
      fetchProductAndPricesPromises.push(thisProductPromise);
    });
    
    return Promise.all(fetchProductAndPricesPromises);
  });

functions.logger.log("products", products);
res.status(BASIC_HTTP_STATUS_CODES.success).json({ products });

Below is the revised version of the same code utilizing the async/await syntax:

async function getPricesForProductDoc(productDoc) {
  const productPricesQSnap = await productDoc.ref
    .collection("prices")
    .get();
  
  const prices = [];
  productPricesQSnap.forEach((priceDoc) => {
    prices.push(priceDoc.data());
  });
  
  functions.logger.log("prices for product #" + productDoc.id, prices);
  
  return { data: productDoc.data(), prices };
}

const activeProductsQSnap = await db
  .collection(collections.products)
  .where("active", "==", true)
  .get();

const promises = [];

activeProductsQSnap.forEach(
  (productDoc) => promises.push(getPricesForProductDoc(productDoc))
);

const products = await Promise.all(promises);

functions.logger.log("products", products);
res.status(BASIC_HTTP_STATUS_CODES.success).json({ products });

Answer 2

The issue lies specifically within this line of code:

Promise.all(prods);

In this case, the variable prods is structured as a

({ data: QueryDocumentSnapshot, prices: DocumentData[] })[]

, instead of an array of Promises. This discrepancy results in varying outcomes depending on how Promise.all() is utilized.

To address this, it is necessary for prods to be defined as a

Promise<{ data: QueryDocumentSnapshot, prices: DocumentData[] }>[]

.

When attempting to parallelize your code in such a manner, I would suggest avoiding the use of async/await as it can introduce unexpected behaviors and is often unnecessary.

let products = await db
  .collection(collections.products)
  .where("active", "==", true)
  .get()
  .then((activeProductsQSnap) => { // QSnap = QuerySnapshot
    const fetchProductAndPricesPromises = [];
    
    activeProductsQSnap.forEach((productDoc) => {
    
      const thisProductPromise = productDoc.ref
        .collection("prices")
        .get()
        .then((productPricesQSnap) => {
          const prices = [];
          productPricesQSnap.forEach((priceDoc) => {
            prices.push(priceDoc.data());
          });
          
          functions.logger.log("prices for product #" + productDoc.id, prices);
          
          return { data: productDoc.data(), prices };
        });
      
      fetchProductAndPricesPromises.push(thisProductPromise);
    });
    
    return Promise.all(fetchProductAndPricesPromises);
  });

functions.logger.log("products", products);
res.status(BASIC_HTTP_STATUS_CODES.success).json({ products });

Below is the revised version of the same code utilizing the async/await syntax:

async function getPricesForProductDoc(productDoc) {
  const productPricesQSnap = await productDoc.ref
    .collection("prices")
    .get();
  
  const prices = [];
  productPricesQSnap.forEach((priceDoc) => {
    prices.push(priceDoc.data());
  });
  
  functions.logger.log("prices for product #" + productDoc.id, prices);
  
  return { data: productDoc.data(), prices };
}

const activeProductsQSnap = await db
  .collection(collections.products)
  .where("active", "==", true)
  .get();

const promises = [];

activeProductsQSnap.forEach(
  (productDoc) => promises.push(getPricesForProductDoc(productDoc))
);

const products = await Promise.all(promises);

functions.logger.log("products", products);
res.status(BASIC_HTTP_STATUS_CODES.success).json({ products });

Tips for achieving asynchronous behavior using nested iterations in Firebase's forEach function

Answer №1

Similar questions

Retrieving the return value from an AJAX call in C# using asynchronous methods

Having trouble persisting data with indexedDB

`Implementing Typescript code with Relay (Importing with System.js)`

What is the best way to place a popover above a selected text section?

Transferring a basic PHP date variable to JavaScript

Navigating between components using AngularJS and ExpressJS

How to break down JSON into individual elements using JavaScript

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

Tips for closing a MUI Modal that was opened from a parent component within a child component in React

Determine the hour difference between two provided dates by utilizing the date-fns library

Integrating AngularJS code into dynamically generated HTML using JavaScript

Is the handlebars template to be rendered if the field is equal to the variable stored in req

Kindly utilize the POST method for your request

Is there a more productive approach to creating numerous React components?

Create a focal point by placing an image in the center of a frame

AngularJS Event Handler Fails to Trigger

What steps can be taken to obtain the fully computed HTML rather than the source HTML?

Tips for maintaining a healthy balance of tasks in libuv during IO operations

Iterating through elements to set the width of a container

Angular 1.5's Ui-Router 1.0.0-beta.3 is missing a template configuration for 'resolve@root'