Gatsby: The result of this StaticQuery could not be fetched

[jordyvg]

The result of this StaticQuery could not be fetched after gatsby build

White screen on the page with the StaticQuery code after gatsby build and gatsby serve.

In the console:
react_devtools_backend.js:6 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

No problems with gatsby develop.
No errors during build.

Steps to reproduce

1) Import a GraphQL query from a file and use it in useStaticQuery
2) Run gatsby build and gatsby serve and visit the page

**insta-feed.js**

// ...other imports
import { query } from '../social'

const InstaFeed = () => {
  const { site } = useStaticQuery(query) // this wil fail with gatsby build and serve

  // InstagramFeed code is not relevant
  return (
    <Layout>
      <InstagramFeed userName={site.siteMetadata.socialUsernames.instagram}/>
    </Layout>
  )
}

**social.js**

// imports
// ...other social components

export const Instagram = () => {
  const { site } = useStaticQuery(query)
  const instagram = `<svg>....svg code</svg>`

  return (
    <SocialIcon
      href={`https://instagram.com/${site.siteMetadata.socialUsernames.instagram}`}
      target="_blank"
      rel="noopener noreferrer"
      dangerouslySetInnerHTML={{ __html: instagram }}
    />
  )
}

export const query = graphql`
  query SocialUsernames {
    site {
      siteMetadata {
        socialUsernames {
          instagram
          facebook
          twitter
          youtube
        }
      }
    }
  }
`

The 'Fix'

**insta-feed.js**

// imports

const query = graphql`
  query InstagramUserName {
    site {
      siteMetadata {
        socialUsernames {
          instagram
        }
      }
    }
  }
`

const InstaFeed = () => {
  const { site } = useStaticQuery(query) // now it will work

  ...return code
}

A GraphQL query within the insta-feed.js will fix the problem. I looks like you cannot import a query from another file in with gatsby build and gatsby serve. It will work with gatsby develop.

Optional you can use GraphQL Fragments probably.

Expected result

Working component, just like gatsby develop.

Actual result

White screen on the page with <InstaFeed/>.

Environment

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 81.0.4044.138
Firefox: 71.0
Safari: 13.1

[vladar]

Thanks for opening this, @jordyvg !

This happens because a query can't be imported from the other file. Gatsby relies on presence of graphql tagged template literal in the same file where useStaticQuery hook is used to extract queries at build time.

The recommended way of composing queries is described in the documentation.

The tldr version is that you create a new hook instead:

**social.js**
import { useStaticQuery, graphql } from "gatsby"

export const useSocialUsernamesData = () => {
  const { site } = useStaticQuery(
    graphql`
      query SocialUsernames {
        site {
          siteMetadata {
            socialUsernames {
              instagram
              facebook
              twitter
              youtube
            }
          }
        }
      }
    `
  )
  return site.siteMetadata.socialUsernames
}

And use this hook in place of useStaticQuery in other files.

There are also existing issues describing this, e.g. #14699

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[jordyvg]

The recommended way of composing queries is described in the documentation.

Stupid! I should have known.
Thanks, the hook works really well.