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

Question

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

fadhlaouir opened this issue 5 years ago · 74 comments

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
useStaticQuery
C:/Users/fadhl/Desktop/projects/Gatsby/.cache/gatsby-browser-entry.js:76
73 | if (context[query] && context[query].data) {
74 | return context[query].data
75 | } else {

76 | throw new Error(
77 | The result of this StaticQuery could not be fetched.\n\n +
78 | This is likely a bug in Gatsby and if refreshing the page does not fix it, +
79 | please open an issue in https://github.com/gatsbyjs/gatsby/issues
View compiled
Layout
C:/Users/fadhl/Desktop/projects/Gatsby/src/components/layout.js:16
13 | import "./layout.css"
14 |
15 | const Layout = ({ children }) => {
16 | const data = useStaticQuery(graphql 17 | query SiteTitleQuery { 18 | site { 19 | siteMetadata { View compiled ▶ 17 stack frames were collapsed. (anonymous function) C:/Users/fadhl/Desktop/projects/Gatsby/.cache/app.js:94 91 | const preferDefault = m => (m && m.default) || m 92 | let Root = preferDefault(require(./root)) 93 | domReady(() => { 94 | renderer(<Root />, rootElement, () => { 95 | apiRunner(onInitialClientRender`)
96 | })
97 | })

Answer 1 · 2020-06-10T13:45:11.000Z

Can you share more information about how you're using StaticQuery? Please provide a minimal reproduction.

Answer 2 · 2020-06-10T20:37:55.000Z

Same error on multiple Gatsby projects after updating packages. Just created a new gatsby-starter-default to test what could be going wrong and ran gatsby develop with no error. After updating the following packages (all default, no new packages added), same StaticQuery error hits this new project.

Updated packages on the new project:

gatsby ^2.22.15 → ^2.23.3
gatsby-image ^2.4.5 → ^2.4.7
gatsby-plugin-manifest ^2.4.9 → ^2.4.11
gatsby-plugin-offline ^3.2.7 → ^3.2.9
gatsby-plugin-react-helmet ^3.3.2 → ^3.3.4
gatsby-plugin-sharp ^2.6.9 → ^2.6.11
gatsby-source-filesystem ^2.3.8 → ^2.3.11
gatsby-transformer-sharp ^2.5.3 → ^2.5.5
react ^16.12.0 → ^16.13.1
react-dom ^16.12.0 → ^16.13.1
react-helmet ^6.0.0 → ^6.1.0

Now downgrading one by one to narrow down the cause.

Answer 3 · 2020-06-10T20:45:49.000Z

I also updated packages and started getting this error.

Answer 4 · 2020-06-10T21:12:59.000Z

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.

Answer 5 · 2020-06-10T21:14:17.000Z

Think u Le mer. 10 juin 2020 à 21:46, Geoff Carr <notifications@github.com> a écrit :

…

I also updated packages and started getting this error. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#24902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO2LQYL7ITE7XMCHRBMSI23RV7WLDANCNFSM4N2IKZSQ> .

Answer 6 · 2020-06-10T21:40:57.000Z

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.

Answer 7 · 2020-06-11T13:02:17.000Z

Same problem. It seems to happen as soon as a plugin is installed

How to reproduce:

gatsby new gatsby-site
npm install --save gatsby-source-graphql (I have try with two diferent plugins, same result)
npm i
Then the error appears

Versions

Package.json

  "dependencies": {
    "gatsby": "^2.22.15",
    "gatsby-image": "^2.4.5",
    "gatsby-plugin-manifest": "^2.4.9",
    "gatsby-plugin-offline": "^3.2.7",
    "gatsby-plugin-react-helmet": "^3.3.2",
    "gatsby-plugin-sharp": "^2.6.9",
    "gatsby-source-filesystem": "^2.3.8",
    "gatsby-source-strapi": "0.0.12",
    "gatsby-transformer-sharp": "^2.5.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },

NodeJS

v14.0.0 and v12.18.0 (tried both, same result)

OS

MacOS Catalina 10.15.5 (updated this week, already had some troubles with npm because of xcode but fixed them)

Answer 8 · 2020-06-12T14:27:56.000Z

I also confirm both the issue and the fix by deleting node_modules and running npm ci.

My repro scenario:

Everything works on gatsby@2.23.1
Renovate updates to gatsby@2.23.3 on remote master
CI/CD triggers a new build of an app and it works
I pull these changes to my dev machine
I run npm ci
I run npm start - an error appears

So, to fix this I need to remove node_modules before running npm ci.
Also, now it is clear why CI/CD executed without issues - there are new images for every build, so there are no old node_modules.

Answer 9 · 2020-06-12T23:12:53.000Z

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

Answer 10 · 2020-06-13T10:08:07.000Z

Same happened to me, removing node_modules solved it.

Answer 11 · 2020-06-14T10:49:48.000Z

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! Had the same issue after the latest update, and your solution worked as a charm for me.

Answer 12 · 2020-06-16T08:33:36.000Z

This is a duplicate of #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.

Answer 13 · 2020-06-17T06:08:47.000Z

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?

Answer 14 · 2020-07-06T15:18:42.000Z

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!

Answer 15 · 2020-08-10T14:37:48.000Z

I'm facing this same issue now.

@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby": "^2.23.23",
    "gatsby-image": "^2.0.39",
    "gatsby-plugin-feed-mdx": "^1.0.0",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-mdx": "^1.2.14",
    "gatsby-plugin-netlify-cms": "^4.3.7",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.0.35",
    "gatsby-plugin-styled-components": "^3.0.7",
    "gatsby-plugin-typography": "^2.2.13",
    "gatsby-remark-copy-linked-files": "^2.0.11",
    "gatsby-remark-images": "^3.3.9",
    "gatsby-remark-responsive-iframe": "^2.1.1",
    "gatsby-remark-smartypants": "^2.0.9",
    "gatsby-remark-vscode": "^2.1.2",
    "gatsby-source-filesystem": "^2.0.29",
    "gatsby-transformer-sharp": "^2.1.18",
    "netlify-cms-app": "^2.9.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-switch": "^5.0.0",
    "react-typography": "^0.16.19",
    "styled-components": "^4.2.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.54",
    "typography": "^0.16.19",
    "typography-theme-wordpress-2016": "^0.16.19"

Answer 16 · 2020-08-10T15:38:07.000Z

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

Answer 17 · 2020-09-16T19:27:09.000Z

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.....

Answer 18 · 2020-09-17T08:57:04.000Z

@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.

Answer 19 · 2020-09-17T13:55:20.000Z

@LekoArts - of course, deleted.

Answer 20 · 2020-10-13T19:49:03.000Z

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

Answer 21 · 2020-10-13T21:28:41.000Z

Same error working with strapi.

I check on localhost:8000__graphql my query and it's fetching properly

But when I'm trying to use it on useStaticQuery(ARTICLES) displays Error: The result of this StaticQuery could not be fetched.

const ARTICLES = graphql`
  query Article {
    strapiArticle {
      id
      title
      content
      imageUrl
    }
  }
`;

Answer 22 · 2020-10-20T23:31:44.000Z

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
}
}
}
);

``

Answer 23 · 2020-10-23T21:17:09.000Z

thank you, the first solution worked for me.

Answer 24 · 2020-11-05T12:42:30.000Z

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

Run command prompt Node.js as administrator
uninstall gatsby
npm install -g gatsby-cli
gatsby new yourSite
cd yourSite
gatsby develop

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

Answer 25 · 2020-11-10T18:11:17.000Z

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

Run command prompt Node.js as administrator

uninstall gatsby

npm install -g gatsby-cli

gatsby new yourSite

cd yourSite

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 :/

Answer 26 · 2020-11-18T21:26:48.000Z

I have also recently started to experience this issue as people are reporting. I have a 2 year old build which we have not experienced this until about a month a go. We are experiencing it on production only builds which really stinks when you have service workers that cache that experience for people and the average person would not go into their applications tab and restart their service worker :/

Answer 27 · 2020-11-24T09:34:34.000Z

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.

Answer 28 · 2020-12-06T07:33:59.000Z

In my case, it seems like gatsby-plugin-graphql-codegen causes this problem.

Answer 29 · 2021-01-01T23:25:25.000Z

For what it's worth, downgrading to gatsby: 2.23.3 as mentioned by @amankkg seems to do the trick. My setup of

    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "cypress": "^3.8.1",
    "final-form": "^4.19.1",
    "gatsby": "^2.29.2",
    "gatsby-image": "^2.8.0",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-codegen": "^1.2.14",
    "gatsby-plugin-emotion": "^5.1.0",
    "gatsby-plugin-intl": "^0.3.3",
    "gatsby-plugin-manifest": "^2.9.1",
    "gatsby-plugin-offline": "^3.7.1",
    "gatsby-plugin-react-helmet": "^3.7.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-typescript": "^2.9.0",
    "gatsby-source-mongodb": "^2.7.0",
    "gatsby-source-sanity": "^6.0.4",
    "gsap": "^3.5.1",
    "react-final-form": "^6.5.2",
    "react-scroll": "^1.8.1",
    "react-search": "^2.1.1",
    "react-translate": "^7.0.1",
    "talkify-tts": "^3.7.0"

...returns Loading(StaticQuery)... or simply Error: The result of this StaticQuery could not be fetched using the hook, but changing to gatsby: 2.23.3 solves both issues.

Answer 30 · 2021-01-29T08:52:06.000Z

Still an issue for me on both the 2.30 and 2.23.3 builds.

const Image = () => {
  const data = useStaticQuery(graphql`
  query {
    placeholderImage: file(relativePath: { eq: "mockup.png" }) {
      childImageSharp {
        fluid(maxWidth: 410) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`)
  return (
    <Img backgroundColor={"white"} fluid={data.placeholderImage.childImageSharp.fluid} />
  )
}
export default Image

What's even crazier was when I used the StaticQuery component it built successfully but the image was massive until I navigated to another page on the website then back. This is the only component I'm using with GraphQL, as I've ripped it out of every other component due to whacky errors (it seemingly breaks react-helmet?), and inconsistency. It all worked when my layout component had a GraphQL query, but every time I refreshed the page I'd get a flash of "Loading (Static Query) blank screen before the page loaded and that's a really ugly experience. After removing the query from Layout my queries elsewhere stopped working despite no change to data. And of course it all works perfectly in development mode. Everything explodes during gatsby build.

"gatsby": "^2.23.3",
    "gatsby-image": "^2.9.0",
    "gatsby-plugin-browser-dependencies": "^1.0.1",
    "gatsby-plugin-create-client-paths": "^2.8.0",
    "gatsby-plugin-emotion": "^4.5.0",
    "gatsby-plugin-firebase": "^0.2.0-beta.4",
    "gatsby-plugin-google-analytics": "^2.9.0",
    "gatsby-plugin-react-helmet": "^3.9.0",
    "gatsby-plugin-react-native-web": "^3.1.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sharp": "^2.12.2",
    "gatsby-plugin-sitemap": "^2.10.0",
    "gatsby-plugin-styled-components": "^3.8.0",
    "gatsby-source-filesystem": "^2.9.1",
    "gatsby-transformer-sharp": "^2.10.1",

Answer 31 · 2021-02-14T09:13:28.000Z

Still an Issue!

Answer 32 · 2021-02-15T19:28:28.000Z

How can we fix this issue?

Answer 33 · 2021-03-26T04:39:54.000Z

Receiving this issue. Deleted node_modules, ran npm i and it had no effect. Still getting the error.

Answer 34 · 2021-03-30T23:28:54.000Z

Ive got the issue with Gatsby 3.1.2

Answer 35 · 2021-03-31T17:34:03.000Z

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.

This was my issue as well. File was "layout.js" and I was importing as "../Layout.js".

As soon as I renamed the file to "Layout.js" it fixed the issue.

Answer 36 · 2021-04-02T01:05:11.000Z

I've also even having this issue. For awhile adding a space to a file (any file) and saving it forced a rebuild, and the problem went away. But starting today that didn't work. I disabled gatsby-plugin-netlifycms and all the issues in develop mode went away. I did a very bad, hacky thing so that the gatsby-plugin-netlifycms only loads in production mode. In case it will help anyone, here's the commit diff for that solution.

xbmc/kodi-tv@a636365

I tried to find another way to do a conditional load of a gatsby plugin, but it doesn't seem to be a thing people do on a regular basis.

Answer 37 · 2021-04-17T01:44:34.000Z

I also experience this issue on "gatsby": "^3.3.0" also on gatsby ^2.23.0

I noticed the error exists at the loading of the website, breaking most elements and links.
But the links at the footer still work for some reason, all links are Gatsby Link components.
If I do navigate using the footer, the problem goes away and static query is no longer a problem.

Images are displayed if I use gatsby-plugin-image, but not the deprecated gatsby-image (on gatsby ^2.23.0)

Answer 38 · 2021-04-17T02:00:36.000Z

Using StaticImage instead of GatsbyImage in gatsby-plugin-image solved the issue for me.
Even though using GatsbyImage works correctly in local gatsby serve and gatsby develop.

Answer 39 · 2021-04-19T18:40:31.000Z

With help from @ar7casper I managed to create a reproduction — KyleAMathews/static-query-bug-repo@105c9c2

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.

Answer 40 · 2021-04-19T19:00:19.000Z

Update: #30941 has fix for the commonjs problem

Answer 41 · 2021-04-20T04:43:13.000Z

Just another confirmation for the fix, in order:

Remove node modules
npm install
Gatsby clean

fixed my issue (using Google Chrome)

Answer 42 · 2021-04-23T01:01:11.000Z

We just upgraded to Gatsby v3.3.1, and our site builds fine (both dev and production), but we started seeing this issue for some of our users (roughly 1% of today's users so far). I've yet to be able to reproduce it myself, however we're getting Sentry notifications for it in the wild.

Error useStaticQuery(gatsby-browser-entry)
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

We only use es6 imports, though it's possible some plugin or library we're using might be using commonjs.

Our site is hosted on s3 with CloudFront, and we create an invalidation on every deploy.

I'm going to try running gatsby clean and deleting/re-installing node_modules, though I'm skeptical that'll help given that our builds are working without issue.

Answer 43 · 2021-04-23T03:41:41.000Z

@cezarcarvalhaes it's very possible there's still other causes for the problem. One thing you can check is your caching headers https://www.npmjs.com/package/check-gatsby-caching

Answer 44 · 2021-04-23T03:44:20.000Z

Curious also if there's any commonality in your logs? E.g. the page, timing of the errors (do they cluster around deploys?), etc. Is there any metadata we could add to the error to help understand the root cause?

Answer 45 · 2021-04-23T12:45:49.000Z

@KyleAMathews We use gatsby-plugin-s3 for deploys, and I just ran the cache header check again and all of them came back as good.

We've deployed just once after upgrading to v3, but the timing seems to be sporadic as best I can tell. The biggest thing that jumps out to me is that all Sentry reports of this issue have been on Mobile Safari 14.0.3.

The error is being thrown in .../.cache/gatsby-browser-entry.js :

 }
  if (context[query]?.data) {
    return context[query].data
  } else {
    throw new Error(
      `The result of this StaticQuery could not be fetched.\n\n` +
        `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`
    )
  }

and the useStaticQuery is being called in our SEO component.

We've actually had two versions of this error. The first version happened shortly after upgrading to v3, and our SEO component was using the older component. As part of taking a shot in the dark and a crime of opportunity, I refactored the SEO component to use the useStaticQuery hook instead. The older error threw in the same place with the same message (though slightly different title).

Is there any other info that might be useful?

Answer 46 · 2021-04-28T14:24:32.000Z

On Friday, I took a shot in the dark and deleted .cache and public, and redeployed our site. We haven't seen the issue pop up since (5 days have passed at this point).

Answer 47 · 2021-05-09T02:31:28.000Z

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

Answer 48 · 2021-05-24T00:09:46.000Z

I had this error after updating a plugin. If you are having this issue and using Chrome:

run gatsby clean
clear all browsing data in Chrome and restart

Answer 49 · 2021-05-24T15:50:38.000Z

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 👍

Answer 50 · 2021-05-25T14:38:57.000Z

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

Answer 51 · 2021-06-02T13:08:07.000Z

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!

Answer 52 · 2021-06-03T09:02:16.000Z

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.

This turned out to be my issue too! Thank you!

Answer 53 · 2021-06-11T10:46:25.000Z

For me it seems to be caused by gatsby-plugin-offline. gatsby build has no issues/errors, then on Firefox page loads fine, but on Chrome I got a blank page with this error. After clearing Cache Storage for gatsby-plugin-offline in Chrome (or going to page in incognito mode) page loads fine. This started to happen when I updated some packages.

Answer 54 · 2021-06-12T22:45:19.000Z

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.

Answer 55 · 2021-06-15T16:16:52.000Z

I'm having the same problem.

Gatsby version: 3.7.1
Deployed to Netlify

The error occurs in:

Chrome on my PC and mobile. I've been using these browsers the most.

The error doesn't appear:

locally
in incognito mode
in browsers other than the one I've been using most
if I 'empty cache and hard reload'

Steps taken:

removed StaticQuery
clear cache and deploy site in Netlify
remove gatsby-plugin-offline
checked imports in components
changed file and import names to try to make cache not refer to the old StaticQuery
gatsby clean (though I don't think this affects the Netlify deploy)

I'm not sure what I can do next. This is a huge issue for me as my client's site is now down.

Answer 56 · 2021-06-15T16:24:05.000Z

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

Answer 57 · 2021-06-15T17:12:14.000Z

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

Thank you! This appears to have solved the immediate problem for me.

Answer 58 · 2021-09-27T21:50:57.000Z

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 🎉

Answer 59 · 2021-09-28T08:56:37.000Z

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.

This turned out to be my issue too! Thank you!

thank you it resolved my issue

Answer 60 · 2021-09-29T14:38:14.000Z

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.

Thank you this fixed it ! .. my component name was Seo , and i was importing '/components/SEO'

Answer 61 · 2022-02-01T11:48:56.000Z

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

Answer 62 · 2022-02-03T09:59:27.000Z

This happened to me too.

As I'm using github actions to deploy, I ended up modifying my build script to:

"build": "gatsby clean && gatsby build"

On next deployment the error is gone.

Answer 63 · 2022-02-08T17:28:21.000Z

Hey, I am new to this but I have tried this - npm install react@^16.8.0 react-dom@^16.8.0 and it's working now. Please let me know if this is of any help.

Answer 64 · 2022-02-28T23:44:59.000Z

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.

Answer 65 · 2022-05-20T03:44:51.000Z

I encountered this error when deleting a ton of files /classes in my project. None of the steps above worked for me.

I resolved this issue be adding back a Header class to the layout.js file that came with the template project that I was using.

:/

Answer 66 · 2022-07-04T20:48:34.000Z

@Montchat did you try
gatsby clean
?
This was the fix for me

Answer 67 · 2022-08-17T23:43:27.000Z

I recently got this error while developing local.
I cleaned the cache and rebuilt. When restarted the server, the error was gone.

Answer 68 · 2022-10-12T23:09:32.000Z

Still having this issue on the latest version of gatsby

Answer 69 · 2022-12-25T04:56:35.000Z

same issue with 5.3.2, but I'm able to workaround it by exporting query instead of using the hook

import { graphql } from "gatsby"
export const query = graphql`
  query { ... }
`

Answer 70 · 2023-02-23T19:49:39.000Z

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!

Answer 71 · 2023-03-25T21:00:50.000Z

Gather here. So the issue, for me in version 5 was inconsistent case in file name and imported module. Make sure these match. If you use upeercase in first letter of file name be consistent inside file during exporting and importing. Hope it helps someone!

Answer 72 · 2023-09-05T22:34:30.000Z

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

This comment helped me out a bit. Mine failed until I refactored the component-level call of useStaticQuery() into a hook that I imported and called within the function- following the example in the docs.

https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/

Answer 73 · 2024-01-30T19:00:44.000Z

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.

Answer 74 · 2024-02-11T08:37:27.000Z

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.

It was very helpful for me! I make all quey name as MyQuery before and it made mistake 🥲 But when I changed query names for each other, it cleared! Thanks @SL4YT4NIC