はじめに

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
 }
}

listPostsのテスト

```Appsync:listPosts query{ listPosts{ items{ id title content } } } ```

詰まったところ

リゾルバ設定＆GraphQLテスト

2018/07/19からほとんど自動でGraphQLスキーマの作成と、リゾルバが設定されるようになっています。自動で設定してくれるのはすごく便利です。最初、他のサイトを参考にさせていただいていたのですが、createPostからinput　CreatePostに値を渡さないといけなかったのでなかなかうまくテストできず泣きました。テストが上手くいかないときはSchemaページ内にあるResolverをいじる必要があります。Resolverについては次の機会に。

参考
https://aws.amazon.com/jp/about-aws/whats-new/2018/07/aws-appsync-releases-enhanced-capabilities-nocode-graphql/