More than 1 year has passed since last update.

HexabaseのGraphQL Playgroundの使い方を認証機能で解説

Posted at 2022-08-07

Hexabaseは企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

TypeScript SDKではGraphQL APIをラッピングして、TypeScriptから使いやすい形にしています。しかし、時にはGraphQLを直接実行したい場合もあるでしょう。そこで、この記事では認証機能を例としてGraphQL APIの使い方を紹介します。

必要なもの

メールアドレスとパスワードが必要です。今回はデモアカウントのものを使います（後述）。

GraphQL Playgroundは以下の2つが用意されています。今回は本番環境のものを利用します。

URL	意味
https://graphql.hexabase.com/graphql	本番環境
https://hxb-graph.hexabase.com/graphql	検証環境

上記URLへアクセスすると、以下のように表示されます。

GraphQLでは、その使い方がスキーマやドキュメントで解説されています。 DOCS を開いてログイン（login）を検索すると、次のような結果が表示されるでしょう。

認証は取得処理ではないので、Mutationになります。つまり Mutation.login が今回利用する処理になります。

Mutation.loginをクリックすると、次のように表示されます。

login(
  loginInput: LoginInput!
): TokenModel!

これは入力値として loginInput をキーとした変数（型は LoginInput! 。! は必須の意味）を必要とすることを意味しています。そしてレスポンスは TokenModel! になります。

LoginInput の内容はDOCSによると次のようになっています。意味としてはキーにemailとpasswordがあり、どちらも文字列型で必須ということになります。

type LoginInput {
  email: String!
  password: String!
}

そこで、まずは loginInput をJSONで作成します。内容は以下の通りで、これを QUERY VARIABLES に記述します。この認証情報は TODOサンプル | Hexabase 開発ガイドにて公開されているものです。

{
  "loginInput": {
    "email": "demo_app@hexabase.com",
    "password": "hexabase.com5678"
  }
}

そしてGraphQLの書き方です。先ほどのドキュメントの内容に沿って記述します。まず mutation と書き、そこで先ほどのJSONで定義したキーと、その型を指定します。 ! は必須の意味になります。

loginに対しては、引数として渡す名前とJSONの変数（ $ を頭に付けたもの）を指定します。同じような名前が続くので区別が難しいので注意してください。

mutation($loginInput: LoginInput!) {
  login(loginInput: $loginInput) {
		 token
  }
}

これを実行すると、結果として TokenModel! が返ってきます。 TokenModel! の内容はスキーマによると次のようになります。

type TokenModel {
  token: String!
}

実際、レスポンスは次のようになります（一部省略）。 data キーは必須で、その次がmutationの名前になります。その中で定義された形でレスポンスが得られます。

{
  "data": {
    "login": {
      "token": "eyJ...Lsw"
    }
  }
}

このようにしてHexabaseのGraphQLを操作できます。

HexabaseのGraphQLでは、数多くのクエリーを用意しています。ぜひHexabaseを使ったアプリ開発で活用してください。