はじめに

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を張り付ける。

#参考文献

AppSync
- https://www.pressmantech.com/tech/serverless/4684
- https://qiita.com/nakazax/items/209e4fac5fa42db6e8c8