[アップデート]AppSyncがGraphiQL Explorerを採用してクエリのテスト実行が簡単に行えるようになりました！

AppSyncがGraphiQL Explorerを採用してクエリのテスト実行が簡単に行えるようになりました！
合わせて、認証にCognitoユーザープールを利用した場合のテストが簡単にできるようになっています！

• AWS AppSync simplifies GraphQL query prototyping in the AWS Console with GraphiQL Explorer and Cognito integration improvements

もうAppSyncでクエリのテスト実行の際に、手入力でクエリを入力する必要はありません！
こんな感じでAppSyncのコンソール画面からクエリのフィールドをポチポチ選択するだけで、GraphQLのクエリを簡単に試せるようになっています！

この機能をさっそく試してみました。

構成概要

Amplifyを利用してAppSyncを構築します。 今回は、Amplifyの公式チュートリアルと弊社ブログを参考に、React + Amplify + AppSync + DynamoDBの環境を作ります。

• Getting started - Amplify Docs
• React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた | Developers.IO

これに、Cognitoユーザープールの認証も追加した、次の図のような環境を構築しています。

このチュートリアルを進めていくと、Cognitoでログインが必要なReactのSPAが構築できます。

ログインしてトップページを開くとこんな画面が表示されて、ToDoが登録できるというシンプルなアプリケーションです。

このサンプルアプリでは２つのQueryが定義されていて、このQueryをAppSyncコンソールで実行してみます。

GetTodo

  query GetTodo($id: ID!) {
    getTodo(id: $id) {
      id
      name
      description
      createdAt
      updatedAt
    }
  }

ListTodos

  query ListTodos(
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        description
        createdAt
        updatedAt
      }
      nextToken
    }
  }

試してみた

AppSyncのコンソール画面を開いてクエリを選択すると、こんな感じのGraphQLクエリを実行する画面が表示されます。

デフォルトの認証モードを Cognitoユーザープール にしているため、このまま認証無しで実行しても UnauthorizedException が発生してしまいます。
ユーザープールでログイン ボタンからログインできるようになっています。

ユーザープールのクライアントIDを選択して、ユーザー名とパスワードを入力してログインします。

そうすると、Cognitoユーザーでログインした状態になり、ログインしたユーザーの認証情報を利用してクエリを実行できます。

取得したい情報を左のリストから選択してGraphQLクエリの作成ができるので、クエリのテスト実行がすごく簡単にできるようになりました！

終わりに

AppSyncでクエリをテスト実行するたびに、手作業でGraphQLのクエリを入力するのはめんどくさかったので、クエリのテスト実行がすごいやりやすくなったんじゃないかと思います！

AppSyncをご利用の方はぜひお試しください。