How to iterate through multiple Airtable database IDs in Next.js getStaticProps

Other Questions Airtable
1

I’m working on a Next.js project and need help with async loops when fetching data from multiple Airtable databases. Right now I can pull data from one database successfully, but I want to loop through several database IDs and combine all the results.

I have an array of database identifiers like ["db123", "db456", "db789"] and want to fetch records from each one. Here’s my current working code for a single database:

const data = await airtable
  .base("db123")("Company Info")
  .select()
  .firstPage();

const companies = data.map((company) => {
  return {
    location: company.get("Location") || null,
    title: company.get("Title") || null,
    region: company.get("Region") || null,
  };
});

return {
  props: {
    companies,
  },
};

I tried manually creating separate requests but this approach doesn’t scale well:

export async function getStaticProps() {
  const firstBatch = await getCompanyData("db123")
    .select({})
    .firstPage();
  const secondBatch = await getCompanyData("db456")
    .select({})
    .firstPage();

  const allData = [];
  allData.push(processCompanyRecords(firstBatch));
  allData.push(processCompanyRecords(secondBatch));

  return {
    props: {
      allData,
    },
  };
}

The getCompanyData helper function connects to Airtable:

const getCompanyData = (dbId) =>
  base.base(dbId)("Company Info");

How can I properly loop through multiple database IDs and await each request before combining the results?

2

You can use Promise.all() to handle multiple async requests efficiently. Here’s how I solved a similar issue in my project:

export async function getStaticProps() {
  const databaseIds = ["db123", "db456", "db789"];
  
  const promises = databaseIds.map(async (dbId) => {
    const data = await airtable
      .base(dbId)("Company Info")
      .select()
      .firstPage();
    
    return data.map((company) => ({
      location: company.get("Location") || null,
      title: company.get("Title") || null,
      region: company.get("Region") || null,
    }));
  });
  
  const results = await Promise.all(promises);
  const companies = results.flat();
  
  return {
    props: {
      companies,
    },
  };
}

This approach runs all requests concurrently rather than sequentially, which significantly improves performance. The flat() method combines all arrays into a single array of company objects. I’ve been using this pattern for months without issues, and it handles errors gracefully if one database fails.