Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fadhlaouir opened this issue Jun 10, 2020 · 74 comments
Closed

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

fadhlaouir opened this issue Jun 10, 2020 · 74 comments
Labels
type: bug An issue or pull request relating to a bug in Gatsby

Comments

@fadhlaouir
Copy link

Error: 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
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 | })

@fadhlaouir fadhlaouir added the type: bug An issue or pull request relating to a bug in Gatsby label Jun 10, 2020
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 10, 2020
@connorlindsey
Copy link
Contributor

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

@connorlindsey connorlindsey added the status: awaiting author response Additional information has been requested from the author label Jun 10, 2020
@kende
Copy link

kende commented Jun 10, 2020

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.

@matrix4123
Copy link

I also updated packages and started getting this error.

@kende
Copy link

kende commented Jun 10, 2020

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.

@Oukrirou
Copy link

Oukrirou commented Jun 10, 2020 via email

@matrix4123
Copy link

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.

@Antoine-lb
Copy link

Antoine-lb commented Jun 11, 2020

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

How to reproduce:

  1. gatsby new gatsby-site
  2. npm install --save gatsby-source-graphql (I have try with two diferent plugins, same result)
  3. 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)

@amankkg
Copy link

amankkg commented Jun 12, 2020

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

My repro scenario:

  1. Everything works on gatsby@2.23.1
  2. Renovate updates to gatsby@2.23.3 on remote master
  3. CI/CD triggers a new build of an app and it works
  4. I pull these changes to my dev machine
  5. I run npm ci
  6. 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.

@nirnejak
Copy link

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

@blopa
Copy link

blopa commented Jun 13, 2020

Same happened to me, removing node_modules solved it.

@mikhail-shishov
Copy link

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.

@LekoArts LekoArts removed status: awaiting author response Additional information has been requested from the author status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jun 16, 2020
@LekoArts
Copy link
Contributor

LekoArts commented Jun 16, 2020

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.

@seriocomedy
Copy link

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?

@adisher
Copy link

adisher commented Jul 6, 2020

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!

LyulyaevMaxim added a commit to LyulyaevMaxim/battleship that referenced this issue Aug 10, 2020
LyulyaevMaxim added a commit to LyulyaevMaxim/battleship that referenced this issue Aug 10, 2020
* [Feature] Add game board. Now we can to start and restart game. I use mock data yet

* [Feature][Modules] Add Ant Design for base stylization

* [Bugfix][Environment] Hot reload works incorrectly after version 2.24.9 ( gatsbyjs/gatsby#26192 )

* [Bugfix] Stub for 'Error: The result of this StaticQuery could not be fetched' (gatsbyjs/gatsby#24902)
@Biboswan
Copy link

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"

@Biboswan
Copy link

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

@alextseitlin
Copy link

alextseitlin commented Sep 16, 2020

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

@LekoArts
Copy link
Contributor

LekoArts commented Sep 17, 2020

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

@nickgrealy
Copy link

@LekoArts - of course, deleted.

@Ryan-McBride
Copy link

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

@schabibi1
Copy link

schabibi1 commented May 25, 2021

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

@KeelanJon
Copy link

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!

@muditasisodia
Copy link

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!

@dumle11
Copy link

dumle11 commented Jun 11, 2021

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.

@CLantigua2
Copy link

CLantigua2 commented Jun 12, 2021

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

@code-sanchu
Copy link

code-sanchu commented Jun 15, 2021

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.

@KyleAMathews
Copy link
Contributor

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

@code-sanchu
Copy link

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.

@bogdibota
Copy link

bogdibota commented Sep 27, 2021

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 🎉

@Dz-LevelZero
Copy link

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

@BDKoussama
Copy link

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'

@Sheryar-Ahmed
Copy link

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

@patotoma
Copy link

patotoma commented Feb 3, 2022

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.

@samarthvats9
Copy link

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.

@ui-jb
Copy link

ui-jb commented Feb 28, 2022

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.

@Montchat
Copy link

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.

:/

@omerfaran
Copy link

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

@matheusdamiao
Copy link

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

@joebentaylor1995
Copy link

Still having this issue on the latest version of gatsby

@jimmy1231
Copy link

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 { ... }
`

@citlacom
Copy link

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!

@KloudCoder
Copy link

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!

@jwhubert91
Copy link

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/

@SL4YT4NIC
Copy link

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.

@Programming-Seungwan
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

No branches or pull requests