Weird Error Messages in Gatsby

Gatsby's logo saying "idk lol"

Gatsby is great! But every now and then it throws a weird, unhelpful error message my way.

So, here is a collection of weird errors and the solutions I found (collection of one, to start 🙄). For future-me and, perhaps, present-you.

The result of this StaticQuery could not be fetched…

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

There are many possible reasons for this error to pop. It seems to pop whenever anything goes wrong and usually has nothing to do with the error message 🤷

Here are three possible reasons:

Having multiple static queries in a single file.

As stated in the Gatsby docs

Because of how queries currently work in Gatsby, we support only a single instance of useStaticQuery in a file

If you can’t merge all queries into one, a simple solution is to extract the extra query in a component.

Using a filter AND not using edges

Not sure why, but on one of my collections, this works fine:

allFoo(filter: { language: { eq: "fr" } }) {
  nodes {
    foo
    bar
  }
}

While it fails on another unless I change it to this:

allFoo(filter: { language: { eq: "fr" } }) {
  edges {
    node {
      foo
      bar
    }
  }
}

Changing the name of your query

While refactoring, I changed one of my static query’s name.

Something like going from:

const { allMenus } = useStaticQuery(
  graphql`
    query FooQueryName {
    allMenus(

to:

const { allMenus } = useStaticQuery(
  graphql`
    query BarQueryName {
    allMenus(

And that was a no-go for gatsby. Restarting the development server wasn’t enough, I had to run gatsby clean too.


Pssst!

Sign up to my newsletter and get a free PDF about how to get people to sign up for your newsletters!

Powered by EmailOctopus