© 2021 Addapter Inc.

BLOG

GatsbyJSとWordPressを繋いでみた

その他2021/06/18
なーこ
画像なし

GatsbyJSは、いろいろなCMSと繋いで、データをとってくることができます。これを用いる理由として、GatsbyJSのGraphQLシステムを使いたい、カスタマイズ性を向上させたい、普段から使っているCMSでコンテンツ管理したいなどが挙げられます。

GatsbyJS公式サイトによると、CMSだけではなく、shopifyやStripe、Okta、algoliaなどといったEコマース、決済、認証、検索系のサービスと連携させることができるようです。ドキュメントもかなり充実しています。

https://www.gatsbyjs.com/plugins/ より引用
https://www.gatsbyjs.com/plugins/ より引用

今回はGatsbyJSとWordpressを繋いでみようと思います。

プラグインのインストール

使うプラグインは、以下の二つです。

  • WPGraphQL 
  • WP Gatsby
WPGraphQL
WPGatsby

これらをインストールし、有効化しておきます。

パーマリンク設定で基本以外にしておきます。

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からデータを引っ張ってこれることがわかりました!

トップへのスクロールボタン