讓 Airtable 的 Web API 聽話，照順序列出資料

只要透過 Airtable 的介面，讓行銷、PM 編輯資料，就可以在網站上呈現資料的情境，這流程在團隊工作時很常見。通常，沒有程式開發背景的同事，也可以 1 天搞懂 Airtable。

只是，API 回傳的資料，似乎沒有肉眼看得出來的規則。文件上也沒有特別提到怎麼排序，得要進行非常複雜、難以理解的流程，讓順序跟介面上一致，光是寫好步驟也花很多時間。

這篇只會提到使用 Airtable Web API 遇到的問題，不會從頭開始說怎麼用，去看文件就已經相當完整。

"airtable": "^0.11.6"

• 網站：https://airtable.com
• 文件：https://airtable.com/developers/web/api/introduction

接下來的內容

• 遇到的問題
• ❌ 很笨的解決方法
• ✅ 很簡單的解決方法

遇到的問題

快速瀏覽過 Airtable 的 Web API 文件，很快就可以將 Airtable API 接上 Next.js 或 Astro 等 framework。然而，資料並沒有跟著資料表上的順序顯示：

{
  "records": [
    {
      "id": "rec6Gyln6EB3kvQyl",
      "createdTime": "2024-08-04T08:27:24.000Z",
      "fields": { "title": "第一項", "order": 1 }
    },
    {
      "id": "recQ8ULBm3nP3vMzT",
      "createdTime": "2024-08-04T08:27:24.000Z",
      "fields": { "title": "第三項", "order": 3 }
    },
    {
      "id": "recTXYe5qOyMKkgZK",
      "createdTime": "2024-08-04T08:27:24.000Z",
      "fields": { "title": "第二項", "order": 2 }
    },
    {
      "id": "recaNRk3tQFDhG08V",
      "createdTime": "2024-08-04T09:30:30.000Z",
      "fields": { "title": "第四項", "order": 4 }
    },
    {
      "id": "recvKVMfeFiaoYEv9",
      "createdTime": "2024-08-04T09:30:33.000Z",
      "fields": { "title": "第五項", "order": 5 }
    }
  ]
}

❌ 很笨的解決方法

在表格裡新增 Column，這裡取名為 order，格式是 Autonumber。

取得資料時，加上 sort 選項：

await base('tbl**************')
  .select({
    fields: [
      'title'
    ],
    pageSize: 16,
    filterByFormula: 'active = 1',
    sort: [{ field: 'order', direction: 'asc' }]
  })
  .catch((error) => {
    console.error(error);
    return false;
  });

然而，每次要改變排序時，就要再新增一欄 Autonumber 格式，然後把先前的 order 欄位刪掉，非常不 DRY。不熟悉 Airtable 的時候，操作錯誤的機率也會大幅提高。

這也是反覆 Google 後，在官方社群裡提到的方法。

✅ 很簡單的解決方法

使用 Airtable Web API，在 select() 裡加上 view: 'Grid view' 就可以了：

await base('tbl**************')
  .select({
    fields: [
      'title'
    ],
    pageSize: 16,
    filterByFormula: 'active = 1',
    view: 'Grid view'
  })
  .catch((error) => {
    console.error(error);
    return false;
  });

結語

因為 Airtable 的資料，並不是以版本控制的概念來呈現，直接改資料有相當高的風險。希望能夠減少冗長流程，避開操作錯誤。