はじめに
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```をクリックします。GraphQL
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のテスト
createPost
mutation{
createPost(input:{
title:"MutationTest"
content:"Queriesから投稿"
}){
id
title
content
}
}
updatePostのテスト
```Appsync:updatePost mutation{ updatePost(input:{ id:""(先ほどのcreatePostのidを入力） title:"MutationTest１" content:"Queriesから投稿" }){ id title content } } ```getPostsのテスト
事前にcreatePostで何件か追加してください。getPosts
query{
getPosts{
id
title
content
}
}