WP GraphQL

NextJS

前提知識：ヘッドレスCMSとは

ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されている

CMSでテキストや画像などのデザインを作った後、それをNext.jsなどでHTMLファイルに変換し、

別のバックエンドサーバーにファイルを保管する仕組み

GraphQLとは

GraphQL＝APIのQueryLanguage

クエリは問い合わせという意味であり、

GraphQLはAPIでアプリからデータを問い合わせ（取得）するための言語である

※APIとはレストランにおけるウェイターのこと。お客【クライアント）から注文を受けて、厨房（アプリ）にそれを伝えて、厨房でできた料理をお客に届ける。GraphQLとは、ウェイターがどういう風に動いてほしいか指示するための言語

WP GraphQLとは

WordPress Rest APIの強化版のプラグイン

REST APIでWordPressのデータをJSON化してもいいけど、

WordPressをヘッドレスCMS化するなら、今はGraphQLが主流らしい

REST APIとGraphQLの違い

GraphQLはquery{} をカスタマイズすることで、必要なデータのみを取得することができる。

REST APIは不必要なデータまで取得してしまう

なぜWP GraphQLを使おうと思ったか

microCMSは無料だとデータ転送量20GBの制限があり、月額5000円課金しても月額200GBしか転送できない

自分の画像動画サイトは先月2万GBあったので、サイト利用者が増えてきたら200GBじゃ足りないなと思い、なるべく安く済ませたいなと調べてたらWP GraphQLに行き着いた

使い方

プラグインをインストールしたらGraphQL IDEというものがWordPress管理画面に表示される

GraphQL IDEのQuery Composerを開いて、左のメニューからposts > edges > node をチェックする

その中で取得したい項目（タイトルや内容、アイキャッチ画像やスラッグ等）を選ぶ

そして右上の再生ボタンを押すとJSON形式でデータを取得できる

（https://zenn.dev/fbd_tech/books/519201590c4e98/viewer/6f3693）

Next.js側でWordpressのデータを取得する

（https://neightbor.jp/blog/nextjs-and-wordpress）

（https://kumatech-lab.com/wpgraphql）

純粋なGraphQLでデータ取得

（https://www.youtube.com/watch?v=u8vD2NESjC0）

BACK