Help us understand the problem. What is going on with this article?

React+AppsyncのSubscriptionを実装する(その1)

More than 1 year has passed since last update.

はじめに

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のテスト

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

getPostsのテスト

事前にcreatePostで何件か追加してください。

getPosts
query{
getPosts{
 id
 title
 content
 }
}

listPostsのテスト

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/

K15
プロジェクトマネジメント→デザイン→プログラミングと上流工程から学ぶ。 2018/06から諸事情によりプログラミングを独学で学ぶ。モダン開発を突き詰め、現在はReact+AWSでアプリを構築中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away