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サイトにアクセスし、メインナビゲーションの[サインアップ]リンクをクリックしてください。
サインアップ(および/またはサインイン)すると、メインダッシュボードが表示されます。 最初にシングルが提供されます 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
ここに示すように、配列:
// ... 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
、次のコードを追加します。
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 を使用して、ビルド時に任意のコンポーネント
重要:この機能には、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
それらを表示するコンポーネント。
🥪ハッピーラーニングとボナペティ!