Weird Error Messages in Gatsby
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.