实现React+Appsync的Subscription（第一部分）

2 年 ago
科, 颖
1 minute

首先

我使用Appsync的Subscription来创建一个聊天应用程序，并进行了各种调查，但却找不到合适的信息。经过各种参考，我尝试实现了Appsync的订阅功能，并记录了下来。

AppSync和GraphQL非常方便，一旦熟悉，就能快速且轻松地实现数据库和API的开发。由于篇幅较长，我会分成两次发送。

1. API的设置，GraphQL的测试。
2. React项目的启动和实现。

这次的情况

1. Appsync的配置
↓
2. 定義模式（Schema）和解析器（Resolver）
（由于AppSync会自动进行解析器的配置，所以跳过此步骤。）
↓
3. 创建数据库
↓
4. 进行GraphQL测试

AppSync配置

首先，登录AWS控制台，启动Appsync。

点击CreateAPI。

GraphQL 的定义

点击菜单栏中的Schema选项。

type Post{
 id:ID!
 title:String
 content:String
}
type Query{
 getPosts:[Post]
}
schema{
 query:Query
}

首先，我们需要定义”Post”的类型。”ID”和”String”是GraphQL中预定义的类型。”!”符号表示必填项，所以我们需要将必填项加上。本例中，我们将”id”设为必填项。

接下来，我们要注册”Post”类型的查询。我们将”getPosts”作为对象，以数组的形式传递给名为”Query”的根类型。

最后，我们需要将查询注册到模式中，这样就完成了。

数据库设置

点击Schema页面上的“Create Resources”。
将“Define or select a type”设置为“Use existing type”，
将“Select a type”选择为“Post”。
确认TableName已更改为“PostTable”，并开启“Automatically generate GraphQL”选项，然后点击底部的“Create”按钮。
这样一来，Appsync会自动设置Query和Resolver，并在DynamoDB中创建数据库。
※如果勾选DynamoDB中的“PostTest”项目，只会发现id已注册，但可以放心操作，因为会自动添加项目，可以顺利进行下一步的GraphQL测试。

GraphQL测试

发布帖子的测试

mutation{
 createPost(input:{
  title:"MutationTest"
　content:"Queriesから投稿"
 }){
　　id
　　title
　　content
　}
}

更新帖子的测试 de

mutation{
 updatePost(input:{
　id:""(先ほどのcreatePostのidを入力）
  title:"MutationTest１"
　content:"Queriesから投稿"
 }){
　　id
　　title
　　content
　}
}

执行 getPosts 的测试

请事先使用createPost添加几个帖子。

query{
getPosts{
 id
 title
 content
 }
}

列出帖子的测试

query{
 listPosts{
  items{
   id
   title
   content
  }
 }
}

僵持不下的地方

解析器配置和GraphQL测试

从2018年7月19日开始，GraphQL模式和解析器几乎可以自动创建。这个自动配置非常方便。起初，我参考了其他网站，但是在使用createPost并传入CreatePost值时遇到了一些麻烦，无法成功进行测试，令我非常苦恼。当测试不成功时，需要调整Schema页面内的Resolver。关于Resolver的内容将在下一个机会中介绍。

请参考以下网址：https://aws.amazon.cn/about-aws/whats-new/2018/07/aws-appsync-releases-enhanced-capabilities-nocode-graphql/

bannerAds