在Gatsby中使用Airtable

我第一次发现 Airtable 是在 2018 年底，并立即被震撼了。 对于那些还不熟悉的人来说，Airtable 是一个基于云的协作数据库-电子表格混合应用程序。 它提供了灵活直观的 GUI、合理的价格（以及慷慨的免费套餐）以及带有出色自动生成文档的完整 REST API。 它还可以将 great 作为 Gatsby.js 的数据源，我很高兴向您展示如何操作！

在本课中，我们将使用 Airtable 创建一个非常基本的食品卡车菜单，然后（几乎）毫不费力地在 Gatsby 网站上显示它。 本文假设您已经设置了一个基本的 Gatsby.js 项目并准备好进行编辑。 如果您需要帮助来实现这一点，请尝试阅读 Your First Steps with Gatsby v2 帖子，然后返回此处。

空气桌设置

由于这更像是一篇以 Gatsby 为中心的文章，因此我们将仅介绍 Airtable 方面所涉及的一般步骤。 您会很快看到 Airtable 的 UI 非常 直观，并且自动生成的文档在需要时是一流的。 不过，我鼓励您花一个缓慢的下午来探索它提供的特性和功能……您会发现它是多么强大和灵活。 （我在几个个人和客户项目中使用它，而不仅仅是盖茨比！）

1. 创建一个 Airtable 帐户

我们需要做的第一件事是创建一个 Airtable 帐户，除非您已经拥有一个。 只需前往 Airtable 网站 并单击主导航中的“注册”链接。

注册（和/或登录）后，您将位于主仪表板。 最初为您提供了一个 workspace，其中包含演示 bases（又名 数据库。）每个基础可以包含任意数量的表，其功能类似于数据库表。

工作区和基地可以自由创建，所以如果你愿意，可以在这里创建一个新的空工作区。 （这是推荐的，但不是必需的。）

2. 创建新基地

对于我们的餐车菜单，我们需要创建一个新的基地。 让我们通过单击您选择的工作区中的灰色“添加基础”按钮来创建一个。

询问时选择“从头开始”选项，然后在弹出窗口中，我们将为新基础命名。 （如果需要，您还可以为图标指定颜色和字形。）我们将其命名为 ChompsFoodTruck。

💡专业提示：在Airtable中处理客户端项目时，总是为每个客户端创建一个新的工作区。 基地的所有权不能转让，但工作空间的所有权可以！

3. 重命名默认表

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

您会注意到顶部的选项卡标记为 Table 1，因此我们应该将其重命名为更合适的名称。 出于我们的目的，我们将其重命名为 Sandwiches。

由于我们在 Gatsby 中引用了这个表名，如果你的表名需要多个单词，我建议使用 camelCase 或 PascalCase 命名，例如 SoupsAndSalads

4. 编辑表格

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

• 第一步：删除默认的Notes和Attachments列。
• 第二步：新建两个列，Description（类型：单行文本）和Price（类型：货币）
• 第三步：添加几行样本数据！ 使用您最喜欢的三明治，并为每个三明治制定价格和说明。

完成这些步骤后，我们在 ChompsFoodTruck 基础中设置了一个简单的 Sandwiches 表。 我们可以轻松地复制它来制作其他菜单部分，例如配菜和/或饮料，但我们将在本课中保持简单。

5. Airtable API 凭证

我们在 Airtable 中只剩下一步：获取我们的 API 凭证。 调用 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 项目，我们将在其中几乎零努力地引入这些数据。

将数据带入 Gatsby

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

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

1. 安装

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

$ yarn add gatsby-source-airtable

2. 插件配置

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

盖茨比-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。 如果您查询 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 或更高版本，以及 React 16.8.0 或更高版本。

另请注意，我们在查询中使用了 filter 选项，以确保我们仅从 Sandwiches 表中检索数据。 （通过这种方式，如果我们有其他菜单部分，我们可以创建额外的查询！）

就是这样！ 我们现在可以在项目的任何地方使用我们新的 Menu 组件，就像任何其他组件一样。 （不过，我会推荐 对其进行样式设置 ！）

其他插件配置选项

我们已经在每个 tables 对象中使用了两个 required 选项，baseId 和 tableName，这些并不需要太多解释。 但是每个 tables 对象中还有一些其他有用的选项：

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

插件文档 更详细地介绍了这些选项， 插件的 Github 存储库 中提供了一些出色的使用示例，包括图像处理和降价处理示例。

结论

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

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

🥪 学习愉快，胃口好！