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-sharp
gatsby-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 site
                  5000,
          },
        },
      },
    },
  ],
}

データを反映させたページを作成するため、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 posts
  const {
    data: {
      allWpPost: { nodes: allPosts },
    },
  } = await graphql(`
    query {
      allWpPost {
        nodes {
          id
          uri
        }
      }
    }
  `)

  const postTemplate = path.resolve(`./src/templates/post.js`)

  allPosts.forEach(post => {
    createPage({
      // will be the url for the page
      path: post.uri,
      // specify the component template of your choice
      component: 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 {
      content
      uri
      title
    }
  }
}

./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 {
          content
          uri
          title
          id
        }
      }
    }
  `)
  
  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からデータを引っ張ってこれることがわかりました！