WordPressをヘッドレスCMSとして活用すると、使い慣れた管理画面でコンテンツを管理しながら、フロントエンドは任意の技術で自由に構築できます。
この構成で特に便利なのがWPGraphQLプラグインです。このプラグインを使えば、REST APIよりも効率的にデータを取得でき、必要な情報だけを柔軟に取得できます。WPGraphQLプラグイン
https://www.wpgraphql.com

Contents
GraphiQL IDE
GraphiQL IDEはGraphQLクエリを管理画面上でテスト実行できる機能です。
- 左側の「Query Composer」に取得できるデータの一覧が並んでいます
- 中央が「クエリ入力欄」です「Query Composer」にチェックを入れると自動で追加されます
- 右側がWordPressから返ってきたデータで、クエリ入力欄のうえの「▶」ボタンを押すと出力されます

例)
投稿一覧を取得(タイトル+スラッグ)
query {
posts(first: 5) {
nodes {
title
slug
}
}
}
↓結果
{
"data": {
"posts": {
"nodes": [
{ "title": "お知らせ1", "slug": "news1" },
{ "title": "お知らせ2", "slug": "news2" }
]
}
}
}
エンドポイント
WPGraphプラグインをインストールすると自動でエンドポイントが生成されます
http://あなたのサイトのドメイン/graphql
RESTとGraphQLの違い

項目 | REST | GraphQL |
---|---|---|
エンドポイント | 複数(リソースごと) | 単一(/graphql ) |
データ取得 | サーバーが構造を決定 | クライアントが必要な項目を指定 |
HTTPメソッド | GET, POST, PUT, DELETE | 主にPOST |
過不足 | 過剰/不足が起きやすい | 必要なデータだけ取得 |
複数リソース取得 | 複数回リクエスト必要 | 1回で取得可能 |
学習コスト | 低い | 高い |
キャッシュ | HTTPキャッシュが使える | 工夫が必要 |
例
REST
GET /users/123 → ユーザー情報(全項目)
GET /users/123/posts → 投稿一覧(全項目)
GraphQL
POST /graphql
{ user(id: 123) { name, posts { title } } }
→ 必要な項目だけ1回で取得
WordPressとNext.jsでヘッドレスCMSを開発する場合
generateStaticParams()でページ生成
https://nextjsjp.org/docs/app/api-reference/functions/generate-static-params
