gatsby: "The result of this StaticQuery could not be fetched" when calling useStaticQuery within a custom hook and declaring the query in the usage of the custom hook

@heytulsiprasad I have the exact same situation. develop is fine, but I get this issue on prod with Vercel on random deployments.

Is there anyone who faced this issue randomly out of nowhere? I don’t know why but my site is working fine locally everytime I run gatsby develop but when pushing to Vercel (I am using vercel for deployments) I am getting this exact issue but only sometimes and randomly. Its like 9/10 times, and I get this done by doing another deployment and voila it works!

It’s not like I’m stuck or something, but I feel like I should know why this happens and if there’s any real issue or bug why doesn’t it show up while running locally?

@MeLlamoPablo i’ve picked up on your issue and i have a answer for your:

From my undestanding of Gatsby, this is technically not a bug, it’s reported as such but it’s not. What you’re doing from Gatsby’s point of view is using a variable with a StaticQuery, that’s not possible, more on that here. There’s some work being done in that department but as it’s alot of moving parts involved some more time will be necessary to make it work seamlessly.

To make this work you would have to transform your hook code from:

import { useStaticQuery } from "gatsby"

export const useHelloWorld = query => useStaticQuery(query)
  .allFile
  .nodes[0]
  .childYaml
  .hello
export default useHelloWorld

To:

const useHelloWorld = () => {
  const { allFile } = useStaticQuery(
    graphql`
      {
        allFile(filter: {relativePath: {regex: "/Header\\/.+\\\\.yml/"}}) {
          nodes {
            childYaml {
              hello
            }
          }
        }
      }
    `
  )
  return allFile
}

In your /src/components/header.js you would have to make some adjustments to make it show anything without any kind of errors transforming your component into:

import React from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"
import useHelloWorld from "../hooks/useHelloWorld"

const Header = () => {
  const { nodes } = useHelloWorld()

  return (
    <header
      style={{
        background: `rebeccapurple`,
        marginBottom: `1.45rem`,
      }}
    >
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `1.45rem 1.0875rem`,
        }}
      >
        <h1 style={{ margin: 0 }}>
          <Link
            to="/"
            style={{
              color: `white`,
              textDecoration: `none`,
            }}
          >
            {
              nodes[0].childYaml.hello!==undefined?nodes[0].childYaml.hello:<div><h1>nothing was returned</h1></div>
            }
          </Link>
        </h1>
      </div>
    </header>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

With my proposed changes, issuing gatsby develop and opening up http://localhost:8000 i’m presented with:

@heytulsiprasad It could be related to Vercel, but I doubt it. People seem to have had this issue not long ago on Heroku. https://github.com/gatsbyjs/gatsby/issues/21392

To me, it sounds related to gatsby build in general.

I am getting this error based on where I import the component that uses it.

I have tried it inside of my layouts file as well as inside of the header that sits inside of that.

After moving it into pages/index.js it works as expected.

In my case, I want to be able to use this staticQuery at a global level since it is for a navigation component that is accessible from every page.

Any suggestions?