Hi there!
I'm Arisa, a DevRel from this June living in Germany๐ฉ๐ช (A big announcement is coming this June๐)
I have a free online programming learning community called Lilac, with free hands-on Frontend e-books๐ฉโ๐ป
Who is this article for?
- Anyone who struggle with the error below
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
Why did this error appear?
It appeared when I finished to build featured blog posts in Home page in my Storyblok & Gatsby blog project.
To be honest, if I think now, it was almost like a coincidence that I didn't get this error earlier.
More specifically, I added useStaticQuery
in one component.
Technically, that was the time my project started to have useStaticQuery
in 2 components files and one was nested.
A nested file with useStaticQuery
was the problem.
My environment
Directory architecture is important in this case.
I'll show only the most relevant one.
src
- components
- Layout.js
- Header.js
pages
- index.js
Here's my other environment.
"dependencies": {
"gatsby": "^3.5.1",
"gatsby-plugin-dark-mode": "^1.1.2",
"gatsby-plugin-gatsby-cloud": "^2.4.1",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.4.0",
"gatsby-plugin-manifest": "^3.4.0",
"gatsby-plugin-offline": "^4.4.0",
"gatsby-plugin-postcss": "^4.5.0",
"gatsby-plugin-react-helmet": "^4.4.0",
"gatsby-plugin-sharp": "^3.4.1",
"gatsby-source-filesystem": "^3.4.0",
"gatsby-source-storyblok": "^3.0.1",
"gatsby-transformer-sharp": "^3.4.0",
"postcss": "^8.2.15",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-syntax-highlighter": "^15.4.3",
"storyblok-js-client": "^4.0.9",
"storyblok-react": "^0.1.2",
"storyblok-rich-text-react-renderer": "^2.3.1",
"tailwindcss": "^2.1.2"
},
"devDependencies": {
"prettier": "2.2.1"
},
Step 1: Delete useStaticQuery
from Layout.js
In the beginning, I had useStaticQuery
in Layout.js file.
- Before
import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Header from "./header"
import "./layout.css"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<div>
<Header siteTitle={data.site.siteMetadata?.title || `Title`} />
<div>
<main>{children}</main>
<footer>
ยฉ Arisa Fukuzaki {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.storyblok.com">Storyblok, Gatsby.js & TailwindCSS</a>
</footer>
</div>
</div>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
This Layout.js file was imported to pages/index.js
file.
useStaticQuery
is a custom hook from React.js.
It's not clearly written in Gatsby's documentation to recommend to use in a top level.
Yet, there's an information in their issue.
Getting the idea from this, here is what I did.
- Delete
useStaticQuery
from Layout.js - Instead, use
StaticQuery
in Header.js
Let's complete step 1.
Chage your Layout.js file into this ๐
- After
import * as React from "react"
import PropTypes from "prop-types"
import "./layout.css"
import Header from './header'
const Layout = ({ children }) => {
return (
<div>
<div>
<Header />{/* ๐ don't forget to import */}
<main>{children}</main>
<footer>
ยฉ Arisa Fukuzaki {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.storyblok.com">Storyblok, Gatsby.js & TailwindCSS</a>
</footer>
</div>
</div>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
Step 2: Use StaticQuery
in Header.js
Next up, we'll use StaticQuery
in Header.js file.
At this moment, we deleted completely query related code from Layout.js file.
Instead, we include queries in Header.
Luckily, Gatsby prepared everything almost exactly the same in their documentation to use StaticQuery
โจ
We'll use the technique they used.
Basically, here's what we'll do.
- Import
StaticQuery
- Create a Header component with a data prop
- Create a separated query component to use
StaticQuery
(has to be JSX) - propTypes
To compare the difference, let me show you my previous Header.js file before.
- Before
import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import ThemeToggle from '../components/themeToggle'
const Header = ({ siteTitle }) => (
<header>
<div>
<h1>
<Link to="/">{siteTitle}</Link>
</h1>
<ul>
<li><ThemeToggle /></li>
<ul>
<li>
<Link to="/blog/">Blog</Link>
</li>
<li>
<Link to="/talk/">Talk</Link>
</li>
</ul>
</ul>
</div>
</header>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
```
We'll use `StaticQuery` in this file.
- After
```javascript
import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import ThemeToggle from '../components/themeToggle'
import { StaticQuery, graphql } from "gatsby"// ๐
// ๐ Declare just a Header JSX component
const Header = ({ data }) => (
<header>
<div>
<h1>
<Link to="/">
{data.site.siteMetadata.title}
</Link>
</h1>
<ul>
<li><ThemeToggle /></li>
<ul>
<li>
<Link to="/blog/">Blog</Link>
</li>
<li>
<Link to="/talk/">Talk</Link>
</li>
</ul>
</ul>
</div>
</header>
)
// ๐ Query component
export default function MyHeader(props) {
return (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
{/* ๐ Import Header component & pass props */}
render={data => <Header data={ data } {...props} />}
/>
)
}
Header.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
}
```
And it works!๐
I tried to find the solution in ["Error: The result of this StaticQuery could not be fetched. #24902"](https://github.com/gatsbyjs/gatsby/issues/24902), which looks like the most relevant issue I had.
It worked in the beginning by just running `$ yarn clean` but in my case, the same issue came back after a day.
I took a look at the browser console error log too.
Then found that it pointed out Layout.js file's `useStaticQuery` although Gatsby's error log showed it could be a bug.
So, I hope my blog post helps your case too๐
Top comments (4)
Thanks for the post, it did help!
Happy to hear that, Faiz ;)
Very helpful. Thanks @arisa_dev - exactly what I needed to get my Gatsby components to work in Storybook!
Hey Stew!๐ How're you doing? :) It's been a while since our podcast episode!
Super happy to hear that my blog post helped you & super excited to hear that you're trying out Storyblok๐