Diary

Diary

日々学んだことをアウトプットする場として初めてみました

トップ > Github > GraphQL（GitHub API ）の叩き方

GraphQL（GitHub API ）の叩き方

Github

GraphQL とは

現在主流の REST 設計では、アプリが複雑になるにつれ複数のエンドポイントが用意され、場合によっては１画面表示するのに複数の API を叩く必要があったりします。
これを解決するため、GraphQL はクライアントが必要なデータのみを単一のリクエストで要求することを可能にしています。

その他説明は詳しい方に任せますが、以下は自分が気になった REST との相違点になります。

REST と同じところ

  • アプリケーションレイヤーは HTTP である
    • body に必要なクエリを書くために、POST でリクエストを送る

REST と比べたメリット

  • 必要な情報をクライアントから指定できる
    • オーバーフェッチング（不要な情報を取得してしまい、通信量が無駄に増えること）・アンダーフェッチング（必要な情報が１回で取れず、複数の API 呼び出しが必要になること）を回避できる

github api

github api は GraphQL を提供しているため、これを練習として叩いてみます。

注: この記事は 2023/5/28 現在の github の仕様に基づいています。
最新の情報については github 公式のレファレンスをご覧ください。

準備

github REST API には認証なしで叩けるものもありましたが、GraphQL では全てに認証が必要です。

GitHub App, OAuth App など多数の認証方法がありますが、今回は簡単のため personal access token を使用します。

まず personal access token をこちらのページに従って準備します。

自分は settings > Developer settings > Personal access tokens > Fine-grained tokens から作成しました。
（github_pat_ から始まる文字列です。）

アプリケーションレイヤーは通常の HTTP method での通信のため curl でも叩けますが、GUI のクライアントがあると便利です。
今回は postman を使いましたが、本格的に開発するなら Github が推している altair も良さそうです。

curl で叩く

とはいえまずは curl でイメージを掴んでみます。

Github の最初の例を実行し、トークンの確認をしてみます。

# <your_token> の部分には 準備 で発行したトークンを入れてください。
curl -H "Authorization: bearer <your_token>" -X POST -d " \
 { \
   \"query\": \"query { viewer { login }}\" \
 } \
" https://api.github.com/graphql
# 以下のように、トークンを発行したアカウントが表示されてれば成功です。
{"data":{"viewer":{"login":"kokoichi206"}}}

エスケープ部分が複雑に見えますが、単に query を json で記述して request body にのせてるだけです。

Schema の取得

GraphQL ではクライアントから取得情報を変えられるということは、どこかにスキーマが公開されてるべきと想像できます。

Github API における public schema はこちらからダウンロードできます。

または、GraphQL のクエリを使って取得が可能です。

curl -H "Authorization: bearer <your_token>" -X POST -d " \
{ \
  \"query\": \"query { __schema { \
    types { \
      name \
      kind \
      description \
      fields { \
        name \
      } \
    } \
  }}\" \
} \
" https://api.github.com/graphql

__schema については一般的な GraphQL の仕様に記載があるため、サーバー実装時にいまいど読んでおきたいです。

Postman から叩く

File > New (command + n ) から新規作成ダイアログを開き『GraphQL Request』を選びます（ベータ版なんですね）。

request URL の部分には https://api.github.com/graphql のエンドポイントを指定します。

この時、Schema の取得は勝手に行われます（確か）。

ここで先ほどの viewer のクエリーを再現してみます。

まず、認証の設定を行います。
Authentication タブに、以下のように Bearer Token　の設定をします。

続いて Query タブの右側の記入欄に以下のように記載します。

query Viewer {
    viewer {
        login
    }
}

この状態で Query を実行できたら成功です。

少しクエリをいじってみます。

正しく Schema の取得が行われていたら左側にチェックマーク形式でスキーマが表示されてるはずなので、適当に追加してみます。

ネストされた構造や、引数があることを確認できました。

また、Github の説明をみると、変数なる概念もあるみたいです。

Postman では以下のように指定します。　

おわりに

GraphQL の簡単な説明と、Github API の Postman での叩き方を紹介しました。
また、GraphQL の概念として、ネストされたスキーマと変数の概念があることも確認しました。

次回は android の GraphQL Client である apollo を使って android から Github API を叩いてみたいと思います。