GatsbyJSは、いろいろなCMSと繋いで、データをとってくることができます。これを用いる理由として、GatsbyJSのGraphQLシステムを使いたい、カスタマイズ性を向上させたい、普段から使っているCMSでコンテンツ管理したいなどが挙げられます。
GatsbyJS公式サイトによると、CMSだけではなく、shopifyやStripe、Okta、algoliaなどといったEコマース、決済、認証、検索系のサービスと連携させることができるようです。ドキュメントもかなり充実しています。


今回はGatsbyJSとWordpressを繋いでみようと思います。
プラグインのインストール
使うプラグインは、以下の二つです。
- WPGraphQL
- WP Gatsby


これらをインストールし、有効化しておきます。
パーマリンク設定で基本以外にしておきます。
GatsbyJSのセットアップ
新規のGatsbyJSプロジェクトをセットアップします。以下の空のスターターキットが用意されているので、
https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-hello-world
以下のコマンドで作成しましょう。
gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
GatsbyJSのプラグインをいくつか追加しておきます。
yarn add gatsby-source-wordpress gatsby-plugin-sharpgatsby-transformer-sharp gatsby-core-utils
gatsby-config.jsに以下のコードを貼り付けます。以下のコードの中の、http://localhost:8000/graphqlというurlがwordpressのgraphqlエンドポイントとなります。
module.exports = {plugins: [{resolve: `gatsby-source-wordpress`,options: {url:// allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.process.env.WPGRAPHQL_URL || `http://localhost:8000/graphql`,schema: {//Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".typePrefix: `Wp`,},develop: {//caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.hardCacheMediaFiles: true,},type: {Post: {limit:process.env.NODE_ENV === `development`? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).50: // and we don't actually need more than 5000 in production for this particular site5000,},},},},],}
データを反映させたページを作成するため、gatsby-node.jsに以下のコードを貼り付けます。
const path = require(`path`)const { slash } = require(`gatsby-core-utils`)exports.createPages = async ({ graphql, actions }) => {const { createPage } = actions// query content for WordPress postsconst {data: {allWpPost: { nodes: allPosts },},} = await graphql(`query {allWpPost {nodes {iduri}}}`)const postTemplate = path.resolve(`./src/templates/post.js`)allPosts.forEach(post => {createPage({// will be the url for the pagepath: post.uri,// specify the component template of your choicecomponent: slash(postTemplate),// In the ^template's GraphQL query, 'id' will be available// as a GraphQL variable to query for this post's data.context: {id: post.id,},})})}
./src/templates/post.js に以下のコードを貼り付けます。
import React from "react"const Post = () => {return (<div><div></div></div>)}export default Post
以下のコマンドを実行し、開発環境を立ち上げます。
gatsby develop
http://localhost:8001/___graphql にアクセスし、以下のクエリを実行すると
query MyQuery {allWpPost {nodes {contenturititle}}}

./src/templates/post.js を以下のように変更します。useStaticQueryを使って上でみたクエリを実行し、その取得データが変数dataに入ってきます。
import React from "react"import { useStaticQuery, graphql } from "gatsby"const Post = () => {const data = useStaticQuery(graphql`query MyQuery {allWpPost {nodes {contenturititleid}}}`)return (<div>{data &&data.allWpPost.nodes.map((post) => {return (<div key={post.id}><h1>{post.title}</h1><div dangerouslySetInnerHTML={{ __html: post.content }} /></div>)})}</div>)}export default Post
最後に、http://localhost:8001/hello-world にアクセスすると以下のような投稿が表示されています。

必要なプラグインとコマンドがわかれば、すぐにwordpressからデータを引っ張ってこれることがわかりました!