GraphQLでカスタムフィールドを取得する

GraphQLでカスタムフィールドを取得できるように設定する

WordPressの投稿に関連するカスタムフィールドをGraphQLから取得できるように設定していきます。

カスタムフィールドはプラグイン「ACF（Advanced Custom Field）」を使っていることを想定し、さらにGraphQLを使うための準備としてWordPressにはプラグイン「WPGraphQL」があらかじめインストールされていることを前提とします。

今回は以下の流れで進めていきます。
最終的にはWordPressと連携したGatsbyJSのGraphQLから、投稿と関連するカスタムフィールドを取得できるか確認します。
（今回は解説用でGatsbyJSを使いますが、GraphQLを使う他のシステムでも同様の手順でカスタムフィールドを投稿できます。）

1. GraphQLからカスタムフィールドを取得するプラグインをインストールする
2. プラグイン「WPGraphQL」のGraphiQL IDEでカスタムフィールドを取得する
3. GatsbyJSのGraphQLからカスタムフィールドを取得する

カスタムフィールドを取得するプラグインをインストールする

GraphQLでカスタムフィールドを取得できるようにWordPress側の設定を行います。
すでにプラグインは「WPGraphQL」がインストールされていますが、もう1つ「WPGraphQL for Advanced Custom Fields」というプラグインを新しくインストールします。

「WPGraphQL for Advanced Custom Fields」はWPGraphQLにACFを追加するためのプラグインです。
WPGraphQLのサイトにもページがあります。
WPGraphQL for Advanced Custom Fields

こちらのプラグインですが、WordPressの管理ページにある「プラグインを追加」で検索をしても登録されていないからか表示されません。
そのため、上記のサイトより「Download the Plugin」ボタンを押して手動でインストールしていきます。

ボタンを押すと、Githubのページが開きます。
こちらのページのドキュメントではComposerを使ったインストール方法が書かれていますが、WordPressのプラグインのフォルダにファイルを設置すればインストールできるため、ここではあえてZIP形式でダウンロードして手動で設置します。

以下のように緑色の「Code」ボタンを押し、開いたメニューから「Download ZIP」ボタンを押してください。
プラグインのコードが入ったファイルが一式ダウンロードされます。

「wp-graphql-acf-develop.zip」という名前のzipファイルがダウンロードされるので解凍します。
任意ですが、分かりやすいようにフォルダ名を「wp-graphql-acf」に変更しておきます。

続いて、「wp-graphql-acf」フォルダをWordPressのプラグインのフォルダに設置します。

WordPressの管理ページより、「プラグイン」から「インストール済みプラグイン」を選択してください。
プラグインの一覧に「WPGraphQL for Advanced Custom Fields」が新しく表示されていたらインストール成功です。
「有効化」を押して、プラグインを有効化してください。

プラグインを有効化すると、カスタムフィールドの設定ページにGraphQLの設定欄が表示されるようになります。

WordPressの管理ページから「カスタムフィールド」を選び、設定したいフィールドグループを選択して「フィールドグループを編集」を開いてください。

編集ページの下部にある「GraphQL」欄のところまでスクロールしてください。
ここで、「Show in GraphQL」を「はい」に設定し、すぐ下にある「GraphQL Field Name」の項目名を入力してください。
この項目名はGraphQLでデータを取得するときに使用します。

「GraphQL Field Name」より下の設定は任意になりますが、「Manually Set GraphQL Types for Field Group」を「はい」に設定するとカスタムフィールドを表示する項目名を個別に設定することができます。

ここでは例として、Field Nameに「commonACF」と設定します。
GraphQL欄の設定を全て入力したら、ページ上部の右側にある「更新」ボタンを押して設定を保存してください。
同様の設定を、取得したい全てのフィールドグループに反映してください。

GraphiQL IDEでカスタムフィールドを取得する

WordPress側のGraphQLの設定ができたところで、WPGraphQLのクエリエディタ「GraphiQL IDE」（以下、IDE）を使ってカスタムフィールドのデータがちゃんと取得できるかを確認していきます。

WordPressの管理ページより上部メニューから「GraphiQL IDE」を押すか、左メニューの「GraphQL」から「GraphiQL IDE」を押してIDEを開いてください。
IDEが表示されてから、もし以下のように左側の「Query Composer」が表示されていなかったら上部にある「Query Composer」ボタンを押して表示してください。

QueryComposerから、取得したい投稿データを「htmlCssPosts > edges > node」と選択し、先ほどカスタムフィールドに設定したField Nameの「commonACF」が表示されていることを確認します。
続いて、commonACFを選択して取得したいカスタムフィールドを全て選択します。
（ここではpointsとtableOfContentsを選択していますが、ご自身の環境にあわせてカスタムフィールド名は置き換えてください）

Query Composerから取得したいデータの項目を選択すると、真ん中の欄にクエリが作成されます。
上部メニューの右向き矢印ボタンを押すと、このクエリを実行して取得したデータを1番右側の欄で確認することができます。

投稿に設定されたカスタムフィールドの値が表示されたら、WordPress側のGraphQLの設定は正常に設定できています。

GatsbyJSのGraphQLからカスタムフィールドを取得する

WordPressの外側からGraphQLでカスタムフィールドを取得できるか確認するために、GatsbyJSからGraphQLを使ってカスタムフィールドを取得して表示してみます。

今回はローカル環境で動いているWordPressとGatsbyJSが連携していることを想定し、GatsbyJSはコマンド「#gatsby develop」を実行して開発用サーバーを稼働させていることとします。
こちらのサーバーから、標準で用意されているGraphQLのIDEを使ってカスタムフィールドを取得できるか確認します。

GatsbyJSのIDEはルートURLに「___graphQL（アンダースコアは3つ）」を付けると開くことができます。
例えば、ローカルのGatsbyJSのURLが「http://localhost:8000」だとすると、IDEのURLは「http://localhost:8000/___graphQL」になります。

IDEは先ほどWordPressのWPGraphQLで使用したIDEと同じものに見えますが、先ほど「QueryComposer」だったボタンのラベルが「Explorer」になっているなど狛枚部分で違いがあります。

また、クエリの項目名もGatsbyJSの設定によって異なることがある点に注意してください。
取得できるデータ自体は同じ内容です。

以下の例では、「Explorer」から投稿と、関連するカスタムフィールドとしてcommonACFを選択し、クエリを実行した結果になります。

こちらの例ではGraphiQLでカスタム投稿からid、title（タイトル）、excerpt（概要）、uri（投稿のURL）に加えて、関連するカスタムフィールドのcommonACFよりtableOfContentsとpointsを取得するクエリを作成して実行しています。
投稿のデータと合わせて、関連するカスタムフィールドの値もしっかり取得できることが確認できました。

IDEで作成したクエリはGatsbyJSの中で使用することができます。
以下のblog.jsに作成したクエリを貼り付けて、簡易的に投稿の一覧を表示してみます。
以下の赤字の箇所がGraphQLのクエリになります。

blog.js

import * as React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'


const BlogPage = ({data}) => {
	return (
		<Layout pageTitle="My blog posts">
			{
				data.allWpHtmlCssPost.edges.map(({node}) => (
					<article key={node.id}>
						<h2>{node.title}</h2>
						<p dangerouslySetInnerHTML={{ __html: node.excerpt}} />
						<p dangerouslySetInnerHTML={{ __html: node.commonACF.points}} />
					</article>
				))
}
		</Layout>
	)
}


export const query = graphql`
	query {
		allWpHtmlCssPost {
			edges {
				node {
					id
					title
					excerpt
					uri
					commonACF {
						tableOfContents
						points
					}
				}
			}
		}
	}
`

export default BlogPage

blog.jsのページを開いてGraphQLを実行すると、以下のように投稿のタイトル（title）と概要文（excerpt）がズラッと表示されます。
（ここではGraphQLでデータを取得できるか確認することが目的のため、GatsbyJSのコードの解説は割愛します。）

無事にWordPressの外側からもGraphQLを使ってカスタムフィールドを取得できることを確認できました。
以上、GraphQLでカスタムフィールドを取得する方法についてでした。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。