GraphQLの使ってみる！

そもそもGraphQLってなんやねんってところから理解したくなる。

どうやらFacebookが作ったもので2015年に無料でみんなが使えるようになったもの（オープンソース）みたいですね。

REST APIでは 「欲しいデータだけ取るのが難しい」 という問題に対して、生まれたのが GraphQLって感じのようです。

Graphはグラフ構造（ネットワークのようなデータのつながり） ➡️ まさにFacebookの友達の繋がりのようなもの

QLは「クエリ言語（Query Language）」 の略で、クエリは「データを取ってきて！」 という命令のことですね。

実際にヘッドレスWord Pressのために使ってみる

たとえば、投稿した記事のタイトルだけを一覧で表示する場面で使いたい時はこのようにデータを取得できます。

  {
    posts { 
      nodes {
        title
        databaseId
        date
      }
    }
  }

JavaScript

このクエリは

posts（投稿情報が入った封筒入れ）から
nodes（投稿情報が入った封筒）を取り出して
その１つ１つからタイトル、ID（databaseIdは”213″のような数値）、投稿日を取ってこい

って感じになるようです。

そのため、実際にデータベースサーバから取ってくる情報はタイトルとIDと投稿日だけ。

REST APIだと投稿の中身をぜ〜んぶ取ってくるので、中身の文章、著者、コメントも全部取ってきてサーバとの通信が大変になっちゃう。

実際にNext.jsで使うには

Next.jsなどJavaScriptでGraphQL使う際には、次の手順で使います。WordPress上の設定は後述。

まずはデータベースとの接続したマシン（インスタンス）を作ります。

マシンの雛形をnpmでインストール（ターミナルで実行）

import { ApolloClient, InMemoryCache } from "@apollo/client";

JavaScript

次に、マシンの設定を入力（js/tsファイルに記述）

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_WORDPRESS_API_URL + "/graphql",
  cache: new InMemoryCache(),
});

export default client;

JavaScript

⬆️ ApolloClientマシン（クラス）に以下の設定をしている

マシン名：client
uri：あなたのWordPressのgraphqlの接続先（後述）
cache設定：このファイルを実行するPCのメモリにキャッシュを残すかどうか（InMemoryCacheはアプリを閉じるまでキャッシュを残す）
*VercelにデプロイするならVercelのサーバのメモリ

実際にデータを取得が必要な場所で、clientマシンを使ってクエリを実行

import client from "@/lib/apolloClient"; //上記のマシンを読み込み
import { gql } from "@apollo/client"; //JS上でクエリが使えるように、gqlを使えるように読み込む



const { data } = await client.query({
    query: gql`
  query {
    pages {
      nodes {
        slug //この場合はslug(URLの最後の部分)を取得
      }
    }
  }
`,
  });

JavaScript

⬆️こうすると以下のようなオブジェクトを{ data }（分割代入）で取得。（data定数にpages以下が格納される）。nodesに配列で入っているため、繰り返し処理もしやすい！

{
  "data": {
    "pages": {
      "nodes": [
        { "slug": "home" },
        { "slug": "about" },
        { "slug": "contact" }
      ]
    }
  }
}

JavaScript

とこんな感じです。

WordPressの設定

WordPressではWPGraphQLのプラグインのインストールが必要。

そしてApolloClientマシン（クラス）に設定したURIには、WPGraphQLのプラグインの設定画面からエンドポイントを確認して、そのURLを入れるようにしてください。

以上です！