从 Next JS 页面中的多个 airtable 基地循环

Question

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

我想做的是像["appBaseId01", "appBaseId02", "appBaseId03"]一样创建一个基本ID数组，然后输出一个页面的内容。我有 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 连接并设置 table 名称的助手。

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

Answer 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
        }
    };
}

从 Next JS 页面中的多个 airtable 基地循环

Loop from multiple airtable bases in a Next JS page

javascript

loops

async-await

next.js

airtable