AWS AppSync and kintone REST API GraphQL Query Sample

AWS AppSync と kintone REST API を接続し、kintoneのレコードを取得するサンプルです。
※レコード作成・削除についての記載はありません。

# 環境

* mac
* AWS AppSync
* kintone

# 対象

* AWS AppSync から REST API データソースに接続する方法を知りたい方
* AppSyncコンソールからのスキーマ・リゾルバーの基本的な作成方法を知りたい方
* kintone REST API と AppSync を接続する方法を知りたい方

# 前提条件

* AWSのアカウントがあること
* AppSyncの基本的な操作が分かること
* kintone REST API の基本的な知識があること

# kintone データベース
AppSyncから接続する対象の kintoneアプリの設定は下記の通り


![スクリーンショット 2021-07-21 7.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c7bdefff-e093-0d25-b026-c535582d8751.png)


* owner 文字列(1行)
* name 文字列(1行)
* description  文字列(1行)
* id レコード番号
* createdAt 作成日時
* updatedAt 更新日時

※フィールドコードとフィールド名は同じです。


# AppSync API の作成

AppSyncコンソールから「APIを作成」を選択
![スクリーンショット 2021-07-21 7.27.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/ee76a204-ec59-baf6-f267-2056e2e724c0.png)


「一から構築」を選択
![スクリーンショット 2021-07-21 7.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/3fd1cc05-7f41-ae94-20db-325f76ecc6bc.png)


API名を入力→「作成」
![スクリーンショット 2021-07-21 7.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/4cb88d2b-42d2-b073-863c-5433750ddb54.png)



「スキーマを編集」選択
![スクリーンショット 2021-07-21 7.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/8693145a-2ee6-8157-7b10-83c546b164cb.png)



スキーマを入力→「スキーマを保存」を選択
![スクリーンショット 2021-07-25 14.04.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/4cb9a8bc-cada-0060-e65c-808b13fba96f.png)

## サンプルスキーマ

```json
type DateTime {
	type: FiledType
	value: AWSDateTime
}

type Description {
	type: FiledType
	value: String
}

enum FiledType {
	RECORD_NUMBER
	SINGLE_LINE_TEXT
	CREATED_TIME
	UPDATED_TIME
}

type Name {
	type: FiledType
	value: String!
}

type Note {
	id: RecordNumber
	owner: Owner
	name: Name
	description: Description
	createdAt: DateTime
	updatedAt: DateTime
}

type Owner {
	type: FiledType
	value: String
}

type Query {
	singleNote(id: ID!): Record
	listNotes: Records
}

type Record {
	record: Note
}

type RecordNumber {
	type: FiledType
	value: ID!
}

type Records {
	records: [Note]
}

schema {
	query: Query
}
```

# データソース作成
AppSyncと接続するデータソースにHTTPを選択します。

「データソースを作成」を選択
![スクリーンショット 2021-07-21 7.40.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c5c8c43d-8af4-e8ec-5b4d-56056d2e3faf.png)


データソースタイプに「HTTPエンドポイント」、「HTTPエンドポイント」にkintoneのサブドメインのURLを設定→「作成」を選択
![スクリーンショット 2021-07-21 7.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/610df2b6-a452-71b3-d45c-0e19c8b222f1.png)

データソースが作成されます
![スクリーンショット 2021-07-21 7.42.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/b939855e-d066-1008-c2d4-d1e969145286.png)


# リゾルバーの作成
メニューからスキーマを選択して、Queryのリゾルバーからアタッチを選択

データソースは前段で作成したデータソースを選択
![スクリーンショット 2021-07-25 14.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/68707d9e-2870-cfe1-69e5-07622f9d69bb.png)

## マッピングテンプレートの作成
GraphQLクエリをHTTPの形式に変換するマッピングテンプレートを作成します。

### singleNote リクエストマッピングテンプレート

* `<App ID>`・・・kintoneアプリID
* `<API Token>`・・・kintoneアプリのAPIトークン

```
{
  "version": "2018-05-29",
  "method": "GET",
  "resourcePath": "/k/v1/record.json",
  "params":{
      "query":{"app": "<App ID>", "id": $context.arguments.id },
      "headers": {
          "X-Cybozu-API-Token": "<API Token>"
      }
  }
}
```

### singleNote レスポンスマッピングテンプレート

```
$ctx.result.body
```


### listNotes リクエストマッピングテンプレート

* `<App ID>`・・・kintoneアプリID
* `<API Token>`・・・kintoneアプリのAPIトークン


```
{
  "version": "2018-05-29",
  "method": "GET",
  "resourcePath": "/k/v1/records.json",
  "params":{
      "query":{"app": "<APP ID>"},
      "headers": {
          "X-Cybozu-API-Token": "<API Token>"
      }
  }
}
```

### listNotes レスポンスマッピングテンプレート

```
#if($ctx.error)
  $util.error($ctx.error.message, $ctx.error.type)
#end
## If the response is not 200 then return an error. Else return the body **
#if($ctx.result.statusCode == 200)
    $ctx.result.body
#else
    $utils.appendError($ctx.result.body, "$ctx.result.statusCode")
#end
```

# GraphQL クエリ作成
GraphQL クエリを作成してテストします。

## singleNote

### クエリ

```
query MyQuery {
  singleNote(id: 1) {
    record {
      id {
        value
      }
      name {
        value
      }
      description {
        value
      }
    }
  }
}
```

### 実行結果


```
{
  "data": {
    "singleNote": {
      "record": {
        "id": {
          "value": "1"
        },
        "name": {
          "value": "1/10 やること"
        },
        "description": {
          "value": "部屋の片付け"
        }
      }
    }
  }
}
```

## listNotes

### クエリ

```
query MyQuery {
  singleNote(id: 1) {
    record {
      id {
        value
      }
      name {
        value
      }
      description {
        value
      }
    }
  }
  listNotes {
    records {
      id {
        value
      }
      name {
        value
      }
      description {
        value
      }
    }
  }
}
```

### 実行結果

```
{
  "data": {
    "singleNote": {
      "record": {
        "id": {
          "value": "1"
        },
        "name": {
          "value": "1/10 やること"
        },
        "description": {
          "value": "部屋の片付け"
        }
      }
    },
    "listNotes": {
      "records": [
        {
          "id": {
            "value": "29"
          },
          "name": {
            "value": "2/1 やること"
          },
          "description": {
            "value": "燃えるゴミ"
          }
        },
・・・略
        {
          "id": {
            "value": "2"
          },
          "name": {
            "value": "1/10 やること"
          },
          "description": {
            "value": "図書館で本を借りる"
          }
        },
        {
          "id": {
            "value": "1"
          },
          "name": {
            "value": "1/10 やること"
          },
          "description": {
            "value": "部屋の片付け"
          }
        }
      ]
    }
  }
}
```

# デバッグログ
デバッグのために、メニューの設定から「ログ記録」→「ログを有効化」を選択します。
![スクリーンショット 2021-07-25 15.29.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/21cfff9d-4f88-c9f7-898a-e11472463545.png)

CloudWatchにログが出力されます。


# 参考

https://docs.aws.amazon.com/ja_jp/appsync/index.html

https://developer.cybozu.io/hc/ja/articles/201941754

https://developer.cybozu.io/hc/ja/articles/202331474