AWS AppSyncを使って初めてGraphQLを触わってみたメモ

## この記事の内容
GraphQLもAppSync（というかAWS自体ほぼ素人）も全く触ったことがなかったので勉強がてら触ってみたのですが、秒で忘れてしまいそうだったので備忘録。

実際には AWSの [AppSync](https://aws.amazon.com/jp/appsync/) + [Cognito](https://aws.amazon.com/jp/cognito/) + [DynamoDB](https://aws.amazon.com/jp/dynamodb/) を使用して、フロントはJSで [Apollo Client](https://www.apollographql.com/docs/react/api/apollo-client/) と [serverlessフレームワーク](https://serverless.com/) を使用して試してみたのですが、この記事ではAppSyncの部分だけメモってます。

## 結論

AWS の AppSync を使うとGUI操作だけで簡単な GraphQL サーバーの環境が作成できてびっくり。


## AWS AppSync の準備

### AWSコンソールでAPIを作成する。

#### 1. AWSコンソールにログインして、 `AWS AppSync` を検索して選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/5369e709-04fb-58f7-79fc-7201d75c5a61.png)

#### 2. Create APIボタン押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/44e35a92-67c3-9723-baa6-547c9440ad6b.png)

#### 3. Create with wizard を選択して Start ボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/dfb11ccb-2712-7ce1-09b4-147867962a5c.png)

#### 4. モデルを作成して Create ボタンを押下する。
今回はモデル名を `AppSyncTest` 、カラムは `id`, `email`, `password`、それぞれ `ID`, `Email`, `string` の型で作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/e1187609-78c9-8758-7961-0d4842b06fdf.png)


#### 5. 最後にAPI名を入れて Create を押せばとりあえずAPIの作成は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/badeed9d-951b-ccc8-bea4-3dd12c45470f.png)

完成したらMutationとQueryのサンプルが記述されている画面に飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/030d6d80-95d8-5d4a-d954-fd28573ad042.png)



### サンプルQuery

一応サンプルを見ていきましょう。
登録と一覧取得のMutation と Queryが記載されています。

- Mutation

```graphql

mutation createAppSyncTest($createappsynctestinput: CreateAppSyncTestInput!) {
  createAppSyncTest(input: $createappsynctestinput) {
    id
    email
    password
  }
}
```
```
# QUERY VALIABLES
{
  "createappsynctestinput": {
    "email": "username@example.com",
    "password": "Hello, world!"
  }
}
```
先ほど作成したモデルに対する登録用のMutationです。
登録パラメータは `createappsynctestinput` に定義されています。
このMutationを実行すると `email` と `password` に それぞれ `username@example.com`, `Hello, world` という文字が入ったレコードが追加されます。


- Query

```graphql
query listAppSyncTests {
  listAppSyncTests {
    items {
      id
      email
      password
    }
  }
}
```

モデル一覧取得用のQueryです。
実行すると作成したレコードが一覧となって取得できます。
どちらも ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/9892dcc9-80ce-79ca-c601-26a5b4ec20b3.png) を押して実行してみましょう。
Mutationを実行した後にQueryを実行すると

```
{
  "data": {
    "listAppSyncTests": {
      "items": [
        {
          "id": "e6263278-3b20-46e3-bed9-8ca2ec9dafcb",
          "email": "username@example.com",
          "password": "Hello, world!"
        }
      ]
    }
  }
}
```
このような結果が取得できると思います。これだけで動くの凄い！

### Postman を使用してAPIを叩いてみる。

せっかくなので最後に Postman を使用して実際にAPIを叩いてみたいと思います。

#### 1. まず、APIのエンドポイントとAPIkeyを確認します。

settingへ移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/c289d644-a8d3-341a-690d-0d7632ef7f92.png)
API URL と API Keyを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/0029ca3a-8ce7-398f-a6a1-b2f5003cba1f.png)

#### 2. Postman を使ってAPIを叩いてみる。
先ほど確認したAPI Key を headers に `x-api-key` という名前でセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/337ba2fe-49b8-17e9-ab9a-be1d2d0fbc1d.png)

接続先のURLも先ほど確認した API URL をセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/161bf1b3-08bd-2e55-0289-fa5e6e9c83f1.png)

body は `GraphQL` を選択して記述します。先ほどのMutation のサンプルを元に以下のようなコードをセットしてみました。

```graphql
mutation createAppSyncTest {
	createAppSyncTest(input: {
		email : "appsynctest@example.com",
		password : "test password"
	}) {
		email,
		password,
	}
}
```

#### 3. 実際に実行してみる。
以下のような結果が返ってくれば成功です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/57bb91eb-50cd-7dfa-1968-e3b4bbff6a19.png)

#### 4. 登録されたデータを確認してみる。
本当にデータが登録されたかDBを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/a54b609c-4dc9-61ec-7890-70273f65db5a.png)

左のメニューから Data Sources へ移動すると `AppSyncTestTable` が既に作成されていると思うのでクリック。Dynamo DBの画面が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/e85441cc-2d9e-b8cc-88f5-9d5f4252a76f.png)
items タブを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235958/fd4e8cad-9448-1898-a6de-77c0589dd4bb.png)

先ほどPostman から登録したデータがちゃんと入っている事が確認できました。
簡単！

## おしまい
ちょっとまたおさらいしたら次は認証を API key から Cognito を使用するように変更してクライアントから認証後にGraphQLでAPI通信をする、なんて辺りを書くかもしれないし書かないかもしれない。