こんにちは、株式会社カミナシのエンジニア @tomiです。

前回、「サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル」という記事を書き、たくさんの反響をいただきました。ありがとうございます。

今回は、Gatsby・Wordpress・Netlifyで開発したときの躓きについての話で、似た構成で開発される方の役に立つと思います。

逆に、違う構成の場合は、全くためにならない内容となっていますので、ご容赦を。

開発していて躓いたところ

Docker上でWordpressからGraphQLでの記事の取得がエラーになる
WordpressをGraphQLで読み込む際プラグインのバグがある
Gutenbergのブロック作成に手こずった
GutenbergブロックのTypeScriptの型指定に困った
Netlifyでbuildエラー
Netlifyにネームサーバーを変更せずにルートドメインを繋げる

各躓きの解消方法

① Docker上のWordpressから記事の取得がエラーになる

Dockerで開発環境を整備している際、以下のようなエラーが発生した。

error  gatsby-source-wordpress  

Unable to connect to WPGraphQL. 

Received HTML as a response. Are you sure http://wordpress/graphql is the correct URL?

Wordpressへの接続エラーが発生してしまった。

原因は、WordpressのURL設定のアドレスに強制的にリダイレクトされるため

Wordpressの仕様として、サイトアドレスに設定されているURLにリダイレクトされる。

f:id:kaminashi-developer:20201120163336p:plain

f:id:kaminashi-developer:20201120163331g:plain

↑ 127.0.0.1:8000にアクセスするが、localhost:8000にリダイレクトされる

そのため、http://wordpress/graphqlから取得しようとするが、localhost:8000にリダイレクトされてしまう。

Gatsbyコンテナからlocalhost:8000にアクセスしてもWordressコンテナにアクセスすることはできないので、接続エラーが発生してしまった。

f:id:kaminashi-developer:20201120221138p:plain

解決方法

http://wordpress/graphqlでアクセスできるように、docker-compose.ymlに以下の設定を追加しました。

wordpres:
  environment:
    WORDPRESS_CONFIG_EXTRA: |
      define('WP_SITEURL', 'http://' . $$_SERVER['HTTP_HOST']);
      define('WP_HOME', 'http://' . $$_SERVER['HTTP_HOST']);

この設定によって、Wordpressにアクセスした際のURLがサイトアドレスとなる。

f:id:kaminashi-developer:20201201011853p:plain

このハックはWordpressをDockerで起動する際によく使いそうなので、覚えておくと便利そう。

② WordpressをGraphQLで読み込む際プラグインのバグがある

gatsby-source-wordpress-experienceはまだまだバグがありそうです。

gatsby-source-wordpressというのが今のメインバージョンだが、もうしばらくすると破壊的変更が来るので、多少のリスクは承知で次のバージョンであるgatsby-source-wordpress-experienceを使うことを選択しました。

今回引っかかったのは、カテゴリの小カテゴリが取得できないというバグ。（今は解決済み） https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/issues/145

開発を進めていくうちに、あれ？うまく取得できない・・・みたいなことがある。

ちなみに、Gutenbergブロックの取得がデプロイするとき取得できず、たまにデプロイエラーが発生する。

f:id:kaminashi-developer:20201120223419p:plain

発生条件は不明だが、WP管理画面から「WP GraphQL Gutenberg」プラグイン設定ページのUpdateボタンを押してからデプロイすると治る。。

f:id:kaminashi-developer:20201120223315p:plain

③ Gutenbergのブロック作成に手こずった

Gutenbergブロックを自作しようと思っているなら、覚悟を持って取り組みましょう！

とりあえずドキュメントが少なすぎる！

必読なのは、公式のチュートリアル。
https://ja.wordpress.org/team/handbook/block-editor/tutorials/create-block/

これでGutenbergブロックを作るプラグインを作成する流れを掴むことができます。

次にブロックの設定周りはこちらのドキュメントを何度も見ました。 https://ja.wordpress.org/team/handbook/block-editor/developers/richtext/

ただし

リスト形式のブロックを作りたいだとか、
投稿タイプのテンプレートにブロックを配置しておきたいとか、

基本的な部分はドキュメントに掲載されているが、実装されているすべての機能のドキュメントが見当たらなかった。

なので、やりたいことが実現できそうなコンポーネントを、こちらのメニューの一覧から探す。
https://developer.wordpress.org/block-editor/components/

目的のコンポーネントぽいな〜と思っても、このドキュメントには詳細は書かれていないので、コンポーネントのリポジトリを読み漁る！ https://github.com/WordPress/gutenberg/tree/master/packages/components/src

ひたすらトライ＆エラーを繰り返して感覚を掴むしかありません！経験あるのみ！

④ GutenbergブロックのTypeScriptの型指定に困った

WordpressからGraphQLで取得したデータもgatsby-plugin-typegenで型は自動生成できてとても便利だが、特定のブロックにだけあるプロパティを使うときの型指定が複雑になってしまった。

以下の画像のようにblocksの中に多数のブロックの型が含まれている。

f:id:kaminashi-developer:20201120230953p:plain

セミナーの開催日時をGutenbergブロックから抽出しようとすると、日付のプロパティはSeminarGuidelineDateBlockTypeというブロックの型にしか含まれていないので、blocksの数ある中から型を指定しなければならなかった。

その型定義のために、コードが複雑になってしまった。

↓ SeminarGuidelineDateBlockTypeを指定するためだけに書いたコード

f:id:kaminashi-developer:20201120233525p:plain

⑤ Netlifyでbuildエラー

f:id:kaminashi-developer:20201130165721p:plain

4:26:04 PM: error There was an error in your GraphQL query:
4:26:04 PM: Unknown type "WpSeminarGuidelinesBlock". Did you mean "WpSeminarFlowBlock", "WpSeminarFieldsEnum", "WpSeminarFilterInput", "WpSeminarConnection", or "WpSeminarGroupConnection"?

上記画像のようにビルドするとエラーがでることがありました。

エラー内容から察するに、自作ブロックがGraphQLで見つけられないようです

コードは以下のように、blocksから自作ブロックを取得しているところが原因でした。

export const wpSeminarEdgeFields = graphql`
  fragment WpSeminarEdgeFields on WpSeminarEdge {
    node {
      blocks {
        name
        ... on WpSeminarGuidelinesBlock {
          innerBlocks {
            name
            ... on WpSeminarGuidelineBlock {
              attributes {
                content
                label
              }
              innerBlocks {
                name
                saveContent
                ... on WpSeminarGuidelineDateBlock {
                  attributes {
                    endAt
                    startAt
                  }
                }
              }
            }
          }
        }
      }
      featuredImage {
        node {
          localFile {
            childImageSharp {
              fixed(width: 1200, height: 628, cropFocus: CENTER) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
      id
      slug
      title
    }
  }
`

解決方法

gatsby-node.jsで生成するページを公開記事だけに絞り込むことで、解決できました。

  const createSeminar = async () => {

    // ...

    const result = await graphql(`{
      seminar: allWpSeminar(filter: { status: { eq: "publish" } }) {  // <--ここ
        pageInfo {
          totalCount
        }
        edges {
          node {
            slug
          }
        }
      }
    }`)

   // ...

    seminars.forEach((edge, i) => {
      createPage({
        path: `/seminar/${decodeURIComponent(edge.node.slug)}/`,
        component: showTemplate,
        context: {
          slug: edge.node.slug,
        },
      })
    })
  }