2023-05-21

GraphQL 素振り

GraphQL および周辺技術にキャッチアップするための自分用メモ。

やること

登場人物

まずは概要をざっくり理解するために出てくる主な言葉の理解から。

GraphQL は、クライアントとサーバサイドのデータ取得、応答をを行うためのクエリ言語。従来からデファクトスタンダードだった REST API の大体として旧 Facebook 社によって作成され、今では GitHub や YouTube をはじめ多くのプロダクトの本番環境で利用されている。

GraphQL の特徴

柔軟なデータ取得
- REST API の課題でもあるオーバーフェッチングを解決する最も目玉な特徴（だと僕が思っている）。クライアントは、必要なデータを明示的に指定することで、不要なデータの取得やリクエストを複数回にわたって行うことを防ぐことができる。
単一エンドポイント
- GraphQL では通常単一のエンドポイントにより API が提供される。リソースとリソースへの操作によって HTTP メソッド、エンドポイントが存在する REST API と大きく異なる部分ではある。
- まだあんまり理解できていないが、単一エンドポイントにリクエストが集中することに対するパフォーマンスととかへの影響はあるのだろうか 🤔
スキーマ
- GraphQL は厳密は型システムを提供するため、クライアントとサーバ間でデータの一貫性を保つことできる。

GraphQL でデータを取得する際に使用する。

一番シンプルなクエリで以下は、ユーザの一覧を取得するクエリとなっている。 user というフィールドのプロパティとして name, email を指定しているが、クライアント側が他にも取得したいプロパティがあれば随時追加するといった形でオーバーフェッチングを防ぐ。

query {
  user {
    name
    email
    # age   随時追加していく
  }
}

続いてユーザの一覧から任意の id のユーザのみを取得するクエリはこんなかんじ。

フィールドに引数を渡すことが可能で、データのフィルタリングなどに使用できる。

query {
  user(id: 123) {
    id
    name
    email
  }
}

さらにネストされたデータの取得はこんなかんじで記述できる。リレーショナルデータベースでリレーションを持つ子要素のデータを取得したい場合も対応できる。例えばユーザの情報に加えて、そのユーザが投稿した記事の一覧も欲しい場合は以下のように書く。

query {
  user(id: 123) {
    id
    name
    posts {
      title
      description
    }
  }
}

GraphQL で共通するものをまとめて再利用可能にする機能。任意の型に対して定義でき、Query の中で JavaScript のスプレッド構文で利用できる。

fragment UserName on User {
  firstname
  lastname
}

query {
  user {
    id
    email
    ...UserName
  }
}

GraphQL でデータを作成、更新および削除する際に使用する。Query と同様にフィールドに引数を渡すことが可能。

mutation {
  createUser(data: { name: "John", email: "[email protected]" }) {
    id
    name
    email
  }
}

WIP

WIP

概要をざっくり知ることができたので、引き継きインプットをしながら何か動くものを作りつつ理解をふかめていきたい。直近は以下のことを演る予定なので、またアップデートがあれば本サイトに記事を書こうと思う。