この記事の内容
GraphQLもAppSync（というかAWS自体ほぼ素人）も全く触ったことがなかったので勉強がてら触ってみたのですが、秒で忘れてしまいそうだったので備忘録。
実際には AWSの AppSync + Cognito + DynamoDB を使用して、フロントはJSで Apollo Client と serverlessフレームワーク を使用して試してみたのですが、この記事ではAppSyncの部分だけメモってます。
結論
AWS の AppSync を使うとGUI操作だけで簡単な GraphQL サーバーの環境が作成できてびっくり。
AWS AppSync の準備
AWSコンソールでAPIを作成する。
1. AWSコンソールにログインして、 AWS AppSync を検索して選択する。
2. Create APIボタン押下する。
3. Create with wizard を選択して Start ボタンを押下する。
4. モデルを作成して Create ボタンを押下する。
今回はモデル名を AppSyncTest 、カラムは id, email, password、それぞれ ID, Email, string の型で作成しました。
5. 最後にAPI名を入れて Create を押せばとりあえずAPIの作成は完了です。
完成したらMutationとQueryのサンプルが記述されている画面に飛びます。
サンプルQuery
一応サンプルを見ていきましょう。
登録と一覧取得のMutation と Queryが記載されています。
- Mutation
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
query listAppSyncTests {
listAppSyncTests {
items {
id
email
password
}
}
}
モデル一覧取得用のQueryです。
実行すると作成したレコードが一覧となって取得できます。
どちらも 
を押して実行してみましょう。
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へ移動
API URL と API Keyを確認します。
2. Postman を使ってAPIを叩いてみる。
先ほど確認したAPI Key を headers に x-api-key という名前でセットします。
接続先のURLも先ほど確認した API URL をセットします。
body は GraphQL を選択して記述します。先ほどのMutation のサンプルを元に以下のようなコードをセットしてみました。
mutation createAppSyncTest {
createAppSyncTest(input: {
email : "appsynctest@example.com",
password : "test password"
}) {
email,
password,
}
}
3. 実際に実行してみる。
以下のような結果が返ってくれば成功です。
4. 登録されたデータを確認してみる。
本当にデータが登録されたかDBを見てみます。
左のメニューから Data Sources へ移動すると AppSyncTestTable が既に作成されていると思うのでクリック。Dynamo DBの画面が開きます。
items タブを選択
先ほどPostman から登録したデータがちゃんと入っている事が確認できました。
簡単！
おしまい
ちょっとまたおさらいしたら次は認証を API key から Cognito を使用するように変更してクライアントから認証後にGraphQLでAPI通信をする、なんて辺りを書くかもしれないし書かないかもしれない。