在 Next JS 页面中从多个 airtable 库循环答案

【问题标题】：Loop from multiple airtable bases in a Next JS page在 Next JS 页面中从多个 airtable 库循环
【发布时间】：2021-02-13 22:08:06
【问题描述】：

我认为这更像是一个一般的 async/await 循环问题，但我试图在 Airtable API 请求的范围内和 Next.js 的 getStaticProps 内完成它，所以我认为分享这一点很重要。

我想要做的是创建一个基本 ID 数组，例如 ["appBaseId01", "appBaseId02", "appBaseId03"] 并输出页面的内容。我可以使用 1 个基地，但无法获得多个基地。

下面是一个静态库的代码，如果有人可以帮助我了解我想如何循环这些代码。我的直觉说我需要唯一地等待每个，然后将它们弹出到一个数组中，但我不确定。

const records = await airtable
  .base("appBaseId01")("Case Overview Information")
  .select()
  .firstPage();

const details = records.map((detail) => {
  return {
    city: detail.get("City") || null,
    name: detail.get("Name") || null,
    state: detail.get("State") || null,
  };
});

return {
  props: {
    details,
  },
};

编辑我已经接近模拟它了，但还没有弄清楚如何循环初始请求。

这产生了我至少可以使用的数组数组，但它很笨拙且不可持续。

export async function getStaticProps() {
  const caseOneRecords = await setOverviewBase("appBaseId01")
    .select({})
    .firstPage();
  const caseTwoRecords = await setOverviewBase("appBaseId02")
    .select({})
    .firstPage();

  const cases = [];
  cases.push(minifyOverviewRecords(caseOneRecords));
  cases.push(minifyOverviewRecords(caseTwoRecords));

  return {
    props: {
      cases,
    },
  };
}

setOverviewBase是建立Airtable连接并设置表名的助手。

const setOverviewBase = (baseId) =>
  base.base(baseId)("Case Overview Information");

【问题讨论】：

标签： javascript loops async-await next.js airtable

【解决方案1】：

您可以映射基本 ID 数组并使用 Promise.all 等待。假设您有如下定义的getFirstPage 和minifyOverviewRecords，您可以执行以下操作：

const getFirstPage = (baseId) => 
    airtable
        .base(baseId)("Case Overview Information")
        .select({})
        .firstPage();

const minifyOverviewRecords = (records) => 
    records.map((detail) => {
        return {
            city: detail.get("City") || null,
            name: detail.get("Name") || null,
            state: detail.get("State") || null,
        };
    });

export async function getStaticProps() {
    const cases = await Promise.all(
        ["appBaseId01", "appBaseId02", "appBaseId03"].map(async (baseId) => {
            const firstPage = await getFirstPage(baseId);
            return minifyOverviewRecords(firstPage);
        })
    );

    return {
        props: {
            cases
        }
    };
}

【讨论】：