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 のスキーマの設定を追加する
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 が立ち上がる。
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 で確認できた。
gatsby-source-graphql
でやるよりはいくぶん楽なのかな・・・・?
次は今作ってみてるものをこちらに置き換えることでの違いを見てみようと思う。
いずれ Craft Cloud がでてきて Gatsby Cloud あたりと連携して静的生成もするとかそういう方向になっていくのかなー。
Next.js とかで SSR するのがいいのか、SSRするくらいなら別に Twig で普通に処理した方がいいのではないかとかとか。
SSG も Gatsby でやるのも悪くないけど、 Blitz プラグインとかで静的キャッシュを CDN に置くとかでもいいだろうし。
選択の幅が広がるというのはありがたい(し、悩ましい)。
参考
- Gatsby 環境変数 注意点 | Ryusou Blog
https://ryusou.dev/posts/gatsb...
関連記事
- 2021/9/15 Craft CMS を Headless CMS として利用して Next.js でコンテンツをプレビューする #craftcms
- 2021/7/28 Craft CMS を Headless CMS として利用して Gatsby Cloud でプレビューする #craftcms
- 2021/8/31 Craft CMS でステータスが無効のエントリを Gatsbyjs 側でプレビューする #craftcms
- 2021/8/20 Gatsby source plugin for Craft CMS 2.0.3リリース #craftcms
- 2021/7/21 Craft CMS の Blog starter にある Gatsby の Headless 周りを試す #craftcms
- 2021/1/2 Gatsby の File System Route API を使って Craft CMS の詳細ページを静的出力してみる #craftcms
- 2020/12/4 Craft CMS と Gatsby をつかった静的ファイル生成:詳細ページの生成 #craftcms
- 2020/12/3 Craft CMS と Gatsby をつかった静的ファイル生成:一覧用のデータ取得 #craftcms