使用GraphQL、React Native和AWS AppSync编写应用程序：后端

在这些帖子中，我们将构建一个名为 Cities 的旅游应用程序。您是否曾经在您最喜欢的美食频道上观看节目并看到一辆很棒的食品卡车，或者与刚从旅行回来并对她参观的猫头鹰酒吧感到非常高兴的朋友交谈？不用再担心了，我们将为您构建一个应用程序，以跟上您想要访问的所有这些很酷的地方以及它们所在的城市。

这个应用程序将演示和实现构建真实世界的全栈 react Native 和 graphql 应用程序所需的所有功能。

查看示例项目的 GitHub 存储库 以查看已完成的应用程序并继续跟进。 

关于技术

AppSync 提供了一种简单的方法来启动和运行可扩展的实时 GraphQL 服务器，而无需您自己创建和维护它。

在 AppSync 控制台中，我们将完成从创建 GraphQL 架构到配置数据库和解析器的所有工作。控制台还 设置了Graphiql  ，因此我们无需任何额外设置即可测试和查询我们的数据库。

我们将在客户端上实现此配置，这将为我们提供与 GraphQL 端点交互的无缝方式！

AppSync 将允许您直接使用以下三种解析器类型之一：DynamoDB、Elasticsearch 或aws Lambda。我们将在本教程中使用 DynamoDB。

入门

我们需要做的第一件事是创建一个新的 AppSync 应用程序并添加我们的基本架构。

我们的应用程序需要存储两组数据——一个城市列表和一个位置列表，我们将与列表中的各个城市相关联——因此我们的模式将具有两种主要数据类型（城市和位置）。

要开始使用 AppSync，请转到AWS 控制台并在服务下拉菜单中 选择AWS AppSync 。

进入 AppSync 仪表板后，我们需要单击Create api按钮：

现在，我们可以选择给应用程序一个名字（我叫我的TravelApp），并选择模式的类型（custom或sample）。我们将选择自定义架构选项，然后单击创建。

下一个屏幕将是新应用程序的仪表板。我们将立即看到一些有用的信息，包括我们应用的 URL 以及授权模式。在左侧，您将看到几个链接：Schema、Queries、dataSources和Settings。

在继续下一步之前，请查看此处的选项。

创建架构和供应数据源

接下来我们要做的是创建我们想要用于我们的应用程序的模式。同样，该模式将具有City和Location类型开始。 

在编辑器中，单击Schema选项卡，并使用两种类型和一个查询创建以下基本模式，然后单击Save：

type City {
  id: ID!
  name: String!
  country: String!
  locations: [Location]
}

type Location {
  id: ID!
  cityId: ID!
  name: String!
  info: String
}

type Query {  fetchCity(id: ID!): City
}

schema {
  query: Query
}

将模式附加到数据库

现在我们已经创建了一个基本模式，我们需要将此模式附加到数据库！

AppSync 使这变得非常容易。单击屏幕右侧的创建资源按钮。我们将需要两个数据库表：一个保存我们的城市，另一个保存我们的位置。

选择City，接受所有默认值，然后单击Create。您会注意到，这会自动向我们的模式添加一些有用的查询、突变和订阅！

继续对Location资源执行相同的操作。我们现在已经成功地创建了两个与我们的模式一起使用的数据库表，以及一些基本的查询、突变、订阅和解析器，它们会将模式映射到这些表（我们将在下一节中探讨解析器）。

现在让我们看看创建了什么。在左侧菜单中，单击数据源。

您现在应该看到我们刚刚创建的两个数据源！

运行一些测试查询

现在我们在 Schema 中创建了新的 Mutations 和 Subscriptions，让我们将它们添加到我们的 Schema 定义中。

为此，请滚动到架构底部并将架构定义更新为以下内容：

schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

接下来，我们可以通过创建突变和查询来测试所有内容。在查询选项卡中，创建以下突变：

mutation createCity {
  createCity(
    input: {
      id: "00001"
      name: "Seattle"
      country: "USA"
    }
  ) {
      id
  }
}

这会将西雅图的记录添加到城市表中，id 为 00001。

然后，创建一个查询来检索该数据：

query getCity {
  getCity(id: "00001") {
    id
    name
    country
  }
}

当您单击橙色播放按钮时，您可以选择执行createCity 突变或getCity查询。运行它们，您应该会在屏幕右侧看到检索和输出的西雅图城市数据。 

如果您想查看此数据在数据库中的表示方式，您可以浏览从Data Sources选项卡链接的 DynamoDB city 表。

解析器映射模板

您可能想知道查询如何如此无缝地映射到数据库。答案是解析器！ 

如果您查看 AppSync 仪表板的Schema选项卡的右侧 ，您将看到标题为Data Types的部分。这列出了我们 Schema 中的所有数据类型。在每个字段的右侧，我们看到一个标有Resolver的标题。

解析器基本上是模式和我们当前使用的数据库之间的接口。我们可以将解析器用于从项目的基本检索到细粒度访问控制等复杂操作的所有事情。

解析器是用称为速度模板语言 (VTL) 的 DSL 编写的。AppSync 将在创建数据源时自动配置基本解析器，但它们是高度可配置的。在这一点上，我们真的不需要对解析器进行太多更改，但让我们看一下您在现实世界中可能需要使用的三种主要类型的解析器。这些与以下基本操作有关：

1. 通过 id 获取单个项目

2. 获取项目列表

3. 将项目放入数据库

通过 ID 获取项目

在Data Types选项卡中，在模式定义旁边， getCity在Query下找到，然后单击CityTable。

这将带您进入解析器配置屏幕。在此屏幕中，您将看到解析器包含三个主要部分：

1. 数据源名称

2. 请求映射模板

3. 响应映射模板

数据源是您要与之交互的表。

请求映射模板描述了数据库将如何处理请求。

在这里，您可以编写自己的映射模板，或从一系列预填充模板中进行选择，以执行获取或放置项目等基本操作。

在这里，您会看到获取项目的模板。

响应映射模板描述了如何处理来自数据库的响应。

在我们的响应模板中，我们基本上只是返回context.result 并将其包装在$utils.toJson实用程序函数中。这只是将抽象出一些 VTL 样板的众多辅助工具之一。请参阅官方文档中的实用方法的完整列表。

随着您的应用程序变得越来越复杂，精通 AppSync 的关键是熟悉使用这些映射模板。我花了几个小时才弄清楚它是如何工作的，但在试验了一小会儿之后，我可以看到它有多么强大。

我们这里没有篇幅介绍解析器映射模板的所有详细信息，但您可以查看 解析器解析器映射模板参考 和 映射模板上下文参考 以了解有关它们的更多信息。

现在，我们将继续并完成我们的模式。

完成 AppSync 配置

我们已经完成了我们的模式，但是在我们可以开始与我们的 React Native 应用程序中的新 GraphQL 端点进行交互之前，我们还有最后一步！

因为我们要将所有位置存储在一个表中，但会根据我们当前查看的城市来查询它们，所以我们需要创建一个二级索引，以允许我们有效地查询具有特定 cityId.

要创建二级索引，请转到数据源 并单击位置表超链接。

这应该会将您带到位置表的 DynamoDB 表视图。在这里，单击索引 选项卡并使用分区键创建一个新索引 cityId。

出于本教程的目的，您可以将读取和写入容量单位降低到1 。

接下来，我们需要更新我们的listLocations查询以接受它cityId作为参数，因此将查询更新为listLocations以下内容：

type Query {
  // all previous queries omitted
  listLocations(cityId: ID!, first: Int, after: String): LocationConnection
}

现在，我们需要更新listLocations解析器以使用这个新cityId索引！请记住，我们真的只想listLocations 返回我们正在查看的城市的位置数组，因此解析器listLocations 将cityId 作为参数并仅返回该城市的位置。

为了让它工作，让我们将请求映射模板更新为listLocations以下内容：

{
    "version": "2017-02-28",
    "operation": "Query",
    "index": "cityId-index",
    "query": {
        "expression": "cityId = :cityId",
        "expressionValues": {
            ":cityId": {
                "S": "$ctx.args.cityId"
            }
        }
    },
    "limit": #if($context.arguments.limit) $context.arguments.limit #else 10 #end,
    "nextToken": #if($context.arguments.nextToken) "$context.arguments.nextToken" #else null #end
}

结论

在本教程中，我们为具有自己的 GraphQL 端点的 React Native 应用程序创建了后端。我们还研究了如何创建和更新解析器以及如何使用 AppSync 架构。