GraphQL
FacebookがRESTの課題を解決するために開発したAPIクエリ言語。クライアントが必要なデータの形を宣言的に指定して取得でき、オーバーフェッチ・アンダーフェッチを解消する。
GraphQLとは?
GraphQLは、FacebookがRESTの課題を解決するために開発したAPIのクエリ言語・ランタイムです。2015年にオープンソース化され、現在はGraphQL Foundationが管理しています。
RESTとの主な違い
| 項目 | REST API | GraphQL |
|---|---|---|
| エンドポイント | リソースごとに複数 | 通常1つ(/graphql) |
| データ取得 | サーバーが決める | クライアントが指定 |
| オーバーフェッチ | 起きやすい | 起きない |
| アンダーフェッチ | 複数リクエストが必要 | 1リクエストで完結 |
| 型システム | なし(OpenAPIで補完) | スキーマで型定義必須 |
GraphQLクエリの例
query {
user(id: "1") {
name
email
posts {
title
publishedAt
}
}
}
必要なフィールドだけを指定して取得できます。
主な実装
| 種別 | 代表的なライブラリ |
|---|---|
| クライアント | Apollo Client, urql |
| サーバー(Node.js) | Apollo Server, Pothos, Nexus |
| スキーマファースト | graphql-tools |
まとめ
GraphQLは複雑なデータ要件を持つアプリに有効ですが、単純なCRUDにはREST APIの方がシンプルです。BFFパターン(Backend for Frontend)でGraphQLを採用するケースが増えています。
関連する用語 (プログラミング)
全33件を見るJAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。
SSG(静的サイトジェネレーター)
ビルド時にすべてのページをHTMLとして事前生成する手法。サーバーが不要なため高速・安全・低コストで、ブログ・ドキュメントサイト・ランディングページに最適。
ヘッドレスCMS
表示用フロントエンド(ヘッド)を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
PWA(プログレッシブウェブアプリ)
Service WorkerやWeb App Manifestを使い、Webアプリにネイティブアプリに近い体験を提供する技術。オフライン動作・ホーム画面への追加・プッシュ通知が実現できる。
SSR(サーバーサイドレンダリング)
Webページをサーバー側でHTMLとして生成してからクライアントに送信する手法。SPAのSEO問題を解決し、初期表示を高速化できる。Next.js・Nuxt.jsで実装されることが多い。
IT用語: クロージャ(Closure)とは|関数が変数を「覚える」仕組み
関数が定義された時点のスコープの変数を参照し続けるクロージャの仕組みとカウンターなどの実用例を解説。