GraphQL 素振り

GitHub - ega4432/graphql-todo-app-sample: GraphQL の素振り
GraphQL の素振り. Contribute to ega4432/graphql-todo-app-sample development by creating an account on GitHub.
GitHub - ega4432/graphql-todo-app-sample: GraphQL の素振り favicon github.com
GitHub - ega4432/graphql-todo-app-sample: GraphQL の素振り

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

やること

  • GraphQL
    • 概要
    • REST API との違い
  • その他 GraphQL に関すること

登場人物

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

GraphQL

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

GraphQL | A query language for your API
A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
GraphQL | A query language for your API favicon graphql.org
GraphQL | A query language for your API

GraphQL の特徴

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

Query

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
    }
  }
}

Fragment

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

fragment UserName on User {
  firstname
  lastname
}

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

Mutation

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

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

Subscription

WIP

Apollo

WIP

Next Action

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

参考にしたサイトや資料、ドキュメントなど

Apollo ServerとPrismaではじめるGraphQL API開発入門
この本では、TypeScriptで型安全にGraphQLサーバーを構築する方法をハンズオン形式で学習することができます。 Todoアプリの開発を通して、GraphQLスキーマの扱いやCLIツールの設定方法、TypeScriptのORMであるPrismaの基本的な使用方法、CI/C
Apollo ServerとPrismaではじめるGraphQL API開発入門 favicon zenn.dev
Apollo ServerとPrismaではじめるGraphQL API開発入門
【GraphQL】入門編 ~基礎とQuery / Mutationの書き方~ | Offers Tech Blog
【GraphQL】入門編 ~基礎とQuery / Mutationの書き方~  | Offers Tech Blog favicon zenn.dev
【GraphQL】入門編 ~基礎とQuery / Mutationの書き方~  | Offers Tech Blog
www.udemy.com
www.udemy.com favicon www.udemy.com