gatsby: Error: The result of this StaticQuery could not be fetched.

wtf I am only starting to use Gatsby for the second day and already had to do gatsby clean, remove all node_modules and reinstall 2 times and restart more than 5 times. This is crazy…

I got 2.23.3 working after verifying 2.23.0, 2.23.1 & 2.23.2.

Here are the steps I took:

npm uninstall gatsby rm -rf node_modules add "gatsby": "2.23.3", to dependencies in package.json npm install gatsby develop

Then I updated each of the other outdated packages without error.

Started with Gatsby a few days ago. Changed the Windows PC, installed Gatsby, cloned the project. Failed with 2.26.1 & 2.27.1.

Figured out that it was related to a single case sensitive filename.

I could reproduce it with gatsby-starter-default

Added gatsby-plugin-layout, i18next, i18next-browser-languagedetector and react-i18next.

Demo: https://github.com/Xairoo/my-gatsby-project

Just change src\components\Layout.js to src\components\layout.js and vice versa.

Still having this issue on the latest version of gatsby

This is a duplicate of https://github.com/gatsbyjs/gatsby/issues/24890

If you’re encountering this issue locally, remove the node_modules folder and re-install. If you’re encountering this e.g. on Netlify, run a Clean cache & build step.

The reason is a falsy node_modules/.cache state.

Facing the same issue, the above solutions didn’t seem to work though.

Ive got the issue with Gatsby 3.1.2

This is a duplicate of #24902

If you’re encountering this issue locally, remove the node_modules folder and re-install. If you’re encountering this e.g. on Netlify, run a Clean cache & build step.

The reason is a falsy node_modules/.cache state.

A duplicate of itself?

I had the same issue again. But I figured out that I used useStaticQuery in a nested component file. Got an idea from #20692.

The solutions I took are below.

Problems

• useStaticQuery was in src/components/lauout.js
• Layout component file imported src/components/Header.js
• Layout component was imported in pages/index.js

Solutions

• Swap useStaticQuery (in src/components/lauout.js ) to StaticQuery in src/somponents/Header.js

See Gatsby’s documentation 👉 Querying Data in Components using StaticQuery

I got 2.23.3 working after verifying 2.23.0, 2.23.1 & 2.23.2.

Here are the steps I took:

npm uninstall gatsby rm -rf node_modules add "gatsby": "2.23.3", to dependencies in package.json npm install gatsby develop

Then I updated each of the other outdated packages without error.

Thanks, I just deleted my node_modules folder and ran npm install again. That seemed to do the trick.

The problems comes with Google Chrome. With Firefox, its running fine. I am not sure what could be the problem. I tried clearing browsers cache but didn’t work! Now I’m stuck!

This issue is occurring in "gatsby": "^3.1.2" and "gatsby": "^3.7.1" for me. I’ve narrowed it down to my SEO component which is coming directly from the Gatsby example and being imported to the Layout wrapper component that goes around my pages. Refactored from useStaticQuery to StaticQuery and this silenced the error but now I’m getting the following rendered on my page. Was able to resolve by changing the filename from SEO.js to Seo.js.

I’m still having this issue. I’ve added deleting node_modules and running gatsby clean to my deploy pipeline but I still get this error intermittently. I’m using the latest version of gatsby

Same happened to me, removing node_modules solved it.

I also had this issue with gatsby ^3.4.1. It worked if I run $ gatsby clean

Manually deleting .cache directory won’t clear the cache but $ gatsby clean does 👍

Same issue, this solution worked for me. 👍

Praise gastby clean!

i’ve tried all of the fixes but nothing seems to work. any other suggestions?

Still an Issue!

If you remove the offline plugin, make sure to add https://www.npmjs.com/package/gatsby-plugin-remove-serviceworker so users aren’t getting stale SWs

I also had this issue with gatsby ^3.4.1. It worked if I run $ gatsby clean

Manually deleting .cache directory won’t clear the cache but $ gatsby clean does 👍

With help from @ar7casper I managed to create a reproduction — https://github.com/KyleAMathews/static-query-bug-repo/commit/105c9c21738f7910e6c82d59383e669ac13c2414

Debugging a bit with @pieh — it’s related to our handling of commonjs — if you switch my reproduction to use es6 (e.g. import/export instead of require/module.exports) then things work. We’re digging in to see where the problem might be and to create a fix but if you’re facing this, see if switching to es6 fixes things.

Same error, on GraphiQL fetches fine, but on localhost shows Error: The result of this StaticQuery could not be fetched.

BUT it only shows up when using title or description, and it works perfectly with author.

Any ideas as to why?

const data = useStaticQuery(graphql query { site { siteMetadata { title } } } );

``

Ok solved after several attempts. Gatsby clean. Then remove all node_modules and reinstall.

For me, the issue was a duplicate query name. I had shadowed a Header.Logo.jsx file from a react template to in order to modify it and it had a query from graphql in the file. You cannot have a duplicate query name in there that’s the same as the original file, so renaming the query name in my shadowed file fixed the issue for me.

I got a Static Query error in Gatsby v5.7.0 when using a query at slice component:

failed Building slices HTML (1) - 3.023s

 ERROR #11339  HTML.COMPILATION

Building static HTML failed for slice "footer".

Slice metadata: {
  "componentChunkName": "slice---src-components-footer-js",
  "result": {
    "sliceContext": {
      "path": "slice--footer"
    }
  },
  "staticQueryHashes": []
}

Slice props: {}

See our docs page for more info on this error: https://gatsbyjs.com/docs/reference/config-files/actions#createSlice


  81 |     return context[query].data
  82 |   } else {
> 83 |     throw new Error(
     |           ^
  84 |       `The result of this StaticQuery could not be fetched.\n\n` +
  85 |         `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +
  86 |         `please open an issue in https://github.com/gatsbyjs/gatsby/issues`


  WebpackError: The result of this StaticQuery could not be fetched.

  - static-query.js:83
    gatsby5-starter-drupal/.cache/static-query.js:83:11

  - footer.js:72

After some debugging noted that the “footer” component file was names with first capital case letter “Footer.js” but at createPages I have it resolving with lower case name “footer.js” and with ID also in lower case:

  createSlice({
    id: "footer",
    component: require.resolve("./src/components/footer.js"),
  })

I changed this to properly match the component filename:

  createSlice({
    id: "Footer",
    component: require.resolve("./src/components/Footer.js"),
  })

And referenced the slice with the ID reflecting the case sensitivity:

<Slice alias="Footer" />

And this resolved the “StaticQuery could not be fetched” error. This problem occurred in MacOS so looks that how we are referencing the resolve / import filename affect when static query data is resolved from cache. The mentioned error above don’t occurred when cache is cleared, only on the builds where cache exists. This may give some hints for the other cases of the bug that are reported in this thread. Thanks!

Currently experiencing this issue sporadically in production on a Gatsby 3.14.0 site using es6 hosted on Gatsby Cloud. The error is being thrown from our seo.js component. It seems to affect a small amount of users across all platforms and operating systems.

I found one instance of an import with incorrect capitalization (SEO.js). Fixing that import unfortunately did not resolve the issue. We’ve tried “Clear cache and build”, but no dice.

We’re going to try the “Change file capitalization” hack soon to see if it resolves the issue. We also happen to be upgrading to Gatsby 4 soon, so I’m hoping that could potentially fix the issue. If either of the two potential solutions I’ve mentioned above work, I’ll report back.

Error: The result of this StaticQuery could not be fetched. Solution: i solved this problem by using useStateQuery in index.js and then pass the data as prop to layout component and destruture it in layout component and it is working fine hopefully

For me the issue was a wrong import 🤦‍♂️ For some reason, WebStorm decided to import useStaticQuery like this:

import { useStaticQuery } from '../../../../.cache/gatsby-browser-entry';

instead of the correct version:

import { useStaticQuery } from 'gatsby';

After changing the import, the error got fixed 🎉

Just another confirmation for the fix, in order:

1. Remove node modules
2. npm install
3. Gatsby clean

fixed my issue (using Google Chrome)

Update: https://github.com/gatsbyjs/gatsby/pull/30941 has fix for the commonjs problem

Hi, I’m new in Gatsby but I wanted to leave my humble solution.

1. Run command prompt Node.js as administrator
2. uninstall gatsby
3. npm install -g gatsby-cli
4. gatsby new yourSite
5. cd yourSite
6. gatsby develop

Running the cmd as Administrator solves incompatibilities. -I wish the Info is useful- Atte => { &Minin }

This will screw up git repo. Since you are moving it around or starting from the begging. Instead of moving directory around, deleting the node_modules, lock file and global gatsby followed by reinstall should do the trick. Unfortunately, I can’t test it since I can’t reproduce 😕

thank you, the first solution worked for me.

@nickgrealy Please refrain from using such images, as per our Code of Conduct we want to create an inclusive & safe space and posting such images can certainly trigger some people.