Skip to main content

セットアップ

アクセストークンを用意する

GraphQL APIを操作するにはアクセストークンが必要です。 アクセストークンについては認証の概要ページをご参照ください。

クエリの実行環境を用意する

GraphQL APIは以下のような方法で操作することができます。

  • curl コマンド
  • GUIクライアント

GUIクライアントは GraphiQLInsomnia などがあります。 このページでは GraphiQL をMacアプリ化した GraphiQL.app を使用します。

クエリを実行する

curlコマンドで実行する

curl コマンドを使用して実行する場合は以下のようなオプションを付加します。

$ curl https://api.annict.com/graphql \
-H "Authorization: bearer (アクセストークン)" \
-X POST \
-d "query=query { viewer { name } }"

query パラメータに query { viewer { name } } というクエリを付加してPOSTリクエストを送っています。 上記コマンドを実行すると下記のようなJSONデータが返ります。

{"data":{"viewer":{"name":"Koji Shimba"}}}

GraphiQLで実行する

GraphiQLを立ち上げると下の画像ようなウィンドウが表示されます。 「Welcome to GraphiQL」と書かれている左側のカラムがGraphQLのクエリを入力する場所で、その右はクエリの実行結果を表示する場所になります。 ちなみに「Welcome to GraphiQL」など書かれている文書はGraphQLのコメントなので、消してしまって問題ありません。

image

「GraphQL Endpoint」の入力欄に下記エンドポイントを入力します。

https://api.annict.com/graphql

GraphQL APIにリクエストを投げるとき、エンドポイントは常にこのURLになります。

次にアクセストークンをヘッダに登録します。 「Edit HTTP Headers」という青いボタンをクリックすると、リクエストヘッダを設定することができます。

image

「Add Header」をクリックして以下のように Authorization ヘッダを設定します。

image

Header nameHeader value
AuthorizationBearer (アクセストークン)

以上でGraphQL APIを操作するための設定が終わりました。左側のクエリ入力欄に以下のクエリを書いてみます。

query {
viewer {
username
name
}
}

クエリを入力したあと、入力欄の上にある再生ボタンみたいなものをクリックすると、右側に取得結果が表示されます。

image