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
}
}
}
}
`