我第一次发现Airtable)是在2018年末，很快就被惊呆了。对于那些还不熟悉它的人来说，Airtable是一个基于云的协作数据库和电子表格混合应用程序。它提供了灵活直观的图形用户界面、合理的价格(以及慷慨的免费层)，以及带有出色的自动生成文档的完整REST API。它还可以很棒作为Gatsby.js，和我很兴奋地向您展示如何！

在本课中，我们将使用Airtable创建一个非常基本的食品卡车菜单，然后在Gatsby网站中（几乎)毫不费力地显示它。本文假设您已经设置了一个基本的Gatsby.js项目，并且准备好进行编辑。如果你需要帮助来达到这一点，尝试通过你的第一步与盖茨比v2后，然后返回这里。

气垫台设置

由于这篇文章更多的是以盖茨比为中心，我们将只介绍Airtable方面的一般步骤。你很快就会发现Airtable的UI非常直观，自动生成的文档在需要时也是一流的。我鼓励你花一个下午的时间来探索它的特性和功能，尽管...你会发现它是多么强大和灵活。（我在几个个人和客户项目中使用它，而不仅仅是盖茨比！)

1.创建Airtable帐号

我们需要做的第一件事是创建一个Airtable帐户，除非您已经有一个。只需访问Airtable网站并在主导航中点击‘注册’链接即可。

一旦您注册（和/或登录)，您将在主仪表板。最初，您将获得一个)每个库可以包含任意数量的表，其功能类似于数据库表。

工作区和基地是免费创建的，所以如果您愿意，可以在这里创建一个新的空工作区。(建议这样做，但不是必需的。)

2.新建基地

对于我们的美食车菜单，我们需要创建一个新的基础。让我们通过在您选择的工作区内单击灰色的Add a base按钮来创建一个。

当出现问题时，选择)让我们把我们的名字命名为‘ChompsFoodTruck`。

<$>[注意]Airtable专业提示： 在💡中处理客户端项目时，请始终为每个客户端创建一个新的工作区。基地的所有权不能转让，但工作区的所有权可以转让！<$>

3.重命名默认表

初始化我们的新库后，单击它的图标开始配置它。

您会注意到，顶部的选项卡标记为`表1‘，因此我们应该将其重命名为更合适的名称。为了方便起见，我们把它重命名为‘Sandwiches’。

由于我们在Gatsby中引用了这个表名，我建议使用camelCase或[PascalCase]（wiki.c2.com/? PascalCase)命名，如果您的表名需要多个单词，例如SoupsAndSalads

4.编辑表

让我们编辑Sandwiches表结构以满足我们的需要：

第一步：删除默认的Notes和Attachments列。
第二步：新建两列：Descrition(类型：单行文本)和Price(类型：币种)
第三步：添加几行样本数据！使用你最喜欢的三明治，并为每种三明治编出一个价格和描述。

除去这些步骤，我们在ChompsFoodTruck库中设置了一个简单的‘Sandwiches’表。我们可以很容易地复制它来制作其他菜单部分，如配菜和/或饮料，但我们将在本课中保持简单。

5. Airtable API证书

在Airtable中，我们只剩下一个步骤：获取我们的API凭证。调用Airtable API需要base ID和API Key。

要获取基本ID，请点击您的个人资料链接(右上角)旁边的帮助链接，然后在下拉列表中单击API文档。这将在新的浏览器选项卡中自动为我们的ChompsFoodTruck基础生成新的文档。然后点击Sandwiches菜单链接，在右侧的示例(JavaScript)代码中，您将看到列出的基本ID：

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

要获取您的接口密钥，只需前往您的帐号概览页面)。在那里，您将看到一个用于(重新)生成新密钥的按钮。

我们的AirTable设置完成了！(自动生成的文档很整洁，对吧？！)让我们回到我们的Gatsby项目，在那里我们将几乎不费力气地引入这些数据。

将数据带入Gatsby

我们可以使用Airtable文档中提供的代码示例编写一些代码，并且使用起来并不难。然而，由于我们使用的是Gatsby，所以在他们官方网站上的插件部分中寻找一些有用的东西总是一个好主意。

幸运的是，我们可以使用一个优秀的gatsby-source-airtable插件！这个插件可以从Airtable中的多个库和表中获取数据行，并自动将它们全部转换为GraphQL节点。

1.安装

我们需要做的第一件事是安装`gatsby-source-airtable‘插件。如果我们的开发服务器正在运行，让我们停止它，然后在命令提示符下：

1$ yarn add gatsby-source-airtable

2.插件配置

与所有Gatsby插件一样，我们还需要将其包含在gatsby-config.js中，并设置一些配置选项。现在让我们将其插入到plugins数组中，如下所示：

 1[label gatsby-config.js]
 2// ... siteMetadata above here
 3plugins: [
 4  {
 5    resolve: `gatsby-source-airtable`,
 6    options: {
 7      apiKey: `YOUR_AIRTABLE_API_KEY`,
 8      tables: [
 9        {
10          baseId: `AIRTABLE_BASE_ID`,
11          tableName: `Sandwiches`
12        },
13        // We can add other bases/tables here, too!
14        //{
15          //baseId: `AIRTABLE_BASE_ID`,
16          //tableName: `Sides`
17        //}
18      ]
19    }
20  },
21  // ... other plugins here
22]

这是最低配置，也是我们检索三明治数据所需的全部。让我们通过重新启动开发服务器，然后在浏览器选项卡中打开GraphiQL来确保它正常工作。(此URL通常为：http://localhost:8000/___graphql)

您应该会在左侧的Explorer菜单顶部看到两个新条目：airable和allAirable。如果您查询allAirable.nodes中的数据，您应该会看到列出了您的所有三明治数据。太棒了！🥪🥪🥪

3.展示我们的数据

至此，我们已经设置了Airtable基础，并且已经将GraphQL节点中的数据提供给Gatsby。剩下的就是在我们的网站上查询和显示它了！当然，我们可以使用页面级查询来实现这一点，但为了最大限度地提高可移植性，让我们创建一个新的Menu组件并在其中使用静态查询。

让我们在/src/Components/Menu.js中创建一个新文件，并添加以下代码：

 1[label /src/components/Menu.js]
 2import React from 'react';
 3import { useStaticQuery, graphql } from 'gatsby';
 4
 5const Menu = () => {
 6  const data = useStaticQuery(graphql`
 7    query MenuQuery {
 8      sandwiches: allAirtable(
 9        filter: { table: { eq: "Sandwiches" } }
10        sort: { fields: data___Price, order: DESC }
11      ) {
12        nodes {
13          data {
14            Name
15            Price
16            Description
17          }
18          recordId
19        }
20      }
21    }
22  `);
23
24  return (
25    <div>
26      <h3>Sandwiches</h3>
27
28      <ul>
29        {data.sandwiches.nodes.map((item, i) => (
30          <li key={item.recordId}>
31            <p>
32              {item.data.Name}, ${item.data.Price}
33            </p>
34            <p>{item.data.Description}</p>
35          </li>
36        ))}
37      </ul>
38    </div>
39  );
40};
41
42export default Menu;

正如你所看到的，我们只是映射三明治数据并返回<li>元素。请注意，我们正在使用Gatsby的一个新功能，useStaticQuery，它使用内置的React Hook来允许在构建时在任何组件内进行GraphQL查询。

<$>[警告]重要提示：此功能需要Gatsby 2.1.0版或更高版本，Reaction 16.8.0或更高版本。<$>

还要注意，我们在查询中使用了一个filter选项，以确保我们只从Sandwiches表中检索数据。(以这种方式，如果我们有其他菜单部分，我们可以创建其他查询！)

就这样!我们现在可以在项目中的任何位置使用新的`Menu‘组件，就像使用任何其他组件一样。(我推荐Style it，！)

其他插件配置选项

我们已经在每个Tables对象中使用了两个必选选项：base Id和ableName，这两个选项其实不需要太多解释。但是，在每个Tables对象中还有其他一些有用的选项：

表视图：（String)此选项允许您使用在Airtable中设置的自定义视图。(e.g.用于高度自定义的行排序和/或您在Airtable端完成的过滤。
queryName：（String)有时你可能会使用两个库，它们的表具有相同的名称。使用此选项，您可以为表设置备用名称，以使GraphQL查询更容易使用。
mapping：（Object)此选项允许您将列映射到特定的数据类型，以便Gatsby进行转换。这是无价的使用与markdown数据或图像附件！
tableLinks：（字符串数组)Airtable提供了一种特殊的列类型，可以链接到其他表的条目。通过这个选项，我们定义了这些列名，以确保Gatsby检索完整的数据。（否则，它将只获取每个链接项的ID。

The plugin documentation详细介绍了这些选项，plugin's Github repo提供了一些很棒的使用示例，包括图像处理和markdown处理示例。

结论

这个菜单示例有点基础，但希望您已经看到Airtable和Gatsby.js是令人难以置信的二人组--特别是在gatsby-source-airtable插件的帮助下。不过，不要止步于此！我绝对鼓励您自己进一步探索和修补Airtable的功能。可能的想法：

尝试添加带有其他菜单部分的新表，如Nachos、Drinks。
尝试创建一个Info表来存储美食车的电子邮件、电话号码、标识等。
尝试为您的菜单项添加图像，然后使用Gatsby出色的Image组件来显示它们。

🥪快乐学习，一路顺风！

在 Gatsby 中使用 Airtable