生活の跡

個人的な備忘録

GatsbyJSで「TypeError: Cannot read property 'fluid' of undefined」が発生した

経緯

GatsbyJSの書籍を読みながらGraphiQLを使うサンプルコードを実装していたのですが、表記のエラー「TypeError: Cannot read property 'fluid' of undefined」が出てしまいました。

f:id:ishii-akihiro:20210211183721j:plain
「TypeError: Cannot read property 'fluid' of undefined」のメッセージ

環境

  • WSL2(Ubuntu)
  • Gatsby version: 2.32.3

ソースコード

src/pages/index.js

import * as React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
// ~省略~
      <figure>
        <Img fluid={data.file.childImageSharp.fluid} alt="" /> //(※1)エラー箇所
      </figure>
// ~省略~
  </div>
)

export const query = graphql`
  query {
    file(relativePath: {eq: "hero.jpg"}) {
      childrenImageSharp { //(※2)
        fluid(maxWidth: 1600) {
          base64
          aspectRatio
          src
          srcSet
          srcSetWebp
          srcWebp
          sizes
        }
      }
    }
  }
`

原因

設定したクエリのフィールド名(上記※2)と、Imgタグに記載したフィールド名(上記※1)が一致していませんでした。

(※1)に記載したフィールド名:childImageSharp
(※2)に記載したフィールド名:childrenImageSharp

GraphiQLのExplorerで探したときに見間違えたようです。確かに"child"ImageSharpのfluidは未定義でしたね。しかし、フィールド名が似すぎていて初学者殺しにもほどがあります。

解決方法

ひとまず2箇所とも「childImageSharp」に揃えたらエラーは消えました。