【WordPress】WPGraphQLプラグイン

WordPressをヘッドレスCMSとして活用すると、使い慣れた管理画面でコンテンツを管理しながら、フロントエンドは任意の技術で自由に構築できます。

この構成で特に便利なのがWPGraphQLプラグインです。このプラグインを使えば、REST APIよりも効率的にデータを取得でき、必要な情報だけを柔軟に取得できます。WPGraphQLプラグイン
https://www.wpgraphql.com

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の違い

項目RESTGraphQL
エンドポイント複数（リソースごと）単一（/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