GatsbyでAirtableを使用する

私は2018年後半にAirtableを最初に発見し、すぐに感動しました。まだ慣れていない人のために、Airtableはクラウドベースのコラボレーティブデータベース-スプレッドシートハイブリッドアプリケーションです。柔軟で直感的なGUI、リーズナブルな価格（豊富な無料枠付き）、および優れた自動生成ドキュメントを備えた完全なRESTAPIを提供します。また、 great は、 Gatsby.js のデータソースとしても機能します。その方法をお見せできることをうれしく思います！

このレッスンでは、Airtableを使用して非常に基本的なフードトラックメニューを作成し、GatsbyのWebサイトに（ほぼ）簡単に表示します。この記事は、基本的なGatsby.jsプロジェクトがすでにセットアップされており、編集する準備ができていることを前提としています。その点に到達するためのヘルプが必要な場合は、 Gatsby v2 の最初のステップを実行してみて、後でここに戻ってください。

Airtableのセットアップ

これはギャツビーに焦点を当てた記事であるため、Airtable側に関連する一般的な手順のみを取り上げます。 AirtableのUIが非常に直感的であり、自動生成されたドキュメントが必要に応じて一流であることがすぐにわかります。ゆっくりとした午後を過ごして、それで利用できる機能を探索することをお勧めします…しかし、それがどれほど強力で柔軟であるかがわかるでしょう。（私はギャツビーだけでなく、いくつかの個人的なプロジェクトやクライアントのプロジェクトでそれを使用しています！）

1. Airtableアカウントを作成する

最初に行う必要があるのは、Airtableアカウントを作成することです（既に持っている場合を除く）。 Airtable Webサイトにアクセスし、メインナビゲーションの[サインアップ]リンクをクリックしてください。

サインアップ（および/またはサインイン）すると、メインダッシュボードが表示されます。最初に、デモbases（別名各ベースには、データベーステーブルのように機能する任意の数のテーブルを含めることができます。

ワークスペースとベースは自由に作成できるため、必要に応じて、ここで新しい空のワークスペースを自由に作成してください。（これは推奨されますが、必須ではありません。）

2. 新しい拠点を作成する

フードトラックメニューでは、新しい拠点を作成する必要があります。選択したワークスペース内の灰色の[ベースを追加]ボタンをクリックして作成しましょう。

求められたら「最初から始める」オプションを選択すると、ポップアップで新しいベースにタイトルが付けられます。（必要に応じて、アイコンに色とグリフを割り当てることもできます。）ChompsFoodTruckという名前を付けましょう。

💡プロのヒント： Airtableでクライアントプロジェクトを操作する場合、常にクライアントごとに新しいワークスペースを作成します。ベースの所有権を譲渡することはできませんが、ワークスペースの所有権を譲渡することはできます。

3. デフォルトのテーブルの名前を変更します

新しいベースが初期化されたら、そのアイコンをクリックして構成を開始します。

上部のタブにはTable 1というラベルが付いているので、より適切な名前に変更する必要があります。目的のために、名前をSandwichesに変更しましょう。

Gatsbyではこのテーブル名を参照しているため、テーブル名に複数の単語が必要な場合は、camelCaseまたはPascalCaseの名前を使用することをお勧めします。 SoupsAndSalads

4. テーブルを編集する

Sandwichesテーブル構造を編集して、ニーズに合わせてみましょう。

ステップ1：デフォルトのNotes列とAttachments列を削除します。
ステップ2： Description（タイプ：1行のテキスト）とPrice（タイプ：通貨）の2つの新しい列を作成します
ステップ3：サンプルデータを数行追加します。お気に入りのサンドイッチを使用して、それぞれの価格と説明を作成します。

これらの手順が邪魔にならないように、ChompsFoodTruckベースに単純なSandwichesテーブルを設定しました。これを簡単に複製して、サイドメニューや飲み物などの他のメニューセクションを作成できますが、このレッスンではシンプルに保ちます。

5. AirtableAPIクレデンシャル

Airtableには、APIクレデンシャルを取得するという1つのステップしか残っていません。 Airtable APIを呼び出すには、base IDとAPI Keyの両方が必要です。

ベースIDを取得するには、プロファイルリンク（右上）の横にあるHelpリンクをクリックし、ドロップダウンでAPI documentationをクリックします。これにより、ChompsFoodTruckベースの新しいドキュメントが新しいブラウザタブに自動生成されます。次に、Sandwichesメニューリンクをクリックすると、右側のサンプル（JavaScript）コードにベースIDが表示されます。

var base = new Airtable({apiKey: 'YOUR_API_KEY'})
                .base('appABCD12345'); // 👈 nice!

APIキーを取得するには、アカウントの概要ページにアクセスしてください。そこに、新しいキーを（再）生成するためのボタンが表示されます。

Airtableのセットアップが完了しました！（そして、その自動生成されたドキュメントはすっきりしていましたよね？！）Gatsbyプロジェクトに戻りましょう。ここでは、ほとんど労力をかけずにこのデータを取り込むことができます。

データをギャツビーに持ち込む

Airtableのドキュメントで提供されているコード例を使用してコードを記述できますが、操作は難しくありません。ただし、Gatsbyを使用しているため、常に公式サイトのプラグインセクションで役立つ情報を探すことをお勧めします。

幸いなことに、使用できる優れた gatsby-source-airtable プラグインがあります！このプラグインは、Airtableの複数のベースとテーブルからデータの行をフェッチでき、それらすべてを自動的にGraphQLノードに変換します。

1. インストール

最初に行う必要があるのは、gatsby-source-airtableプラグインをインストールすることです。開発サーバーが実行されている場合は停止し、コマンドプロンプトで停止します。

$ yarn add gatsby-source-airtable

2. プラグインの構成

すべてのGatsbyプラグインと同様に、gatsby-config.jsにプラグインを含め、いくつかの構成オプションを設定する必要があります。次に示すように、plugins配列に挿入してこれを実行しましょう。

gatsby-config.js

// ... siteMetadata above here
plugins: [
  {
    resolve: `gatsby-source-airtable`,
    options: {
      apiKey: `YOUR_AIRTABLE_API_KEY`,
      tables: [
        {
          baseId: `AIRTABLE_BASE_ID`,
          tableName: `Sandwiches`
        },
        // We can add other bases/tables here, too!
        //{
          //baseId: `AIRTABLE_BASE_ID`,
          //tableName: `Sides`
        //}
      ]
    }
  },
  // ... other plugins here
]

これは最小構成であり、サンドイッチデータを取得するために必要なのはこれだけです。開発サーバーを再起動し、ブラウザータブでGraphiQLを開いて、動作することを確認しましょう。（通常、このURLはhttp://localhost:8000/___graphqlです）

左側のExplorerメニューの上部にairtableとallAirtableの2つの新しいエントリが表示されます。 allAirtable.nodesのデータをクエリすると、すべてのサンドイッチデータが一覧表示されます。素晴らしい！ 🥪🥪🥪

3. データの表示

この時点で、Airtableベースがセットアップされ、Gatsbyが利用できるGraphQLノードのデータがすでに用意されています。あとは、クエリを実行してサイトに表示するだけです。ページレベルのクエリを使用することでそれを確実に行うことができますが、移植性を最大にするために、代わりに新しいMenuコンポーネントを作成し、その中で静的クエリを使用しましょう。

/src/components/Menu.jsに新しいファイルを作成し、次のコードを追加しましょう。

/src/components/Menu.js

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

const Menu = () => {
  const data = useStaticQuery(graphql`
    query MenuQuery {
      sandwiches: allAirtable(
        filter: { table: { eq: "Sandwiches" } }
        sort: { fields: data___Price, order: DESC }
      ) {
        nodes {
          data {
            Name
            Price
            Description
          }
          recordId
        }
      }
    }
  `);

  return (
    <div>
      <h3>Sandwiches</h3>

      <ul>
        {data.sandwiches.nodes.map((item, i) => (
          <li key={item.recordId}>
            <p>
              {item.data.Name}, ${item.data.Price}
            </p>
            <p>{item.data.Description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Menu;

ご覧のとおり、サンドイッチデータをマッピングし、<li>要素を返しています。 Gatsbyの新しい機能であるuseStaticQueryを利用していることに注意してください。これは、組み込みの React Hook を使用して、ビルド時に任意のコンポーネント内でGraphQLクエリを実行できるようにします。[ X189X]

重要：この機能には、Gatsbyバージョン2.1.0以降、およびReact16.8.0以降が必要です。

また、クエリでfilterオプションを使用して、Sandwichesテーブルからのみデータを取得していることにも注意してください。（このようにして、他のメニューセクションがある場合は、追加のクエリを作成できます！）

それでおしまい！これで、他のコンポーネントと同じように、プロジェクトのどこでも新しいMenuコンポーネントを使用できます。（ただし、スタイリングをお勧めします！）

その他のプラグイン構成オプション

各tablesオブジェクト内で2つの必須オプション、baseIdとtableNameをすでに使用しており、これらについてはあまり説明する必要はありません。ただし、各tablesオブジェクト内で使用できる他の便利なオプションがいくつかあります。

tableView：（文字列）このオプションを使用すると、Airtable内で設定したカスタムビューを使用できます。（例えば Airtable側で行った高度にカスタマイズされた行の順序付けやフィルタリング用。）
queryName：（文字列）同じ名前のテーブルを持つ2つのベースを使用している場合があります。このオプションを使用すると、テーブルの代替名を設定して、GraphQLクエリの操作を容易にすることができます。
マッピング：（オブジェクト）このオプションを使用すると、Gatsbyが変換する特定のデータ型に列をマップできます。マークダウンデータや画像の添付ファイルと一緒に使用するのに非常に貴重です！
tableLinks：（文字列の配列）Airtableは、他のテーブルのエントリにリンクする特別な列タイプを提供します。このオプションでは、Gatsbyが完全なデータを確実に取得できるように、これらの列名を定義します。（それ以外の場合は、リンクされた各アイテムのIDのみをフェッチします。）

プラグインのドキュメントでは、これらのオプションについて詳しく説明しています。プラグインのGithubリポジトリには、画像処理とマークダウン処理の両方の例を含む、いくつかの素晴らしい使用例があります。

結論

このメニューの例はやや基本的なものでしたが、AirtableとGatsby.jsが、特に gatsby-source-airtable プラグインの助けを借りて、素晴らしいデュオを作成していることをご存知だと思います。ただし、ここで停止しないでください。 Airtableの機能を自分でさらに調べて、いじくり回すことを強くお勧めします。考えられるアイデア：

他のメニューセクションで新しいテーブルを追加してみてください。 NachosおよびDrinks。
Infoテーブルを作成して、フードトラックのメールアドレス、電話番号、ロゴなどを保存してみてください。
メニュー項目に画像を追加してから、Gatsbyの素晴らしいImageコンポーネントを使用してそれらを表示してみてください。

🥪ハッピーラーニングとボナペティ！