GatsbyをWebhookからビルドする際に、自動でキャッシュをクリアする

ベルリンオフィスの小西です。

Gatsby CloudはWebhookによるビルドをサポートしていますが、ビルドを高速化する仕組みとの兼ね合いで、思った通りの挙動をしないことがあります。

Gatsby Cloudのビルド時にキャッシュが残る

Gatsby Cloudによるビルドでは、キャッシュを使ってビルド処理の高速化を行っています。

時折問題となるのが、詳細ページは更新されたけど、一覧ページが更新されないというようなケースです。

解決策: POSTリクエストにヘッダーを追加する

Webhookによるビルドでは、Gatsbyのダッシュボードで発行されるエンドポイント（例: https://webhook.gatsbyjs.com/hooks/data_source/publish/45fw23eb-ac26-4dg0-8511-4a682ac8ff92）にPOSTリクエストを投げますが、下記の変更を行うことで、リクエスト時に自動でキャッシュをクリアしてからビルドを行うことが可能です。

• Webhookを別のエンドポイントに変更する: https://webhook.gatsbyjs.com/hooks/builds/trigger/:YOUR_SITE_ID
  • 例: https://webhook.gatsbyjs.com/hooks/builds/trigger/45fw23eb-ac26-4dg0-8511-4a682ac8ff92

• Webhookを叩くPOSTリクエストで、ヘッダーを指定する: 'x-cache': 'false'

Contentfulでの設定例

例えば、Contentfulと連携している場合は、下記の画面から設定可能です。

ダッシュボード > Settings > Webhooks

Preview Buildsでも利用可能

Gatsbyのプレビュービルドでもほぼ同様の設定でキャッシュを消してビルドできるようになりました。

上記で紹介した設定に加え、リクエストヘッダーに下記を付与します。

‘x-runner-type’: ‘PREVIEW’

注意: Cloud Builds 機能をフル活用できないかも

Gatsbyには Cloud Builds というビルドを高速化するオプションがあります（ビルド時に毎回初期化しなくなる）。

この機能は前回ビルド時からのキャッシュを使うため、この記事で紹介した毎回のビルド時のキャッシュクリアを行う場合、Cloud Buildsのメリットを最大限活かせなくなる可能性がある、とのことでした。

参考

• https://gatsby.canny.io/gatsby-cloud/p/allow-option-to-clear-cache-on-every-build