如何使用AWS Amplify构建无服务器GraphQL和REST API

AWS Amplify使开发人员可以快速创建并连接到云中的强大服务。 在上一教程中，您学习了如何在React项目中设置Amplify以及如何使用身份验证，S3存储和托管 。 如果您需要有关AWS Amplify的简介，请确保首先查看该文章。

在本文中，我们将进一步使用React和AWS Amplify，探索诸如托管GraphQL数据层和lambda函数之类的功能。

添加GraphQL API

让我们看一下如何向我们的项目中添加一个AWS AppSync GraphQL API并从项目中开始使用它。

我们将创建的API将是饭店API，供我们跟上我们喜欢或想要参观的饭店的情况。

要将GraphQL API添加到我们的项目中，我们可以使用以下命令：

amplify add api

系统将提示您回答一些配置问题。 选择以下选项：

• 服务类型： GraphQL
• API名称： TutsGraphQLAPI
• 授权类型： API密钥
• 带注释的GraphQL模式： N
• 指导模式创建： Y
• 什么最能描述您的项目？ 具有字段的单个对象（例如具有ID，名称，描述的“ Todo”）
• 您现在要编辑架构吗？ ÿ

出现提示时，将架构更新为以下内容，然后保存文件：

// located at amplify-web-app/amplify/backend/api/TutsGraphQLAPI/schema.graphql

type Restaurant @model {
  id: ID!
  name: String!
  description: String
}

这只会创建一个数据类型，即Restaurant -具有必填的ID和名称字段以及可选的说明。

接下来，让我们将更新推送到我们的帐户：

amplify push

现在，API已创建！

刚刚发生什么事了？ AWS Amplify使用内置的GraphQL Transform库来创建完整的GraphQL API，其中包括其他架构，解析器和数据源。

要在创建新的AWS AppSync API之后随时查看它，您可以转到位于https://console.aws.amazon.com/appsync的仪表板，然后单击刚刚创建的API（确保您所在的区域是设置正确）。 在AWS AppSync仪表板中，您可以查看API配置并在API上执行查询和更改。

执行GraphQL突变

接下来，让我们与React应用程序中的API进行交互。

我们要做的第一件事是创建一个突变。 在GraphQL中，突变等效于REST的PUT ， PUSH和DELETE操作。 因为我们的数据库中还没有任何数据，所以我们将创建一个变体来创建一个新的餐厅商品。

为此，我们将从AWS Amplify导入API和graphqlOperation ，定义一个突变，然后执行该突变。

让我们看一个实现变异的示例应用程序。 在App.js ，首先我们导入React，我们的应用CSS和必要的AWS Amplify组件