如何使用 Slash GraphQL 后端构建 Pokédex React 应用程序

前端开发者希望与 Web 应用后端的交互尽可能轻松便捷。从数据库请求数据或更新数据库中存储的记录应该简单易行，以便前端开发者能够专注于他们最擅长的领域：创建美观直观的用户界面。

GraphQL让数据库操作变得简单。前端开发人员无需依赖后端开发人员创建特定的 API 端点，在查询数据库时返回预先选定的数据字段，而是只需向后端发出简单的请求，即可检索所需的精确数据——不多不少。这种灵活性正是 GraphQL 如此吸引人的原因之一。

更棒的是，您可以使用托管的GraphQL 后端——Slash GraphQL（由Dgraph提供）。这项服务是全新的，于 2020 年 9 月 10 日公开发布。使用 Slash GraphQL，我可以创建一个新的后端端点，指定我想要的图数据库架构，然后——瞧！ ——只需几个步骤即可启动并运行。

托管后端的优点在于，您无需管理自己的后端基础设施、创建和管理自己的数据库，或创建 API 端点。所有这些都由我们为您处理。

在本文中，我们将介绍 Slash GraphQL 的一些基本设置，然后看看我是如何在短短几个小时内使用 React 和 Slash GraphQL构建Pokémon Pokédex 应用程序的！

您可以在 GitHub 上查看所有代码。

更新：2021 年 4 月 16 日，Slash GraphQL 正式更名为 Dgraph Cloud。以下信息仍然适用，您仍然可以按照说明构建应用程序。

演示应用程序概述

哪个 90 年代的孩子（或者说，成年人）不曾梦想捕捉全部 150 只宝可梦？我们的演示应用将帮助我们追踪成为宝可梦大师的进度。

在构建应用程序时，我们将涵盖使用 API 的所有 CRUD 操作：创建、读取、更新和删除。

我们首先在 Slash GraphQL 的 API Explorer 中将所有宝可梦在线添加到数据库中。然后，在宝可梦图鉴应用的 UI 中，我们将显示从数据库中查询到的全部 151 只宝可梦。（嘿，我怎么能漏掉 Mew 呢？）屏幕顶部会显示两个下拉菜单，让我们可以按宝可梦类型和是否被捕获来筛选显示的结果。每只宝可梦旁边还会有一个切换开关，让我们可以将其标记为已捕获或未捕获。我们不会通过应用的 UI 从数据库中删除任何宝可梦，但如果您需要清理某些数据，我会指导您如何操作。

准备好开始我们的旅程了吗？

Slash GraphQL 入门

创建新的后端

创建Slash GraphQL帐户后，只需几个步骤即可启动并运行 GraphQL 后端：

1. 单击“创建后端”按钮。
2. 给它起个名字。（例如，我选择了“pokedex”。）
3. （可选）为 API 端点 URL 指定一个子域名。（同样，我选择了“pokedex”。）
4. （可选）选择提供商和区域。（默认使用美国西部 2 区域的 AWS。）
5. 单击“创建新后端”按钮确认您的选择。
6. 获取你的后端端点。（我的后端端点如下：https: //pokedex.us-west-2.aws.cloud.dgraph.io/graphql。）
7. 单击“创建您的架构”按钮。

就这样！创建新的后端后，您将拥有一个可用的实时 GraphQL 数据库和 API 端点。

创建架构

现在我们的后端已经启动并运行，我们需要为数据库中的数据类型创建模式。对于 Pokédex 应用，我们将创建一个Pokémon类型和一个PokémonType枚举。

这么少的代码里，有太多东西需要解读！PokémonType枚举类型很简单——它是所有宝可梦类型的集合，包括火、水、草和电。类型Pokémon描述了每个宝可梦的数据结构。每个宝可梦都有一个 ID、一个名字、一个用于显示宝可梦图片的图片 URL、宝可梦的类型，以及一个指示宝可梦是否被捕获的状态。

您可以看到每个字段都关联有相应的数据类型。例如，id是Int（整数），name是imgUrl类型String，captured是Boolean。感叹号表示!该字段是必填字段。最后，添加@search关键字可以使该字段在查询和修改中可搜索。

为了测试我们的数据库和新创建的模式，我们可以使用 API Explorer，这是一个简洁的功能，允许我们直接从 Slash GraphQL Web 控制台对我们的数据库运行查询和变异。

填充我们的数据库

让我们使用 API Explorer 将所有宝可梦插入到 Pokémon 数据库中。我们将使用以下变更：

为了简洁起见，上面的代码片段中我只展示了前九只宝可梦。您可以查看完整的代码片段来了解如何添加所有宝可梦。

现在，为了快速检查一下数据是否完整，我们可以查询数据库，确保所有宝可梦都已正确添加。我们将像这样请求所有宝可梦的数据：

这是它在 API Explorer 中的样子：

我们还可以编写一个类似的查询，如果只需要 Pokémon 名称，则仅返回这些名称。瞧，GraphQL 的魅力！

在应用程序中获取数据

现在我们已经将宝可梦添加到了宝可梦图鉴，并确认数据确实存在，接下来让我们让它在我们的应用中显示出来。我们的应用前端使用React和Material UI构建，并使用create-react-app进行引导。我们不会一步步讲解如何构建应用，但会重点介绍一些关键部分。同样，完整代码可以在 GitHub 上找到，如果你想克隆代码库或只是看一下。

在前端代码中使用 Slash GraphQL 时，我们本质上只是向创建后端时提供的单个 API 端点发出 POST 请求。在请求正文中，我们将 GraphQL 代码作为 提供query，将查询或变更的描述性名称作为 提供operationName，然后我们可选择提供variablesGraphQL 代码中引用的任何对象。

以下是我们如何按照此模式在应用程序中获取 Pokémon 的简化版本：

然后我们获取该数据并使用 Arraymap辅助函数循环遍历它以在 UI 中显示每个 Pokémon。

页面顶部的过滤器也连接到我们的 API。当过滤器值发生变化时，会触发新的 API 请求，但这次的搜索结果范围会缩小。例如，以下是我们捕获的所有火属性宝可梦：

用于按类型和捕获状态过滤的 Pokémon 的 API 请求的 JavaScript 看起来有点像这样：

更新应用程序中的数据

至此，我们已经充分介绍了如何通过 API Explorer 创建宝可梦，以及如何通过 JavaScript 在 Pokédex 应用中获取宝可梦。那么如何更新宝可梦呢？每个宝可梦都有一个切换开关，用于控制其捕获状态。点击该开关会更新数据库中宝可梦的捕获状态，并相应地更新 UI。

以下是我们更新 Pokémon 的 JavaScript：

然后，当切换值发生变化时，我们会调用该updatePokemonCapturedStatus函数。这会触发 API 请求来更新数据库中的值。然后，我们可以选择乐观地更新 UI，而无需等待后端的响应；或者，我们可以等待响应，然后将单个宝可梦的结果合并到前端包含所有宝可梦的更大数据集中。我们也可以简单地再次请求所有宝可梦，并用新的结果替换前端存储的宝可梦信息，这就是我选择的做法。

从数据库中删除数据

最后一个 CRUD 操作是“删除”。我们不允许用户在应用的 UI 中删除宝可梦；但是，作为应用管理员，我们可能需要从数据库中删除任何错误或不需要的数据。为此，我们可以再次使用 API Explorer。

例如，如果我们发现我们的 Pokédex 中多了一只 Bulbasaurs，我们可以删除所有的 Bulbasaurs：

然后，我们可以添加一只 Bulbasaur：

总结

那么，我们学到了什么？现在我们应该了解了如何在 React 应用中使用 Slash GraphQL。我们已经涵盖了所有 CRUD 操作，可以创建一个非常漂亮的宝可梦图鉴应用。我们甚至可能还抓到了一些宝可梦。

希望我们没有……在困惑中伤害到自己……[读者发出可听见的呻吟声]。

我们还没有介绍如何添加身份验证来保护我们的应用程序或如何在发出 GraphQL 请求时使用Apollo 客户端，但这些都是另一篇文章的重要主题！

作为一名经验丰富的前端开发人员，但缺乏 GraphQL 使用经验，使用 Slash GraphQL 非常容易。设置过程轻而易举，API Explorer 和文档在帮助我探索可以对数据进行的各种查询和修改方面发挥了至关重要的作用。

Slash GraphQL，我选择你！[读者们发出更多抱怨声]