DEV Community

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

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

arisa_dev
Developer Relations Engineer at Storyblok. Love Aikido🥋 A free tech knowledge-sharing community, Lilac organizer💪 A host of Anonymous.fm https://dev.to/anonymousfm-arisa
・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

  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
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
Enter fullscreen mode Exit fullscreen mode

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.

  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
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
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

And it works!👍

I tried to find the solution in "Error: The result of this StaticQuery could not be fetched. #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🙏

Discussion (0)