はじめに
AppsyncのSubscriptionを使って、チャットアプリを作ろうと色々と調査しましたが中々見つからず。色々と参考に、Appsyncのサブスクリブションを実装してみましたのでその備忘録です。
AppSyncとGraphQLはすごく便利で、慣れれば短時間でデータベース＋APIを簡単に実装することができます。長くなりそうなので2回に分けてお届けします。
その1.APIの設定、GraphQLのテスト
その2.Reactプロジェクトの立ち上げと実装
今回の流れ
1.Appsyncの設定
↓
2.Schema,Resolverの定義
（Resolverの設定は、AppSyncが自動でしてくれるので飛ばします。)
↓
3.DateBaseの作成
↓
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を必須にしてあります。
次にType Postに対するQueryを登録します。Queryという名前のルート型に、今回は、getPostsとしてPostをオブジェクトごと配列にして渡しています。
最後にQueryをSchemaに登録して完了です。
データベースの設定
Schemaページ内にあるCreate Resourcesをクリックします。
「Define or select a type」は「Use existing type」を、
「Select a type」は「Post」を選択します。
TableNameが「PostTable」に変わったのを確認し、『Automatically generate GraphQL』をONにして、一番下の「Create」をクリック。
そうするとAppsyncがQueryとResolverを自動で設定し、DynamoDBにデータベースを作成してくれます。
※DynamoDBの「PostTest」の項目をチェックするとidしか登録されていませんが操作すると、自動で項目が追加されるようになっていますので、安心して次のGraphQLのテストへと進んでください。
GraphQLのテスト
CreatePostのテスト
mutation{
createPost(input:{
title:"MutationTest"
content:"Queriesから投稿"
}){
id
title
content
}
}
updatePostのテスト
mutation{
updatePost(input:{
id:""(先ほどのcreatePostのidを入力）
title:"MutationTest１"
content:"Queriesから投稿"
}){
id
title
content
}
}
getPostsのテスト
事前にcreatePostで何件か追加してください。
query{
getPosts{
id
title
content
}
}
listPostsのテスト
query{
listPosts{
items{
id
title
content
}
}
}
詰まったところ
リゾルバ設定＆GraphQLテスト
2018/07/19からほとんど自動でGraphQLスキーマの作成と、リゾルバが設定されるようになっています。自動で設定してくれるのはすごく便利です。最初、他のサイトを参考にさせていただいていたのですが、createPostからinput CreatePostに値を渡さないといけなかったのでなかなかうまくテストできず泣きました。テストが上手くいかないときはSchemaページ内にあるResolverをいじる必要があります。Resolverについては次の機会に。