Graph fails to query images

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

A project that uses Netlify CMS with gatsby-transformer-remark and the community plugin gatsby-remark-relative-images which worked perfectly in Gatsby 3 now gets null on Gatsby 4 after a cache has been built. Netlify builds exhibit this same behavior: they work on fresh build but fail on cached builds.

Sister issue filed with the relative image plugin here https://github.com/danielmahon/gatsby-remark-relative-images/issues/61

We’ve been trying to upgrade to latest Gatsby (4.21) and React 18.2 for some time now and this is blocking us.

Reproduction Link

https://github.com/yallllc/gatsby-image-query-bug

Steps to Reproduce

• 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

Expected Result

Graph queries images properly

Actual Result

Graph gets null images. Changing the md file results in finding the images. Cached builds fail on Netlify have missing images as well.

Environment

System:
    OS: Linux 5.4 Ubuntu 22.04 LTS 22.04 (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  npmPackages:
    gatsby: ^4.21.1 => 4.21.1 
    gatsby-plugin-image: ^2.21.0 => 2.21.0 
    gatsby-plugin-netlify-cms: ^6.21.0 => 6.21.0 
    gatsby-plugin-sharp: ^4.21.0 => 4.21.0 
    gatsby-remark-images: ^6.21.0 => 6.21.0 
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2 
    gatsby-source-filesystem: ^4.21.1 => 4.21.1 
    gatsby-transformer-remark: ^5.21.0 => 5.21.0 
    gatsby-transformer-sharp: ^4.21.0 => 4.21.0

Config Flags

We use FAST_DEV in our production project but the repro does not and exhibits the same bug behavior.

[danielmahon]

Hello, I just wanted chime in and say that I finally put up a “needs maintainer” notice on the gatsby-remark-relative-images repo. I have no plans to continue working on it so feel free to reach out if this functionality is something that could be bundled with Gatsby or if anyone would like to maintain it. Thanks.

[i-bsd]

Can confirm - having the exact same problem with gatsby-remark-images.

Editing and saving a markdown file throws TypeError: Cannot read property 'dir' of null for the image. Only way forward is to clear cache and run gatsby develop again, which works until I make another markdown edit.