Static query loads forever when inside a fragment <></>

[TylerBarnes]

I've seen this on a couple projects now since I use the fragment syntax pretty often. Each time I do it I forget that the fragment is causing the issue but once I delete it or even replace it with a div the static query loads.

I don't have a demo repo to show and it's a fairly minor bug but it should be easy to reproduce.

These work:

<StaticQuery
      query={graphql`
...
`}
render={...}
/>

<div>
<h1>Component title</h1>
<StaticQuery
      query={graphql`
...
`}
render={...}
/>
</div>

This doesn't work and results in the Static query loading message:

<>
<h1>Component title</h1>
<StaticQuery
      query={graphql`
...
`}
render={...}
/>
</>

[jonniebigodes]

Instead of the shorthand version try it like this:

<React.Fragment>
    <h1>component Title</h1>
    <StaticQuery
      query={graphql`
        ...
      `}
      render={...}
    />
</React.Fragment>

I recreated the issue with the shorthand version and it shows h1 and StaticQuery(loading), but if i use React.Fragment it shows the h1 and also what's inside the render.

[jgierer12]

This seems to be caused during the query extraction. When starting gatsby develop with it being React.Fragment and later replacing it with the shorthand, it works fine.

[victorandcode]

Hello I've created a PR to address this issue. Please take a look when possible #10443. The explanation of the issue is also there.