はじめに
-
AWS AppSyncとは、GraphQLをベースとしたアプリケーションのバックエンドを提供するAWSのフルマネージドサービスです。次の機能を利用できます。
- リアルタイムアプリケーションの作成
- 同期を使ったオフラインプログラミングモデルの構築
- 必要なデータだけ GraphQL で取得
- 複数のデータソース（Amazon DynamoDB、Amazon Elasticsearch Service、AWS Lambda、Aurora Serverless）へのアクセス
このAppSyncでAPI構築し、ToDo管理Webアプリケーションを開発してみました。
前提知識
- HTML, CSS, JS, JQuery, etc.
- DynamoDB
- GraphQL
但し、それほど深い知識は必要ない。
DymanoDB table作成
このページを参考にしてUser tableとTodo tableを作成。
AppSyncとDynamoDBの紐づけ
左サイドバーのData SourcesをクリックしてNewをクリック。
UserTable
既に作成したUserテーブルをデータソースとして登録します。Data source nameに「UserTable」と入力し、Data source typeは"Amazon DynamoDB table"を選択、ResionはUserテーブルが属するリージョンを選択し、Table nameは「User」を選択します。Createをクリックして作成を完了してください。
TodoTable
同様に「TodoTable」を作成
AppSync API Schema作成
schema
type Mutation {
createUser(name: String!): User
createTodo(userId: ID!, content: String!): Todo
deleteTodo(userId: ID!, id: ID!): Todo
}
type Query {
getUser(id: ID!): User
listUsers: [User]
}
type Todo {
userId: ID!
id: ID!
content: String!
}
type User {
id: ID!
name: String!
todos: [Todo]
}
schema {
query: Query
mutation: Mutation
}
AppSync API Resolver作成
createUser(...): User
UserTable
request
{
"version" : "2017-02-28",
"operation" : "PutItem",
"key" : {
"id": $util.dynamodb.toDynamoDBJson($util.autoId()),
},
"attributeValues" : $util.dynamodb.toMapValuesJson($ctx.args)
}
response
$util.toJson($ctx.result)
createTodo(...): Todo
TodoTable
request
{
"version" : "2017-02-28",
"operation" : "PutItem",
"key" : {
"id": $util.dynamodb.toDynamoDBJson($util.autoId()),
},
"attributeValues" : $util.dynamodb.toMapValuesJson($ctx.args)
}
response
$util.toJson($ctx.result)
deleteTodo(...): Todo
TodoTable
request
{
"version": "2017-02-28",
"operation": "DeleteItem",
"key": {
"id": { "S": "$ctx.args.id" },
"userId": { "S": "$ctx.args.userId" }
},
}
response
$util.toJson($ctx.result)
getUser(...): User
UserTable
request
{
"version": "2018-05-29",
"operation": "GetItem",
"key": {
"id": { "S": "$ctx.arguments.id" }
}
}
response
$util.toJson($ctx.result)
listUsers: [User]
UserTable
request
{
"version": "2018-05-29",
"operation": "Scan"
}
response
$util.toJson($ctx.result.items)
todos: [Todo]
TodoTable
request
{
"version": "2018-05-29",
"operation": "Query",
"query": {
"expression": "userId = :userId",
"expressionValues": {
":userId": { "S": "$ctx.source.id" }
}
}
}
response
$util.toJson($ctx.result.items)
Front-end作成
AppSyncのページを開き、API URLとAPI KEYをコピーする。
git cloneして、index.jsの最初にAPI URLとAPI KEYを張り付ける。