[Gatsby] Solutions to "The result of this StaticQuery could not be fetched."

#gatsby #react #storyblok

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 &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

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 &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

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

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