useStaticQuery breaking in Production for some users v5

[wesleylhandy]

I'm on v5 of a production site for a major client. We are struggling to reproduce for ourselves, but we have gotten users sending us screenshots with the The result of this StaticQuery could not be fetched error. We deploy to Netlify. Of course locally, and even on my devices in production I cannot reproduce it. But some users are having this problem

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.17.1 - /tmp/yarn--1697077226976-0.8279363511358151/node
    Yarn: 1.22.19 - /tmp/yarn--1697077226976-0.8279363511358151/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.70
  npmPackages:
    gatsby: ~5.11.0 => 5.11.0
    gatsby-background-image: ~1.6.0 => 1.6.0
    gatsby-plugin-anchor-links: ~1.2.1 => 1.2.1
    gatsby-plugin-gdpr-cookies: ~2.0.9 => 2.0.9
    gatsby-plugin-image: ~3.11.0 => 3.11.0
    gatsby-plugin-layout: ~4.11.0 => 4.11.0
    gatsby-plugin-manifest: ~5.11.0 => 5.11.0
    gatsby-plugin-netlify: ~5.1.1 => 5.1.1
    gatsby-plugin-react-helmet: ~6.11.0 => 6.11.0
    gatsby-plugin-remove-serviceworker: ~1.0.0 => 1.0.0
    gatsby-plugin-robots-txt: ~1.8.0 => 1.8.0
    gatsby-plugin-sass: ~6.11.0 => 6.11.0
    gatsby-plugin-sharp: ~5.11.0 => 5.11.0
    gatsby-plugin-sitemap: ~6.11.0 => 6.11.0
    gatsby-plugin-styled-components: ~6.11.0 => 6.11.0
    gatsby-plugin-typescript: ~5.11.0 => 5.11.0
    gatsby-source-contentful: ~8.11.0 => 8.11.0
    gatsby-source-filesystem: ~5.11.0 => 5.11.0
    gatsby-transformer-remark: ~6.11.0 => 6.11.0
    gatsby-transformer-sharp: ~5.11.0 => 5.11.0

From the screenshot, you can see this is happening on the main page (index), footer and meta components (via layout).

Production Site: https://www.clicktherapeutics.com/

Originally posted by @wesleylhandy in https://github.com/gatsbyjs/gatsby/issues/33956#issuecomment-1758811459

[realkewal]

We're facing the same issue after upgrading Gatsby to v5.x from v4.x.

[JonasBlicherJensen]

We're also seeing this issue in Gatsby v5.x. It's quite problematic as it is hard to reproduce.

We use static query as a single hook for getting siteMetadata, exactly as shown in the example in the Gatsby documentation (https://www.gatsbyjs.com/docs/tutorial/getting-started/part-4/#task-use-usestaticquery-to-create-an-seo-component).

All caching headers are set up according to documentation as well (https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/caching/).

The errors are coming in for users using Safari.

[dominikbysko]

Any news on this? I am experiencing the same issue. Happens on Chrome, desktop as well as mobile, didn't check other browsers. Hard refresh fixes it for 1-time, and then when I revisit, same issue. Works fine in Incognito. The website is https://bysko.pl I just downloaded a gatsby-contentful starter https://www.gatsbyjs.com/starters/contentful/starter-gatsby-blog/ and deployed to netlify. That's it. The issue is with useStaticQuery called inside Seo.js component (src/components/Seo.js). Works fine locally, so I can't really debug this. Tried few ideas on how to fix this, but nothing worked so far.

[wesleylhandy]

I am still having this problem intermittently with users in production. Chrome 120 on Windows 10+ seems to be a recurring pain point in my Sentry logs.

I completely refactored my Head component away from React Helmet to use the new Head API, and fetch site Meta data from Contentful via useStaticQuery in the new Head component.

import { graphql, useStaticQuery } from "gatsby"

export function useSiteMetadata() {
  const { allContentfulMeta = { nodes: [] } } = useStaticQuery(graphql`
    query {
      allContentfulMeta(limit: 1) {
        nodes {
          colorBg
          colorMain
          themeColorDark
          themeColorLight
          metaIconBgColor
          name
          socialImage {
            gatsbyImageData(
              width: 1200
              formats: JPG
              layout: FIXED
              quality: 60
            )
          }
          maskIconColor
          favicon {
            gatsbyImageData(
              width: 512
              formats: PNG
              layout: FIXED
              quality: 60
            )
          }
          metaIcon {
            gatsbyImageData(
              width: 512
              formats: PNG
              layout: FIXED
              quality: 60
            )
          }
          maskImage {
            gatsbyImageData
          }
        }
      }
    }
  `)

  return allContentfulMeta.nodes.length > 0 ? allContentfulMeta.nodes[0] : {}
}

I have created an Error Boundary to listen for errors that include The result of this StaticQuery could not be fetched to force a single page reload. (see https://github.com/gatsbyjs/gatsby/issues/33956)

I thought the issue could be Netlify cache, so I changed by build script to run gatsby clean && gatsby build, I've removed my service worker (long, long ago) and set all my headers via gatsby-plugin-netlify to

"/public/**/*.html": [
  `Cache-Control: public`,
  `Cache-Control: max-age=0`,
  `Cache-Control: must-revalidate`,
],
"/public/page-data/*": [
  `Cache-Control: public`,
  `Cache-Control: max-age=0`,
  `Cache-Control: must-revalidate`,
 ],
 "/sw.js": [
  `Cache-Control: public`,
  `Cache-Control: max-age=0`,
  `Cache-Control: must-revalidate`,
],
"/*": [
  `Cache-Control: public`,
  `Cache-Control: max-age=180`,
  `Cache-Control: no-cache`,
  `Cache-Control: must-revalidate`,
],

So far, I can't seem to completely deal with this issue, particularly on Windows, for Google and/or Firefox, but its intermittent, very hard to reproduce. I've never been able to reproduce locally or on any of my devices.

[lizzr-ecb]

Our team is seeing this error in Netlify Create. Is there any update on a resolution?

[yashints]

I am facing this issue as well with the gatsby-source-graphql plugin trying to fetch data from GitHub, the graphql url correctly returns the data for the exact same query I have in the component while using the serve, but the build and develop both fail with message:

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

[c-rom]

I had the same error (in development mode) and solved it by moving my component in src/components folder after I noticed this in the documentation: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/#must-be-in-src-director I hope it helps

[paola-claros-Cerebral]

we did the same to move it to src/components but we get same error. Any other solutions that worked?

[bohdanvv-prodigy]

in case someone's IDE went wild just like mine did with autoimport and required instead of importing useStaticQuery and graphql: make sure you import { useStaticQuery, graphql } from 'gatsby', not require