GatsbyでAirtableを使用する

投稿日: 2022-04-20 2022-10-10
タグ: GatsbyJS

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

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

Airtableのセットアップ

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

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

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

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

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

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

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

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

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

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

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

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

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

4. テーブルを編集する

編集しましょう Sandwiches 私たちのニーズに合うテーブル構造：

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

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

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)

上部に2つの新しいエントリが表示されます。 Explorer 左側のメニュー： airtable と allAirtable. でデータをクエリする場合 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 他のコンポーネントと同じように、プロジェクト内の任意の場所にあるコンポーネント。（ただし、スタイリングをお勧めします！）

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

それぞれの中で2つの必須オプションをすでに使用しています tables 物体、 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 それらを表示するコンポーネント。

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

getdocs

13036