技術書に記載コードのバグに対応しました

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 null

lengthが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でもビルドができて、このようにブログが閲覧できる状態でリリースできています。

著者さんには申し訳ないのですが、記事数が少ない時を考慮できていないバグだったのかな、と思います。