GraphQLのリクエストとレスポンスの形式を確認する

HTTPについて考えていて、ふとGraphQLってどんな感じで通信されているか意識したことがなかったのでメモしておきます。

ドキュメント

ドキュメントを見ると、GraphQLはGETメソッドまたはPOSTメソッドで扱うことができるみたいです。

GETメソッドの場合は、queryというクエリパラメーターにGraphQLのクエリを付与するようです。

http://myapi/graphql?query={me{name}}

POSTメソッドの場合は、コンテンツタイプをapplication/jsonにして、以下の形式でJSON エンコードしたものをボディに入れてリクエストするようです。

{
  "query": "...",
  "operationName": "...",
  "variables": { "myVariable": "someValue", ... }
}

レスポンスは以下のJSON形式です。

{
  "data": { ... },
  "errors": [ ... ]
}

chromeのdev toolで見てみます。

リクエストは以下の通り

ちゃんとHeadersのcontent-typeがapplication/jsonになっていて、メソッドはPOST、ボディもドキュメントの通りの形式になっていますね。

レスポンスは以下の通り

レスポンスもちゃんとdataというフィールドが返ってきています。

errorsについてはエラーがない場合は返されないようです。

よく見ると、ドキュメントに書いてました。

If there were no errors returned, the "errors" field should not be present on the response.

ライブラリやPlaygroundでいい感じになっていて、あまりリクエストやレスポンスの詳細は意識することがなかったので今後は意識してみます。