Gatsby useStaticQuery giving causing 'The result of this StaticQuery could not be fetched'. Query works in graphiql and on hot reload, not page load.

[RyanCallahan312]

Description

As the title says I have a static query for the publicURL of an svg to display. This works fine in graphiql and I have very similar queries in other files for other svgs, but for some reason this exact one is giving me errors. The strangest part of these errors is the icon will appear if I comment out the query, save the file and let gatsby hot reload, then uncomment it, save and hot reload again.

This issue seems to be similar to the following issue due to working on hot reload: #29951, #30449, and #30508.

I wanted to make another issue for this because those used netlify or were just closed without a repo to reproduce the issue.

Steps to reproduce

Have a component with the following query (this is using typescript):

interface Icons {
  allFile: {
    nodes: [{ publicURL: string }];
  };
}
const icons: Icons = useStaticQuery(graphql`
{
  allFile(filter: {relativeDirectory: {eq: "icons"}, name: {eq: "eye-white"}}) {
    nodes {
      publicURL
    }
  }
}
`);

here is a branch reproducing the error: https://github.com/RyanCallahan312/Portfolio/tree/gatsby-bug

a workaround i've found is to just use a page query. that can be found in this branch: https://github.com/RyanCallahan312/Portfolio/tree/gatsby-bug-workaround

Expected result

What should happen? a white eye svg should appear in the top left.

Actual result

What happened. Error message appears.

Environment

System:
OS: Windows 10 10.0.19043
CPU: (16) x64 AMD Ryzen 7 1800X Eight-Core Processor
Binaries:
Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.8.3
Browsers:
Chrome: 90.0.4430.93
Edge: Spartan (44.19041.423.0), Chromium (90.0.818.46)
npmPackages:
gatsby: ^3.4.0 => 3.4.0
gatsby-plugin-gatsby-cloud: ^2.1.0 => 2.4.0
gatsby-plugin-image: ^1.1.2 => 1.4.0
gatsby-plugin-manifest: ^3.1.0 => 3.4.0
gatsby-plugin-offline: ^4.1.0 => 4.4.0
gatsby-plugin-react-helmet: ^4.1.0 => 4.4.0
gatsby-plugin-sharp: ^3.1.2 => 3.4.0
gatsby-plugin-tsconfig-paths: ^1.0.3 => 1.0.3
gatsby-source-filesystem: ^3.1.0 => 3.4.0
gatsby-transformer-sharp: ^3.1.0 => 3.4.0
npmGlobalPackages:
gatsby-cli: 3.3.0

[RyanCallahan312]

Update: This error has started appearing on all my useStaticQuery's.

[RyanCallahan312]

Update again: I can no longer reproduce the bug on the branch that I made specifically for reproducing it. Although at this commit I am still getting the error in the src\components\projectCard\projectCard.tsx file.

[LekoArts]

With 3.4.0 this was released: #30941
It might have fixed some issues for you, too.

Please provide a minimal reproduction that shows the problem on a fresh install. Thanks!

[RyanCallahan312]

I'm no longer able to reproduce so I'll assume its fixed