React開発者のためのGraphQL基礎

REST は固定された形のエンドポイントを公開します。GET /users/:id は、クライアントが必要としている内容に関係なく、ユーザーオブジェクト全体を返します。GraphQL ではクライアントが必要なフィールドを正確に指定できるため、過剰フェッチ（データが多すぎること）と過少フェッチ（データが足りず、複数のリクエストが必要になること）を解消できます。

1 回の GraphQL クエリで、ユーザー、その投稿、各投稿の作成者を 1 回の往復で取得できます。

すべての GraphQL API は、Schema Definition Language（SDL）で記述されたスキーマによって定義されます。スキーマでは、型とそのフィールド、さらにクライアントが操作できるルートの Query、Mutation、Subscription 型を宣言します。

スキーマはクライアントとサーバー間の契約です。スキーマに合意すれば、フロントエンドチームとバックエンドチームは並行して作業できます。

GraphQL クエリではフィールドを選択します: { user(id: "1") { name email posts { title } } }。ネストされたフィールドをたどることで、1 回のリクエストで関連データを取得できます。エイリアスを使うとフィールド名を変更できます: { me: user(id: "1") { name } }。フラグメントを使うと、複数のクエリでフィールド選択を再利用できます。

変数を使うとクエリを再利用できます: query GetUser($id: ID!) { user(id: $id) { name } }。変数は { id: "1" } のように指定します。

GraphQL スキーマの各フィールドには、サーバー上にリゾルバー関数があります。クライアントが user.name をクエリすると、user リゾルバーがユーザーオブジェクトを取得し、name リゾルバー（またはデフォルトリゾルバー）が name フィールドを返します。

このフィールド単位の解決によって、GraphQL は要求されたデータだけを正確に取得できます。

100 件の投稿一覧をクエリし、各投稿に作成者を含めると、単純な実装では作成者を取得するために 100 回の個別のデータベースクエリが発行されます。この N+1 問題により、最適化されていない GraphQL API は遅くなります。

DataLoader は、リクエストごとのキャッシュとバッチ関数を使ってすべての作成者の検索を 1 回のデータベースクエリにまとめることで、N+1 問題を解決します。

Apollo StudioとGraphQL Playgroundは、GraphQL APIをインタラクティブに探索するためのブラウザベースのUIです。スキーマからフィールドを自動補完し、クエリ結果を表示して、型のドキュメントをインラインで確認できます。

クライアントコードを書く前に、Playgroundを使うのが、見慣れないGraphQL APIを理解する最も速い方法です。

GraphQL APIはイントロスペクションクエリを通じて自身のスキーマを公開します: { __schema { types { name } } }。クライアントはスキーマ自体をクエリして、利用可能な型、フィールド、引数を確認できます。

graphql-codegenなどのコード生成ツールは、イントロスペクションを利用してAPIスキーマに一致するTypeScript型を自動生成します。

GraphQLのMutationはデータを変更します: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }。Subscriptionは永続的な接続（通常はWebSocket）を確立し、更新をプッシュします: subscription { postAdded { id title } }。

3つすべてのルート型（Query、Mutation、Subscription）は、同じフィールド選択構文を使用します。

GraphQLは、複雑でネストされたデータ要件があるアプリケーション、異なるフィールドのサブセットを必要とする複数のクライアント種別（モバイル、Web、TV）、またはエンドポイントのバージョニングよりフィールドの非推奨化が適している急速に発展するAPIで特に力を発揮します。

RESTは、予測しやすくフラットなリソース形状を持つCRUD APIや、ETagとキャッシュヘッダーによる優れたHTTPキャッシュ特性を活用する場合に、よりシンプルです。

Apollo Clientは最も機能が豊富なGraphQLクライアントです。正規化キャッシュ、ローカル状態管理、サブスクリプション、エラーハンドリング用のリンクを備えています。URQLはドキュメントキャッシュとよりシンプルなAPIを持つ、軽量なクライアントです。graphql-requestと組み合わせたReact Queryは、高度なキャッシュ機能を必要としない基本的なquery+mutationに最もシンプルな方法です。

キャッシュ要件に基づいて選択してください。複数のクエリで共有されるエンティティには正規化キャッシュ（Apollo）、独立したクエリにはよりシンプルなドキュメントキャッシュ（URQLまたはReact Query）が適しています。

シンプルなSDLの例: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }。感嘆符はnull不可のフィールドを示します。

このスキーマにより、各型にどのフィールドが存在し、どのクエリを利用できるかをクライアントが正確に把握できるため、型安全なコード生成が可能になります。

RESTとGraphQLの文脈で、「over-fetching」とは何を意味しますか？

GraphQLでは、スキーマで定義されたクエリ言語を使って、クライアントが必要なフィールドだけをリクエストできます（過剰取得や不足取得がありません）。各フィールドにはリゾルバーが応答し、DataLoaderがN+1問題を解決します。イントロスペクションにより、TypeScript型のコード生成が可能になります。Apollo Client、URQL、React Queryが、Reactに対応した主なGraphQLクライアントです。

複雑でネストされた、複数クライアント向けのデータ要件にはGraphQLを、予測しやすい形状のシンプルなCRUDにはRESTを選択してください。