[Gatsby] Solutions to "The result of this StaticQuery could not be fetched."
Tags: gatsby, react, storyblok
Published: 2021-05-25 15:38:56

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](https://note.com/frontendlifeinde/m/m9b8feda1d547), with [free hands-on Frontend e-books](https://zenn.dev/arisa_dev/books)👩‍💻

# Who is this article for?
- Anyone who struggle with the error below

```bash
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.

```javascript
src
  - components
    - Layout.js
    - Header.js
pages
  - index.js
```

Here's my other environment.

```javascript
  "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

```javascript
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 &amp; 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.

> [Error in function useStaticQuery
29416](https://github.com/gatsbyjs/gatsby/issues/29416)

Getting the idea from this, here is what I did.

1. Delete `useStaticQuery` from Layout.js
2. Instead, use `StaticQuery` in Header.js

Let's complete step 1.

Chage your Layout.js file into this 👇

- After

```javascript
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 &amp; 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` ✨

> [Querying Data in Components using StaticQuery](https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/#how-staticquery-differs-from-page-query)

We'll use the technique they used.

Basically, here's what we'll do.

1. Import `StaticQuery` 
2. Create a Header component with a data prop
3. Create a separated query component to use `StaticQuery` (has to be JSX)
4. propTypes

To compare the difference, let me show you my previous Header.js file before.

- Before

```javascript
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🙏