技術書に記載コードのバグに対応しました
Webサイト高速化のための 静的サイトジェネレーター活用入門をベースにしたこのブログですが、カスタマイズをしていく過程でContentfulから記事を取り下げると問題がありました。
その問題とは具体的には、ローカルでエラーが表示されるもののビルドができるけど、Netlifyではビルドに失敗していて、サイトがリリース出来なくて困っていました。
表示されたローカルのエラーログは以下の通り。
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot read property 'length' of null
74 | blogresult.data.allContentfulCategory.edges.forEach(({ node }) => {
75 | const catPostsPerPage = 6 // 1ページに表示する記事の数
> 76 | const catPosts = node.blogpost.length // カテゴリーに属した記事の総数
| ^
77 | const catPages = Math.ceil(catPosts / catPostsPerPage) // カテゴリーページの総数
78 |
79 | Array.from({ length: catPages }).forEach((_, i) => {
File: gatsby-node.js:76:36
TypeError: Cannot read property 'length' of nulllengthがnullとのことです。
Contentfulから記事をほとんど取り下げたため、おそらくはカテゴリーに属した記事が見当たらず、node.blogpostがnullになっていると思われます。
nullならば値を返してあげれば良い
lengthは配列型のプロパティなので、node.blogpostがnullの場合は、空の配列でも返してあげれば良いと思います。
gatsby-node.jsに、以下の通り1行だけ追加して対応しました。
// 追加前
const catPostsPerPage = 6 // 1ページに表示する記事の数
const catPosts = node.blogpost.length // カテゴリーに属した記事の総数
// 追加後
const catPostsPerPage = 6 // 1ページに表示する記事の数
if (!node.blogpost) return []; // カテゴリーに属する記事がない場合は配列を返す
const catPosts = node.blogpost.length // カテゴリーに属した記事の総数記事数2つでも、ローカルでエラーなくビルドができ、Netlifyでもビルドができて、このようにブログが閲覧できる状態でリリースできています。
著者さんには申し訳ないのですが、記事数が少ない時を考慮できていないバグだったのかな、と思います。