在这些教程中，我将向您展示如何使用AWS AppSync和React Native创建GraphQL数据库并与之交互。 该应用程序将具有实时和脱机功能，我们通过AppSync开箱即用。 在本文中，我们将通过设置AppSync的后端开始。

在这些帖子中，我们将构建一个名为Cities的旅行应用程序。 您是否曾经在自己喜欢的美食频道上观看过一场表演，看过一辆很棒的美食车，或者与刚从旅途中回来的朋友交谈过，并对她去过的猫头鹰酒吧感到非常兴奋？ 别担心，我们将为您构建一个应用程序，以跟上您想访问的所有酷地方以及它们所位于的城市的速度。

该应用程序将演示并实现构建真实的全栈React Native和GraphQL应用程序所需的所有功能。

查看示例项目的GitHub存储库，以查看完整的应用程序并进行后续操作。

关于技术

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

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

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

AppSync允许您立即使用以下三种解析器类型之一：DynamoDB，Elasticsearch或AWS Lambda。 在本教程中，我们将使用DynamoDB。

入门

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

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

要开始使用AppSync，请转到AWS控制台，然后在Services下拉菜单中选择AWS AppSync 。

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

现在，我们可以选择为应用程序命名（我叫我的TravelApp ），然后选择模式的类型（ custom或sample ）。 我们将选择“ 定制模式”选项，然后单击“ 创建” 。

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

在继续下一步之前，请先浏览一下此处的选项。

创建架构并配置数据源

我们要做的下一件事是创建我们想用于我们的应用程序的架构。 同样，该架构将具有“ 城市”和“ 位置”类型作为起点。

在编辑器中，单击“ 架构”选项卡，然后创建具有两种类型和一种查询的以下基本架构，然后单击“ 保存” ：

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使此操作非常容易。 单击屏幕右侧的创建资源按钮。 我们将需要两个数据库表：一个用于保存我们的城市，另一个用于保存我们的位置。

选择城市 ，接受所有默认值，然后单击创建 。 您会注意到，这将自动向我们的架构添加一些有用的查询，变异和订阅！

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

现在让我们看一下创建的内容。 在左侧菜单中，点击数据源 。

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

运行一些测试查询

现在，我们在架构中创建了新的“突变和订阅”，现在将它们添加到架构定义中。

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

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查询。 同时运行它们，您应该会在屏幕右侧看到检索到的西雅图城市数据并输出。

如果要查看该数据在数据库中的表示方式，可以浏览从“ 数据源”选项卡链接的DynamoDB城市表。

解析器映射模板

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

如果您查看AppSync仪表板“ 模式”选项卡的右侧，则会看到标题为“ 数据类型”的部分。 这列出了我们架构中的所有数据类型。 在每个字段的右侧，我们看到一个标题为Resolver的标题。

解析程序基本上是架构和我们当前正在使用的数据库之间的接口。 从项目的基本检索到诸如粒度访问控制之类的复杂操作，我们都可以使用解析器。

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

1. 通过ID获取单个项目
2. 获取物品清单
3. 将项目放入数据库

通过ID获取项目

在“ 数据类型”选项卡中，模式定义旁边，在“ 查询”下找到“ getCity ”，然后单击“ 城市表” 。

这将带您到解析器配置屏幕。 在此屏幕上，您将看到解析器的三个主要部分：

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模式。

某些图片来自Amazon Web Services，Inc.

翻译自: https://code.tutsplus.com/tutorials/code-an-app-with-graphql-and-react-native--cms-30511