AWS AppSyncで作るサーバレスWebアプリ - (2) App Syncの設定

連載第2回目の今回は、メインとなるAppSyncの構築を行っていきます。

APIの作成

AppSyncの新規作成画面を開き、APIの名前を決めます。今回は「Whiteboard」としました。"Custome schema"にチェックが入っていることを確認しCreateをクリックします。

APIの作成が完了するとAPIにアクセスするための情報が表示されたページに遷移します。

データソース設定(AppSyncとDynamoDBの紐づけ)

左サイドバーのData Sourcesをクリックしてデータソース一覧画面を開きます。次にNewをクリックしてデータソース追加画面を開きます。

Userテーブル

まずは前回作成したUserテーブルをデータソースとして登録します。Data source nameに「UserTable」と入力し、Data source typeは"Amazon DynamoDB table"を選択、ResionはUserテーブルが属するリージョンを選択し、Table nameは「User」を選択します。Createをクリックして作成を完了してください。

Todoテーブル

Todoテーブルも同様にデータソースに登録します。

スキーマの設定

今度はスキーマの設定を行います。左サイドバーのSchemaをクリックしてスキーマ設定画面を開きます。

スキーマ

Schemaの欄には以下を入力してください。

type Mutation {
    createUser(name: String!): User
    createTodo(userId: ID!, content: String!): Todo
    deleteTodo(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
}

リゾルバ

Attachをクリックしてそれぞれ以下の様に設定してください。
なお、レスポンスマッピングは特に記述がない場合、デフォルト($util.toJson($util.toJson($ctx.result))のままなので記述していません。ご注意ください。

【Mutation】createUser(...): User

データソース名： UserTable
リクエストマッピング

{
    "version": "2017-02-28",
    "operation": "PutItem",
    "key": {
        "id": { "S": "$util.autoId()" }　## IDを自動生成してくれる。つまりRDBの主キー自動採番みたいなもの
    },
    "attributeValues": {
        "name": { "S": "$ctx.arguments.name" }
    }
}

【Mutation】createTodo(...): Todo

データソース名： TodoTable
リクエストマッピング

{
    "version": "2017-02-28",
    "operation": "PutItem",
    "key": {
        "user_id": { "S": "$ctx.arguments.userId" },
        "id": { "S": "$util.autoId()" }
    },
    "attributeValues": {
        "content": { "S": "$ctx.arguments.content" }
    }
}

【Mutation】deleteTodo(...): Todo

データソース名： TodoTable
リクエストマッピング

{
    "version": "2017-02-28",
    "operation": "DeleteItem",
    "key": {
        "id": { "S": "$ctx.arguments.id" }
    }
}

【Query】getUser(...): User

データソース名： UserTable
リクエストマッピング

{
    "version": "2017-02-28",
    "operation": "GetItem",
    "key": {
        "id": { "S": "$ctx.arguments.id" }
    }
}

【Query】listUsers: [User]

データソース名： UserTable
リクエストマッピング

{ 
    "version": "2017-02-28",
    "operation": "Scan"
}

レスポンスマッピング

$util.toJson($ctx.result.items)

【User】todos: [Todo]

データソース名： TodoTable
リクエストマッピング

{
    "version": "2017-02-28",
    "operation": "Query",
    "query": {
        "expression": "userId = :userId",
        "expressionValues": {
            ":userId": { "S": "$ctx.source.id" }
        }
    }
}

レスポンスマッピング

$util.toJson($ctx.result.items)

最終的に下図のようになっていればOKです。

確認

左サイドバーのQueryをクリックするとAppSyncのテストができます。
ユーザの作成

Todoの作成

ユーザとTodoの一覧取得

正しく動いているみたいですね。

まとめ

AppSyncの準備はこれで完了です。
お気づきかと思いますが、JSONライクな形式で設定を記述しただけなのでノンコーディングです。しかもこれだけでAPI Gatewayのようにエンドポイントが発行されるためHTTPアクセスが可能となります。

今回はGraphQL自体の説明はしていませんので、いつか補足として記事を書けたらと思っております。

次回はいよいよAppSyncを使ったWebアプリのフロントエンドを作っていきます。