Gatsby GraphQL Image Query Bug Repro

The Gatsby graph fails to query images in certain situations in a Netlify CMS project.

Repro Steps:

• yarn
• yarn clean && yarn build
  • succeeds with image
• yarn build (again, this uses the cache)
  • fails on null image (TypeError: Cannot read properties of null (reading 'childImageSharp'))
• yarn clean && yarn develop
  • image succeeds in frontend app
  • image is null in GraphiQL
  • changing text in home.md makes GraphiQL work
• Stop development server
• yarn develop (again, this uses the cache)
  • fails on null image in frontend & GraphiQL
  • changing text in home.md makes frontend & GraphiQL work

Netlify builds exhibit this same behavior: they work on fresh build but fail on cached builds.

The same setup worked fine on Gatsby 3, the bug is specific to Gatsby 4. This project uses the gatsby-transformer-remark plugin, plus the community plugin gatsby-remark-relative-images, which might potentially be causing this caching problem.

Full GraphiQL query

An alternate query in gatsby-node.ts that doesn't use allMarkdownRemark doesn't exhibit this bug. Uncomment and re-run the steps above using the alternate query to verify.