Gatsby - The result of this StaticQuery could not be fetched

Question

I have a Gatsby site that has been running smoothly for 3 months online. As of Friday 24th July I have started to receive the below result and users only see a blank screen.

    
    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
        at h (gatsby-browser-entry.js:77)
        at O9Ll.t.default (buybike.js:52)
        at Ki (react-dom.production.min.js:153)
        at Fa (react-dom.production.min.js:175)
        at vo (react-dom.production.min.js:263)
        at cu (react-dom.production.min.js:246)
        at ou (react-dom.production.min.js:246)
        at Zo (react-dom.production.min.js:239)
        at react-dom.production.min.js:123
        at scheduler.production.min.js:19

Here is my package.json

    "@reach/dialog": "^0.10.1",
    "@reach/tabs": "^0.10.1",
    "@reach/visually-hidden": "^0.10.1",
    "@stripe/stripe-js": "^1.4.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "gatsby": "^2.23.18",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-create-client-paths": "^2.2.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-netlify-identity": "0.0.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-robots-txt": "^1.5.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-sitemap": "^2.4.3",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-remark-responsive-iframe": "^2.3.3",
    "gatsby-source-contentful": "^2.2.7",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-stripe": "^3.0.7",
    "gatsby-transformer-remark": "^2.7.3",
    "gatsby-transformer-sharp": "^2.4.3",
    "gsap": "^3.2.6",
    "netlify": "^4.1.5",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-netlify-identity-widget": "^0.2.7",
    "react-spring": "^8.0.27",
    "redux": "^4.0.5",
    "styled-components": "^5.1.0",
    "video-react": "^0.14.1"
  },

I have the site hosted on Netlify and I am using Contentful as my CMS. The site can be found here https://revelwell.com.au/ - The initial page loads but if you click on any of the links to navigate away from the page the error occurs. If you hit refresh the page loads perfectly fine.

Any help GREATLY appreciated. Thank you James

https://github.com/gatsbyjs/gatsby/issues/24902 – ksav Jul 27 '20 at 03:32 — ksav, Jul 27 '20 at 03:32

score 4 · Accepted Answer · answered Jul 29 '20 at 10:08

4

A fix has just been made on the gatsby project (github.com/gatsbyjs/gatsby/pull/26077/)

It is now available on version 2.24.13

If your package.json is: "gatsby": "^2.23.18" you just need delete your yarn.lock and do a yarn install to get the latest version (you can check your gatsby version by doing yarn list gatsby)

And that should fix your issue (mine got fixed!).

answered Jul 29 '20 at 10:08

Brendon

2,808
1
9
10

1

Still hapeening on `"gatsby": "^2.24.66",` – T04435 Nov 06 '20 at 12:10
1

Still happening with 2.24.91 – runios Nov 08 '20 at 08:46
1

still happening on `"gatsby": "^3.7.1"` – LTFoReal Jun 12 '21 at 18:07

score 4 · Answer 2 · answered Aug 25 '21 at 03:27

4

Just capitalize the file name of the component in which you are using useStaticQuery hook.

Example: header.js -> Header.js
Then clear Gatsby cache and restart the server.
This should fix the problem.

answered Aug 25 '21 at 03:27

Abdul Samad

41
4

Where did you get the info to capitalize the filename to solve the error with `usestaticquery`? Is it in the `gatsby` docs? – Timo Dec 01 '22 at 09:28
Actually when I faced this issue this solution just randomly crossed my mind, after renaming the file it fixed my issue so I thought other's issues can also be fixed, by the way these were my dependencies – Abdul Samad Dec 03 '22 at 05:30
{ "dependencies": { "gatsby": "^3.11.1", "gatsby-plugin-minify-classnames": "^0.3.1", "gatsby-plugin-react-helmet": "^4.12.0", "gatsby-plugin-sass": "^4.12.0", "gatsby-plugin-sitemap": "^4.8.0", "gatsby-source-filesystem": "^3.12.0", "gatsby-transformer-json": "^3.12.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", "sass": "^1.38.1" }, "devDependencies": { "@types/react-helmet": "^6.1.2", "prettier": "2.3.2", "typescript": "^4.3.5" } } – Abdul Samad Dec 03 '22 at 05:30
In Lesson #12 of the Gatsby tutorial by The Net Ninja, the problem is solved exactly by this suggestion. Throughout the tutorial, the author capitalized (uppercase first letter) all of his component file names. I would not even have looked for that difference, had I not read the above answer. – TARKUS Aug 09 '23 at 22:12

score 3 · Answer 3 · answered Aug 11 '21 at 10:41

3

Sometimes cleaning the cache would solve sudden GraphQL errors:

# Run `npm install -g gatsby-cli` if you haven't installed Gatsby CLI
gatsby clean

Documentation on gatsby clean

answered Aug 11 '21 at 10:41

AnsonH

2,460
2
15
29

1

My `gatsby build` was failing. This fixed it. Thanks! – Wilfred Almeida Aug 15 '22 at 13:13

Ferran Buireu · Answer 4 · 2020-12-14T05:47:42.663

2

What did you try so far? As @ksav pointed out, in this GitHub thread there are a several ways to fix a similar issue:

Removing node_modules, .cache and install again
Removing node_modules, .cache fix Gatsby to v2.23.3/upgrade up to ^2.26.1 where the bug is fixed and install again

It seems related to a loading staticQuery bug that can't be reproduced in a fresh install. The final trial is to remove your package-lock/yarn-lock.json and generate it again.

edited Dec 14 '20 at 05:47

answered Jul 27 '20 at 04:49

Ferran Buireu

28,630
6
39
67

I have followed the above to the letter but it still not working. I can not get it to build locally by following the above. I have deleted the modules as well as the lock file. – James Aspinall Jul 27 '20 at 08:07
Further comments on the above link that might be helpful for anyone else facing this issue. No resolution for myself yet but this could be helpful :) – James Aspinall Jul 27 '20 at 23:47
with `"gatsby": "^2.26.1"`, removing `node_modules`, `.cache` and `package-lock/yarn-lock.json` did the trick! – Devo Dec 14 '20 at 03:41

score 1 · Answer 5 · answered Oct 12 '20 at 07:49

Our issue was due to a mistake in imports. We have a folder setup where we had a subfolder in pages:

-pages
 -about-us
  -index
  -references
  -employees

In the index page that was the first subpage for about-us we did import an component like this: import Index from '../../components/AboutUs'; This worked in development but in production we needed to add the Index to the import Index from '../../components/AboutUs/Index';

Just wanted to point out this as the Gatsby can create a path that is unreadable in production or development mode and this leads to staticQuery problems.

score 1 · Answer 6 · answered Nov 06 '20 at 13:37

My solution to this based on some reading from:

#26099

Solution: yarn add -D babel-plugin-remove-graphql-queries

    # .storybook/main.js
        config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
        plugins: [
          require.resolve('@babel/plugin-proposal-class-properties'),
          // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
          require.resolve('babel-plugin-remove-graphql-queries'),
        ],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');

    # package.json
    "storybook:static-query": "yarn clean && yarn build && cp -r ./public/page-data/sq/d ./public/static",
    "storybook": "yarn storybook:static-query && NODE_ENV=test start-storybook -p 6006  --no-dll -s public",

Reason for script "storybook:static-query" thanks to mohsenkhanpour. But in short the "babel-plugin-remove-graphql-queries" look for the queries on /static/d so we jusat moved it from the location Gatsby places them.

related packages versions:

    "gatsby": "^2.24.66",
    "storybook": "^6.0.28",
    "babel-loader": "^8.1.0",
    "babel-plugin-remove-graphql-queries": "^2.9.20",

score 0 · Answer 7 · answered Feb 17 '22 at 16:35

Ran into the "The result of this StaticQuery could not be fetched" error while following along with a tutorial and it took about 30 minutes to figure out the issue.

I tried "gatsby clean" and deleting and reinstalling my node_modules directory multiple times with no success.

I had extracted my query to a useSiteMetadata hook and initially accidentally capitalized the "D" when I created my "useSiteMetaData.js" file, which caused it to be imported as "../hooks/useSiteMetaData.js" in my Nav component. I had changed the filename to "useSiteMetadata.js" but that import was still using the initial capital "D" casing.

I corrected the import path to "../hooks/useSiteMetadata.js" and ran "gatsby clean" and the error disappeared.

As an extra note, I also removed the cookies in localhost:8000 - I had tried this a few times before with no effect, but I did it right before fixing the import path casing, so wanted to note that just in case.

score 0 · Answer 8 · answered Jun 28 '22 at 02:51

I encountered this while doing the official Gatsby tutorial, Step 4 (here: https://www.gatsbyjs.com/docs/tutorial/part-4/)

Turned out I had created a file as Layout.js but Gatsby was importing it as "layout"

Correcting the case of the import solved the issue

score 0 · Answer 9 · edited Feb 08 '23 at 02:12

0

In my case, this problem occurred when I accidentally used a capital letter in the import path of the component.

Wrong

import FactionBanner from "../components/FactionBanner/FactionBanner";

Correct

import FactionBanner from "../components/factionBanner/FactionBanner";

edited Feb 08 '23 at 02:12

Илья Хоришко

695
4
15

answered Feb 01 '23 at 02:59

toine2one

1
2

score -2 · Answer 10 · answered Dec 29 '20 at 23:36

-2

try globally installing

npm install -g gatsby-cli

answered Dec 29 '20 at 23:36

Gatsby - The result of this StaticQuery could not be fetched

10 Answers10