2020-11-05

Craft CMS のGatsby Helper プラグインと Gatsby の gatsby-source-craft プラグインを試してみる #craftcms

Craft CMS と Gatsby を連携しやすくする Craft CMS 用の Gatsby Helper プラグインと Gatsby 用の gatsby-source-craft プラグインが公開された。

Gatsby Helper
https://plugins.craftcms.com/g...
craftcms/gatsby-source-craft: Gatsby source plugin for Craft CMS
https://github.com/craftcms/ga...

お試しで今作っているのは gatsby-source-graphql を使って試していた。

gatsby-source-graphql | Gatsby
https://www.gatsbyjs.com/plugi...

ので、試しにこのプラグインを使ってみる。

Craft CMS 側にプラグインをインストール

composer require craftcms/gatsby-helper

composer で追加したら管理画面からインストールする。

プラグインをインストールしたら GraphQL のスキーマの設定を追加する

20201105 0922

Gatsby 側の準備

とりあえず繫がることを試すだけにしてみる

Quick Start | Gatsby
https://www.gatsbyjs.com/docs/...
gatsby new gatsbycrafttest https://github.com/gatsbyjs/gatsby-starter-hello-world

cd gatsbycrafttest

gatsby develop

で GraphiQL が立ち上がる。

20201105 0843

gatsby-source-craft プラグインを追加する。

Gatsby のプロジェクトのところで npm install で追加する。

npm install --save-dev gatsby-source-craft

追加したら .env.development あたりに Craft CMS の GraphQL のエンドポイントとTOKENをセットする

CRAFTGQL_TOKEN=hogehoge
CRAFTGQL_URL=https://example.com/api

Craft CMS 側での GraphQL のエンドポイントの設定はこの辺。

GraphQL API | Craft CMS Documentation | 3.x
https://craftcms.com/docs/3.x/...

.env ファイルを使えるように gatsby-config.js に以下を追加する。

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

これで再度 Gatsby をうごかしたらこんな感じで Craft CMS のデータを GraphiQL で確認できた。

20201105 0850

gatsby-source-graphql でやるよりはいくぶん楽なのかな・・・・？

次は今作ってみてるものをこちらに置き換えることでの違いを見てみようと思う。

いずれ Craft Cloud がでてきて Gatsby Cloud あたりと連携して静的生成もするとかそういう方向になっていくのかなー。

Next.js とかで SSR するのがいいのか、SSRするくらいなら別に Twig で普通に処理した方がいいのではないかとかとか。
SSG も Gatsby でやるのも悪くないけど、 Blitz プラグインとかで静的キャッシュを CDN に置くとかでもいいだろうし。
選択の幅が広がるというのはありがたい（し、悩ましい）。

参考