Skip to main content

Gatsby 串接 Airtable

一、Airtable 要處理的​

  1. 創建 Table
  2. 找到 API_KEY ＆ BASE_ID
    1. 從頁面右上角的 help > API documentation > 勾選頁面右上角的 show api key

二、程式碼要處理的​

  1. 在gatsby安裝airtable plugin (https://www.gatsbyjs.com/plugins/gatsby-source-airtable/)
yarn add gatsby-source-airtable
  1. 新增環境變數
// In .env.development

GATSBY_AIRTABLE_API_KEY=Your Key 
GATSBY_AIRTABLE_BASE_ID=Your Base ID
  1. gatsby-config.js 設定
// In gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-airtable`,
    options: {
      apiKey: `YOUR_AIRTABLE_KEY`, // may instead specify via env, see below
      concurrency: 5, // default 這邊如果沒有需要用到mapping的話可以不用額外設定，主要是用來防止同時發送過多請求
      tables: [
        // 範例
        {
          baseId: process.env.GATSBY_AIRTABLE_BASE_ID,
          tableName: `Fruit`,
          tableView: `Apple`,   // optional
          queryName: `Apple`,   // optional，有填的話會有自己的queryName，以這邊為例會變成 AllAirtableApple （需搭配下方 separateNodeType 才能獨立成一個query)
          mapping: { Profile: `fileNode` },  //optional，如果資料表中有某欄位需要用到一些特殊格式(markdown, gatsbyImageData)的話這邊會需要設定 eg.{ 圖片欄位名稱: `fileNode` }
          tableLinks: [`Category`, `Size`],  //optional，如果需要撈取關聯表單的資料
          separateNodeType: true,   // boolean, default is false ，如果改ture的話會把這個獨立一個query
          separateMapType: false, // boolean, default is false, 搭配上方mapping欄位，如果同一張表有多個特殊欄位的話需要把這裡設定true
        },
      ]
    }
  }
];