GraphQL クライアント

GraphQL API は REST API よりも基盤となる構造が複雑なため、Relay のような、バッチ処理、キャッシングなどの機能を自動的に処理できる強力なクライアントが存在します。しかし、GraphQL サーバーを呼び出すために複雑なクライアントは必要ありません。`graphql-http` を使用すれば、GraphQL サーバーをマウントしたエンドポイントに HTTP POST リクエストを送信し、GraphQL クエリを JSON ペイロードの `query` フィールドとして渡すだけで済みます。

たとえば、Express GraphQL サーバーの実行 の例にあるコードのように、GraphQL サーバーを http://localhost:4000/graphql にマウントし、GraphQL クエリ ` { hello } ` を送信したいとします。これはコマンドラインで `curl` を使用して行うことができます。これをターミナルに貼り付けると

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

JSON として返された出力が表示されます。

{"data":{"hello":"Hello world!"}}

テストクエリを送信するためにグラフィカルユーザーインターフェースを使用したい場合は、GraphiQL、Insomnia、Postman などのクライアントを使用できます。

ブラウザから GraphQL を送信することも簡単です。http://localhost:4000/graphql を開き、開発者コンソールを開き、以下を貼り付けます。

fetch("/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({ query: "{ hello }" }),
})
  .then(r => r.json())
  .then(data => console.log("data returned:", data))

コンソールに返されたデータが出力されます。

data returned: Object { hello: "Hello world!" }

この例では、クエリはハードコードされた文字列です。アプリケーションが複雑になり、引数の渡し方 で説明されているように引数を取る GraphQL エンドポイントを追加する場合は、クライアントコードで変数を使用して GraphQL クエリを作成する必要があります。これを行うには、クエリにドル記号で始まる接頭辞が付いたキーワードを含め、ペイロードに追加の `variables` フィールドを渡します。

たとえば、引数の渡し方 の例にあるサーバーを実行していて、以下のスキーマがあるとします。

type Query {
  rollDice(numDice: Int!, numSides: Int): [Int]
}

これは、以下のコードで JavaScript からアクセスできます。

var dice = 3
var sides = 6
var query = `query RollDice($dice: Int!, $sides: Int) {
  rollDice(numDice: $dice, numSides: $sides)
}`

fetch("/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    query,
    variables: { dice, sides },
  }),
})
  .then(r => r.json())
  .then(data => console.log("data returned:", data))

この変数の構文を使用すると、エスケープによるバグを自動的に防ぐことができ、サーバーの監視が容易になります。

一般的に、Relay のような GraphQL クライアントの設定には少し時間がかかりますが、アプリケーションの成長に伴い、より多くの機能を得る価値があります。最初に HTTP リクエストを基盤となるトランスポートレイヤーとして使用し、アプリケーションが複雑になるにつれてより複雑なクライアントに切り替えることを検討しても良いでしょう。

この時点で、単一の文字列を受け取る API の GraphQL クライアントとサーバーを作成できます。さらに機能を追加するには、他の基本データ型の使用方法を学習する必要があります。