AWS AppSyncで始めるフルマネージドのGraphQL

皆さん、GraphQLのサーバーサイドはどうやって実装されていますか？色々なライブラリがありますが、自前でサーバーを立ててセットアップするのは結構大変ですよね。
そこでAWSのGraphQLのフルマネージドサービス AWS AppSync をオススメしたいと思います。

AWS AppSyncとは

AWS AppSyncは、GraphQLをベースとしたアプリケーションのバックエンドを提供するAWSのフルマネージドサービスです。次の機能を利用できます。

• リアルタイムアプリケーションの作成
• 同期を使ったオフラインプログラミングモデルの構築
• 必要なデータだけ GraphQL で取得
• 複数のデータソース（Amazon DynamoDB、Amazon Elasticsearch Service、AWS Lambda、Aurora Serverless）へのアクセス

詳細はクラスメソッドさんの記事が分かりやすいです。
【速報】マネージドGraphQLサービス「AWS AppSync」が一般公開（GA）されました！ ｜ DevelopersIO

AWS AppSyncのクイックスタート

AWS公式のクイックスタートを試してみました。
https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/quickstart.html

AWSアカウントさえあれば簡単にできるので、AppSyncの概要を掴むにはとりあえずやってみるのが早いと思います。
ただ、2018/11/26時点でドキュメントは英語版のみです。英語を読むのが億劫な方や、結果だけ知りたいという方は本記事を斜め読みしてみてください。
2020/05/06時点 日本語ドキュメントにも対応しています。

リソースの作成

まずはAWSのマネジメントコンソールにアクセスし [AppSync] を選択します。リージョンはお好みで。AppSyncの画面で [Create API] をクリックします。

デフォルトのまま [Start] をクリックします。

デフォルトのまま [Create] をクリックします。

デフォルトのまま [Create] をクリックします。

進行状況が表示されます。このまま10秒程度待ちます。

GraphQL APIが作成されました！

作成されたリソースの確認

上記の操作だけで、以下のAWSリソースが作成されます。

リソース	リソース名	説明
GraphQL API	My AppSync App	AppSyncにおける最上位のリソースです。1つのAPIに複数のスキーマやクエリが紐付きます。
DynamoDBテーブル	MyModelTypeTable	GraphQL APIが利用するDynamoDBテーブルです。

それでは細かく見ていきたいと思います。

Queries: クエリとミューテーションの管理

Queriesを見てみると画面上部にミューテーションとクエリが1つずつ表示されています。コメントの訳は以下の通りです。

• mutation createMyModelType
  • DynamoDBにオブジェクトを作成するためにオレンジのPlayボタンをクリックしてcreateMyModelTypemutationを選択してください。開始してUnable to assume roleというエラーが表示された場合は少し待ってから再度トライして見てください。
• query listMyModelTypes
  • createMyModelTypeを実行後、listMyModelTypesを実行してください。

mutation-and-query

# Click the orange "Play" button and select the createMyModelType
# mutation to create an object in DynamoDB.
# If you see an error that starts with "Unable to assume role",
# wait a moment and try again.
mutation createMyModelType($createmymodeltypeinput: CreateMyModelTypeInput!) {
  createMyModelType(input: $createmymodeltypeinput) {
    id
    title
  }
}

# After running createMyModelType, try running the listMyModelTypes query.
query listMyModelTypes {
  listMyModelTypes {
    items {
      id
      title
    }
  }
}

それでは指示に従って操作してみます。オレンジのボタンをクリックして createMyModelTypes をクリックしてみます。これにより画面下部の QUERY VARIABLE の値がDynamoDBテーブルに登録されます。

query-variable

{
  "createmymodeltypeinput": {
    "title": "Hello, world!"
  }
}

画面右側にクエリの実行結果が表示されます。id=ランダムっぽい値、title=Hello, world!のオブジェクトが表示されています。

mutation-result

{
  "data": {
    "createMyModelType": {
      "id": "f3dcfbfe-d425-43dc-96d0-62b0feca3804",
      "title": "Hello, world!"
    }
  }
}

オレンジのボタンをクリックして listMyModelTypes をクリックしてみます。これによりDynamoDBテーブルへの問い合わせが行われます。

右側にクエリの実行結果が表示されます。itemの配列に先ほど登録したオブジェクトが表示されました。

試しにDynamoDBのテーブルを見てみましょう。同じリージョンのDynamoDBコンソールにアクセスすると MyModelTypeTable というテーブルが出来ています。

テーブル名左側のラジオボタンをチェックし [項目] タブをクリックすると、テーブルに登録されたアイテムが確認できます。1件登録されていることが確認できます。

Queries: ドキュメントの確認

画面右側の [Docs] をクリックしてみます。

Documentation Explorerが表示されます。

[Query] などをクリックすると、クエリの詳細が確認できます。

Schema: スキーマの管理

左ペインの [Schema] をクリックするとスキーマの一覧が確認できます。

以下は作成されたスキーマの一覧です。一つ一つの説明は省略しますが、ミューテーション、クエリ、サブスクリプションという機能を網羅したスキーマ構成になっています。

schema

input CreateMyModelTypeInput {
	title: String
}

input DeleteMyModelTypeInput {
	id: ID!
}

type Mutation {
	createMyModelType(input: CreateMyModelTypeInput!): MyModelType
	updateMyModelType(input: UpdateMyModelTypeInput!): MyModelType
	deleteMyModelType(input: DeleteMyModelTypeInput!): MyModelType
}

type MyModelType {
	id: ID!
	title: String
}

type MyModelTypeConnection {
	items: [MyModelType]
	nextToken: String
}

type Query {
	getMyModelType(id: ID!): MyModelType
	listMyModelTypes(filter: TableMyModelTypeFilterInput, limit: Int, nextToken: String): MyModelTypeConnection
}

type Subscription {
	onCreateMyModelType(id: ID, title: String): MyModelType
		@aws_subscribe(mutations: ["createMyModelType"])
	onUpdateMyModelType(id: ID, title: String): MyModelType
		@aws_subscribe(mutations: ["updateMyModelType"])
	onDeleteMyModelType(id: ID, title: String): MyModelType
		@aws_subscribe(mutations: ["deleteMyModelType"])
}

input TableBooleanFilterInput {
	ne: Boolean
	eq: Boolean
}

input TableFloatFilterInput {
	ne: Float
	eq: Float
	le: Float
	lt: Float
	ge: Float
	gt: Float
	contains: Float
	notContains: Float
	between: [Float]
}

input TableIDFilterInput {
	ne: ID
	eq: ID
	le: ID
	lt: ID
	ge: ID
	gt: ID
	contains: ID
	notContains: ID
	between: [ID]
	beginsWith: ID
}

input TableIntFilterInput {
	ne: Int
	eq: Int
	le: Int
	lt: Int
	ge: Int
	gt: Int
	contains: Int
	notContains: Int
	between: [Int]
}

input TableMyModelTypeFilterInput {
	id: TableIDFilterInput
	title: TableStringFilterInput
}

input TableStringFilterInput {
	ne: String
	eq: String
	le: String
	lt: String
	ge: String
	gt: String
	contains: String
	notContains: String
	between: [String]
	beginsWith: String
}

input UpdateMyModelTypeInput {
	id: ID!
	title: String
}

Data Sources: データソースの管理

左ペインの [Data Sources] をクリックするとデータソースの一覧が確認できます。[Resource] 列のリンクを押すとDynamoDBの画面に遷移します。

Settings: 設定の管理

左ペインの [Settings] をクリックするとGraphQL APIの設定が確認できます。クライアントからGraphQL APIにアクセスする際にこれらの情報を利用します（既に削除済なのでこのAPIにはアクセスできません）。

リソースの削除

放置すると微々たるものですが料金が発生するため、リソースを削除します。

• AppSync
  • 左ペインの [APIs] で対象のGraphQL APIを選択し [Delete] をクリックします
• DynamoDB
  • 左ペインの [テーブル] で対象のテーブルを選択肢 [Delete] をクリックします

クイックスタートをなぞっただけの内容でしたが、簡単にフルマネージドのGraphQL APIを作ることが出来ました。皆さんもぜひトライしてみてください！