Gatsby - The result of this StaticQuery could not be fetched

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

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.

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

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

   Example:   header.js   ->   Header.js

2. Then clear Gatsby cache and restart the server.

3. This should fix the problem.

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.

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",

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.

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

try globally installing

npm install -g gatsby-cli