GatsbyでWordPress siteのフロントエンドを作ってみる

Gatsybyという静的サイトジェネレーターツールがWordPressサポートらしいという噂を聞いたので、試してみました。

CLIツールのインストール

$ npm install --global gatsby-cli
$ gatsby -v
1.1.58

Version 2がきているみたいですが、安定版優先でv1を使います。

プロジェクトの作成

$ gatsby new YOUR_PROJECT_NAME
$ cd YOUR_PROJECT_NAME

ファイル構成はこんな感じ。SSR用のものもある様子。

$ tree -L 1
.
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── node_modules
├── package-lock.json
├── package.json
├── src
└── yarn.lock

2 directories, 9 files

gatsyby developでローカルでの検証ができる。

 コンテンツをWordPressから取得する

ドキュメントをみる限り、WordPressをデータソースにすることができる様子。ということでやってみましょう。

パッケージのインストール

$ npm install --save gatsby-source-wordpress

gatsby-config.jsの編集

pluginsにデータを投入。

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: `hoge.example.com`,
        protocol: `https`,
        hostingWPCOM: false,
        useACF: true,
      },
    },
    'gatsby-plugin-react-helmet'
  ],
}

GraphQLクエリの発行

データはGraphQLで引く様子。 https://localhost:8000/___graphql にアクセスしてテストします。

全ての投稿を取得するクエリ

query {
  allWordpressPost {
    edges {
      node {
        id
        title
        excerpt
        slug
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
}

viewへの反映

src/index.jsにコードをいれます。export defaultでコンポーネント。graphqlのクエリはexport const XX = graphql~という形で記述します。

import React from 'react'
import Link from 'gatsby-link'

const IndexPage = ({ data }) => {
  console.log(data);
  return (
    <div>
      {data.allWordpressPost.edges.map(({ node }) => (
        <article>
          <h2>{node.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </article>
      ))}
      <Link to="/page-2/">Go to page 2</Link>
    </div>
  )
}

export default IndexPage

export const pageQuery = graphql`
  query MyFiles {
    allWordpressPost {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }
`;

これでOK。

簡単ですね。

この後やること

ここまでは一覧を出すようにしただけなので、個別ページの表示やレイアウトの調整は自分で頑張る必要があります。

とはいえReact SPAを一から作って、GraphQLでWPのデータを取れるようにしてというのを自力でやるよりは簡単ですので、WPサイト構築のショートカット方法の１つとして覚えておくと良さそうかなと思います。

追記：利用の際の注意点

「WPのデータにプラグインなしでGraphQL使えるってどうやってんだろ？」と思って調べて見たところ、gatsbyがソースをビルドするタイミングでWPを総なめしてるだけっぽい様子でした。

ビルドした時に全部処理するスタイルなので、「これでフロントを作っておけば、あとはWP記事更新するだけでOK！」とはならず、都度ビルドする必要がありそうです。

この辺りは「静的サイトジェネレーターがWordPressをデータソースにしましたよ」というスタンス故のものかもしれません。

というわけで自動化したい場合は、WPの記事更新をフックしてTravis / Circle CI / Netlifyあたりのビルドを実行させるようなワークフローをどこかで作る必要がありそうです。みなさん頑張ってください。