AWS AppSyncで作るサーバレスWebアプリ – (3) フロントエンドの作成

連載の最終回です。今回はフロントエンドを作成します。

使用するもの(言語)

HTML5 + Javascript・jQuery (+ CSS3)　です。
GraphQLならReactじゃないの？と思う方もいらっしゃるかと思いますが、「サーバサイドをGraphQLにしたいけど同時にフロントエンドにReactにしないとだから大変だなぁ...」と考えていらっしゃる方に「フロントはjQueryでも(QueryとMutationを使うだけなら)簡単にできるよ!」ということをお伝えするためにあえてjQueryにしました。
あと、WordPressではまだ標準でjQueryが使用されていますし。

コード

長くなるのでこちら(Github)にサンプルを置いてあります。ここではサンプルについてポイントだけ解説していきます。

AppSyncへのアクセス情報

前回作成したAppSyncのページを開き、API URLとAPI KEYを確認します。

この情報をJavascriptに記述します。(サンプル:index.js 1〜4行目)

const AppSync = {
    "graphqlEndpoint": "<上で確認したAPI URL>",
    "apiKey": "<上で確認したAPI KEY>"
};

jQuery Ajaxの初期設定

$.ajaxSetup()を使用して以下のように初期設定を行います。

• ヘッダにAPIキーを登録 (AppSyncにアクセスするには必須)
• URLをAPIエンドポイントにする (必須ではないがAppSyncというかGraphQLを使う以上、固定なので)
• HTTPメソッドをPOSTにする (必須ではないがAppSync..以下略)
• 受取るデータの型をJsonにする (必..以下略)

具体的には下記の通り。(サンプル:index.js 7〜14行目)

$.ajaxSetup({
    url: AppSync.graphqlEndpoint,
    type: 'POST',
    dataType: 'json',
    headers: {
        'X-Api-Key': AppSync.apiKey
    }
});

データの取得

前回のユーザとTodoの一覧取得テストで記述したようなクエリをJson文字列で送信するだけです。
サンプルのindex.jsでいうと17行目〜のような感じです。

const param = JSON.stringify({
    'query': `{ 
        listUsers { 
            id 
            name 
            todos { 
                id 
                content 
            }
        }
    }`
});
$.ajax({
    data: param
});

正常に処理が完了するとJson形式でデータが取得されます。

{
    "data": {
        "listUsers": [
            {
                "id": "038503e1-2a9b-4243-a74b-9511cccc41e0",
                "name": "鈴木",
                "todos": [
                    {
                        "id": "1245671b-503f-4ad9-940d-5bf9fb348ee2",
                        "content": "18:00〜リリース作業"
                    }
                ]
            },
            {
                "id": "b937f774-8c56-4a2a-a374-f367399288aa",
                "name": "伊藤",
                "todos": []
            },
            ︙
        ]
    }
}

あとは描画して装飾してあげればサンプルのように表示が可能です。

データの追加/更新/削除

データの取得とほぼ一緒です。MutationをJson文字列で送信するだけです。
サンプルのindex.jsでいうとユーザの作成を行っている75行目〜のような感じです。

const param = JSON.stringify({
    'query': `mutation {
        createUser(name: "${userName}") {
            id
        }
    }`
});

$.ajax({
    data: param
});

実際に画面を操作して動作を確認してみます。

ユーザ追加ダイアログの追加ボタン押下後の再描画時、入力した名前が表示されていることからどうやら正しく登録されたようです。

他にもTodoを作成している箇所(93行目〜)やTodoを削除している箇所(111行目〜)でも同様な処理を行っています。
ちなみに追加/更新/削除、いずれもMutationで送ります。

完成

あとはS3にファイルを設置して公開すれば完了です。
※もちろん、アップロードせずにローカルで動かしても問題ありません。

まとめ

3回にわたってAppSyncを使ったサーバレスWebアプリをお送りしました。
かなり端折っていますが、参考になれば幸いです。