useStaticQuery fails to fetch when used inside a lazy loaded component

[pseelinger]

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

I'm pursuing an upgrade path from using gatsby-plugin-loadable-components-ssr with Gatsby 4 to React.lazy with Gatsby 5. However, when I try to use a static query inside a dynamically loaded component, I get:

Error in function useStaticQuery in ./.cache/static-query.js:83 The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

A bare minimum component for this use case looks like this:

import React from "react";
import { graphql, useStaticQuery } from 'gatsby';

const TestComponent = () => {
    const { site: { siteMetadata: { title } } } = useStaticQuery(graphql`
        query DataQuery {
            site {
                siteMetadata {
                    title
                }
            }
        }
    `);

    return (
        <p>The title of this site is {title}</p>
    )
}

export default TestComponent;

I've also tried putting the static query in a separate file as its own hook and get the same error. I'm gathering the components for a given page like this:

import React, {lazy, Suspense} from "react";

const Component = ({ name }) => {
    const TheComponent = lazy(() => import(`./${name}`));

    return TheComponent ? (
        <Suspense fallback={<div>Error loading component</div>}>
            <TheComponent />
        </Suspense>
    ) : <div>{name}</div>
}

const ComponentList = ({ components }) => (
    components.map(name => <Component {...{ name }} />)
)

export default ComponentList;

I'm getting this error in both develop and build.

Reproduction Link

https://github.com/pseelinger/gatsby-usestaticquery-bug

Steps to Reproduce

1. Download reproduction repo
2. npm i
3. npm run develop and navigate to localhost:8000/page-with-hook or localhost:8000/page-without-hook
4. You can check localhost:8000/static-page-without-hook or localhost:8000/static-page-with-hook to confirm the static query itself is valid and that this component works when not loaded with React.lazy
5. You can also run npm run build and see the same error

Expected Result

The page should render with the value of the result of the static query displayed in the component. Build should complete without errors.

Actual Result

The page does not render and the static query fails to run with the above error. Build fails with the error WebpackError: The result of this StaticQuery could not be fetched.

Environment

System:
    OS: macOS 13.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Languages:
    Python: 2.7.18 - /Users/patrickseelinger/.pyenv/shims/python
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 110.0
    Safari: 16.2
  npmPackages:
    gatsby: ^5.8.0-next.1 => 5.8.0-next.1 
  npmGlobalPackages:
    gatsby-cli: 5.7.0

Config Flags

No response