Client 側 GraphQL クエリについて備忘録

GraphQL

Client 側で実行する GraphQL のクエリ文についての備忘録。

そもそも GraphQL については、以下のサイトにて簡単に学習。

Introduction to GraphQL

基本

構造

以下のような構造のクエリを、POST Request で投げることになります。

OPERATION_TYPE OPERATION_NAME(VARIABLE_DEFINITIONS) {
  ALIAS: ROOT_FIELD(ARGUMENTS) {
    ALIAS: FIELD
    ALIAS: FIELD
  }
}

operation type

operation detail
query GraphQL サーバーからデータを取得
mutation GraphQL サーバー上でデータを作成または変更
subscription リアルタイムの更新を設定するために使用
サーバー上で特定のイベントが発生するたびに、クライアントアプリケーションが更新を受け取ることを可能にする

実践

以下の資料を参考に、Query オペレーションを何点か実行してみます。

Queries

アクセス先の GraphQL のサーバーには、以下の Public API を利用します。

Countries GraphQL API

基本

query=$(
    cat <<EOF
{
  "query": "query Basic {
    country(code: \"BR\") {
      name
      currency
      languages {
        code
        name
      }
    }
  }"
}
EOF
)

curl -s "https://countries.trevorblades.com/" \
    -H "Content-Type: application/json" \
    -X POST \
    --data "$(echo "$query" | tr -d '\n')" |
    jq .

レスポンス。

{
  "data": {
    "country": {
      "name": "Brazil",
      "currency": "BRL",
      "languages": [
        {
          "code": "pt",
          "name": "Portuguese"
        }
      ]
    }
  }
}

変数の利用

Variables

query=$(
    cat <<EOF
{
  "query": "query Variable(\$code: ID!) {
    country(code: \$code) {
      name
      currency
      languages {
        code
        name
      }
    }
  }",
  "variables": {
    "code": "BR"
  }
}
EOF
)

curl -s "https://countries.trevorblades.com/" \
    -H "Content-Type: application/json" \
    -X POST \
    --data "$(echo "$query" | tr -d '\n')" |
    jq .

Aliases

Aliases

Alias 部分に値を指定すると、レスポンスの key 名を変更できます。

query=$(
  cat <<EOF
{
  "query": "query Basic {
    hogehoge: country(code: \"BR\") {
      name
      currency
    }
    gomogomo: country(code: \"US\") {
      name
      TSUKA: currency
    }
  }"
}
EOF
)

curl -s "https://countries.trevorblades.com/" \
  -H "Content-Type: application/json" \
  -X POST \
  --data "$(echo "$query" | tr -d '\n')" |
  jq .

レスポンス。

{
  "data": {
    "hogehoge": {
      "name": "Brazil",
      "currency": "BRL"
    },
    "gomogomo": {
      "name": "United States",
      "TSUKA": "USD,USN,USS"
    }
  }
}

Filtering

レスポンスをフィルタリングできます。実装されている GraphQL サーバーに応じて利用できるフィルタに制限があるため、アクセス先 API の情報を参照して、何が利用できるか確認する必要があります。

query=$(
  cat <<EOF
{
  "query": "query Basic {
    countries(filter: { currency: { eq: \"USD\" }}) {
      name
      currency
      languages {
        code
        name
      }
    }
  }"
}
EOF
)

curl -s "https://countries.trevorblades.com/" \
  -H "Content-Type: application/json" \
  -X POST \
  --data "$(echo "$query" | tr -d '\n')" |
  jq .