AirtableのデータをGatsbyJSへ引っ張りGraphQLスキーマとして処理できるようにする

Airtableを簡単にGraphQLで扱えたらなーと考えていたのですがGatsbyJSを使えば簡単にできました。

gatsby-source-airtable を使う

gatsby-source-airtable という便利なプラグインがあるのでそれをインスト。

yarn add -D gatsby-source-airtable gatsby-source-filesystem

gatsby-source-filesystem も入っていないと怒られるので入れておきます。

プラグイン詳細：https://www.gatsbyjs.com/plugins/gatsby-source-airtable/?=airtable

成果物

まずは成果物から。下は２つのシート（テーブル）を引っ張るオプション指定。

gatsby-config.js

plugins: [
// 省略
    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,  
        concurrency: 5, 
        tables: [
          {
            baseId: process.env.AIRTABLE_SHEET_ID, // テーブル専用ドキュメントページのURLの一部がID名となっている
            tableName: `TestData`, // 対象のシート名
            queryName: `TestGraph`, // 複数のシートを引っ張るかつキーが被るなら欲しい
            separateNodeType: true, 
          },
          {
            baseId: process.env.AIRTABLE_SHEET_ID,
            tableName: `HogeData`,
            queryName: `HogeGraph`,
            separateNodeType: true, 
          }
        ]
      }
    }
// 省略
]

上のようにプラグインのオプションを設定してあげるとこのようにAirtableのスキーマが生成されています。

最小構成

gatsby-config.js

plugins: [
// 省略
    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,  
        concurrency: 5, 
        tables: [
          {
            baseId: process.env.AIRTABLE_SHEET_ID, // テーブル専用ドキュメントページのURLの一部がID名となっている
            tableName: `TestData`, // 対象のシート名
          }
        ]
      }
    }
// 省略
]

これだけでも引っ張ってこれます。
allAirtable, airtable が GraphiQL上で生成されているので確認できるかと。できていない場合は設定ミスなどが考えられます。

          {
            baseId: process.env.AIRTABLE_SHEET_ID,
            tableName: `TestData`,
            queryName: `TestGraph`, // +追加
            separateNodeType: true,  // +追加
          },

ここでオプションを追加してみました。

queryNameはGraphQL上に edges/node/queryName というディレクトリで設定した名前を引っ張ってこれます。複数テーブルが混在する場合にqueryName別に引っ張ってこれるオプション。

separateNodeTypeは "airtableAll任意の名前(queryNameで指定した文字)" でスキーマをそれぞれ生成してくれます。
それぞれのテーブル名の間でデータを完全に分けて扱う場合は一緒に使うと便利です。