Edited at

AppSyncでGraphQLを用いてDynamoDBを操作する


はじめに

ある日自社アプリの IoT.kyoto VIS をServerlessでいい感じにリプレイスしたのを話したときに、アーキテクチャを見てもらった人から「APIの部分AppSyncでやらないの?」とアドバイス頂いたので、AppSyncを使ってGraphQLに入門しました。

この記事では簡単なGraphQLを使ってDynamoDBのデータを操作することを目標に手順を書いていきます。


GraphQLとは

GraphQLはAPI用のクエリ言語であり、データ用に定義した型システムを使用してクエリを実行するためのサーバー側のランタイムです。

GraphQLは、特定のデータベースまたはストレージエンジンに結びついておらず、代わりに既存のコードとデータに基づいています。

引用: https://graphql.org/learn/

まぁ、RESTAPIの代わりになりそう!って感じのものです。


AppSyncとは

AWS AppSync では、ウェブアプリケーションやモバイルアプリケーション内のデータがリアルタイムで自動的に更新されます。

また、オフラインユーザーが再接続するとすぐにデータが更新されます。AWS AppSync により、応答性に優れた協働的なユーザーエクスペリエンスを実現できる、
共同のモバイルアプリケーションやウェブアプリケーションを簡単に構築できます。

AWS AppSync を使用すると、iOS、Android、JavaScript、React Native を使ってネイティブなモバイルアプリケーションやウェブアプリケーションを
構築できます。
AWS AppSync コンソールにアクセスし、シンプルなコードステートメントでアプリケーションのデータを指定して、使用を開始してください。
アプリケーションのデータの保存、処理、取得に必要なものすべては、AWS AppSync で管理されます。

引用: https://aws.amazon.com/jp/appsync/

AWSでGraphQL使うならAppSyncや。ってくらいに思っててください。


登場人物

AWSAppSyncには主にこんだけの登場人物が登場します。

image.png


API

定義されたGraphQLを呼び出すAPIの口。

呼び出すための設定ファイルが発行される。

image.png


Schema

GraphQLの定義。

APIや使用する要素の型定義などを設定する。

AWS AppSync Console 2018-11-06 18-11-14.png


Resolvers

APIがどのような操作をするか定義する。

AWS AppSync Console 2018-11-06 18-11-53.png


今回のゴール

画像のようにDynamoDBにPutItemするところまでやっていきます。

DynamoDB · AWS Console 2018-11-06 18-00-22.png


作業開始!


APIを作成

AWS AppSync Console 2018-11-06 17-32-37.png

AWS AppSync Console 2018-11-06 17-35-03.png

AWS AppSync Console 2018-11-06 17-36-36.png


Schemaを作成

AWS AppSync Console 2018-11-06 17-37-52.png

先にDynamoDBテーブルを作成していきます。テーブル名を変えるだけで、その他はデフォルトの設定でテーブルを作成します。

AWS AppSync Console 2018-11-06 17-39-15.png

AWS AppSync Console 2018-11-06 17-44-59.png

AWS AppSync Console 2018-11-06 17-47-34.png

AWS AppSync Console 2018-11-06 17-45-29.png

これでDynamoDBにテーブルが作成されます。

こんな感じでSchemaも自動生成されています。

AWS AppSync Console 2018-11-06 17-51-36.png


実際にクエリを実行する

AWS AppSync Console 2018-11-06 17-55-08.png

こういうコンソール画面が表示されます。左側がGraphQLを入力するエリアで、右側が実行した結果が表示されるエリアです。

AWS AppSync Console 2018-11-06 17-56-35.png

アイテムをCreateしてみましょう。

Createするためには createMyCustomType というAPIを呼び出します。

上記のAPIをコールするためには何が必要なのでしょうか?

Schemaを確認してみると、

createMyCustomType(input: CreateMyCustomTypeInput!): MyCustomType

という記述がされています。

input: CreateMyCustomTypeInput! と書いているので、 input に何が必要なのでしょうか? CreateMyCustomTypeInput を確認しましょう。

input CreateMyCustomTypeInput {

title: String!
content: String!
price: Int
rating: Float
}

と書いてあるので、 titlecontent が必須。型は String とのことなので、コンソール画面の左側に下記のテキスト貼り付けます。


mutation create {
createMyCustomType(input: {
title: "テストタイトル"
content: "テストですよよよ。"
}) {
id
title
content
}
}

左上の実行ボタンをクリックすると、


{
"data": {
"createMyCustomType": {
"id": "2033baef-fb4e-4bf6-a155-f08775103994",
"title": "テストタイトル",
"content": "テストですよよよ。"
}
}
}

という実行結果が返ってきて、DynamoDBにアイテムがPutされています。

DynamoDB · AWS Console 2018-11-06 18-00-22.png

作成したアイテムを取得してみましょう。コンソール画面の左側に下記のテキスト貼り付けます。


query list {
listMyCustomTypes {
items {
id
title
content
}
}
}

同じように左上の実行ボタンをクリックすると、


{
"data": {
"listMyCustomTypes": {
"items": [
{
"id": "2033baef-fb4e-4bf6-a155-f08775103994",
"title": "テストタイトル",
"content": "テストですよよよ。"
}
]
}
}
}

上記のような結果が返ってきて、作成したアイテムの情報が取得できます。

他にも下記のAPIが用意されているので試してみましょう。要領は createMyCustomType と同じです。

type Mutation {

createMyCustomType(input: CreateMyCustomTypeInput!): MyCustomType
updateMyCustomType(input: UpdateMyCustomTypeInput!): MyCustomType
deleteMyCustomType(input: DeleteMyCustomTypeInput!): MyCustomType
}

type Query {
getMyCustomType(id: ID!): MyCustomType
listMyCustomTypes(filter: TableMyCustomTypeFilterInput, limit: Int, nextToken: String): MyCustomTypeConnection
}


さいごに

今回紹介しているのはほんの一部だけです。APIを自作したり、データソース(DynamoDBのテーブル)を複数設定したりと、まだまだ様々なことができます。

私自身もまだ試せていないことだらけなので、これからもっと深めていこうと思います。

ではまた!!