GitHub が公開しているサービスの GraphiQL を利用すると簡単に GraphQL を体感できるので試してみます。
事前準備
以下の URL にアクセスすると GraphiQL サービスにアクセスできます。
URL : https://developer.github.com/v4/explorer/
Start exploring GraphQL API queries using your account’s data now
GitHub アカウントのデータを使用して GraphQL API クエリの探索を開始しましょう。
ということで「 Sign in with GitHub 」で連携して利用を許可します。
Docs
右側の Docs から API 仕様の探索ができます。
ユーザー情報をとるクエリを探索してみます。
Docs -> Query の順にクリックし、下にスクロールする user クエリが見つかります。
user クエリ
user(login: String!): User
user クエリを深堀りします。
カッコの中がパラメータで、 型についている ! は必須パラメータという意味です。
login パラメータに文字列型の指定が必須であることがわかります。
戻り値は、 User オブジェクトです。
User オブジェクト
User をクリックすると、オブジェクトの詳細が見ることができます。
id や bio 、 email など、ユーザーに紐づく情報があることがわかります。
ここでも ! がついている場合は、必ず存在します。
Explorer
user クエリを Explorer を利用して呼び出してみます。
Explorer をクリックして、 user にチェックを入れることにより、必須のパラメータ login の入力を促されます。
ログイン情報を入力し、取得する値をなにか選択（ここでは bio ）することにより、クエリが簡単に構築できます。
右三角ボタンで実行することにより、右側のペインに結果の json が表示されます。
変数の利用
QUERY VARIABLES を利用して、JSON 形式で変数を利用できます。
loginName という変数名を、値 omuron で指定する例です。
この情報を QUERY VARIABLES に記載します。
{ "loginName": "omuron" }
定義した変数は query のパラメータに渡す必要があります。
変数は $ をつけることより、呼び出すことができます。
query ($loginName: String!) {
user(login: $loginName) {
bio
}
}
まとめ
GraphiQL サービスを利用することにより、 GraphQL を簡単に体感することができます。
GraphQL を呼び出す感覚を掴んでから、サーバーサイドの実装にチャレンジしていきたいと思います。
