Uncaught Error: The result of this StaticQuery could not be fetched.

Description

I have deployed site through Vercel and I’m facing following error.

Uncaught 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
    at h (gatsby-browser-entry.js:77)
    at e.default (products.js:15)
    at Ki (react-dom.production.min.js:153)
    at Fa (react-dom.production.min.js:175)
    at vo (react-dom.production.min.js:263)
    at cu (react-dom.production.min.js:246)
    at ou (react-dom.production.min.js:246)
    at Zo (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:19)

Error shows when I click on Products page or even Contact page where isn’t static query declared. This error didn’t exist while developing. Here’s products.js file:

import { useStaticQuery, graphql } from 'gatsby'
import Product from '../components/product/product'

const Products = () => {
  const {
    allShopifyProduct: { edges },
  } = useStaticQuery(graphql`
    query Products {
      allShopifyProduct {
        edges {
          node {
            title
            productType
            shopifyId
            handle
            images {
              id
              localFile {
                childImageSharp {
                  fluid {
                    srcWebp
                    tracedSVG
                    base64
                    srcSetWebp
                  }
                  fixed {
                    src
                  }
                }
              }
            }
            variants {
              sku
              price
              title
              shopifyId
            }
          }
        }
      }
    }
  `)
  return (
    <Wrapper>
      <ProductsGrid>
        {edges.map(({ node }) => {
          return <Product key={node.shopifyId} product={node} />
        })}
      </ProductsGrid>
    </Wrapper>
  )
}

export default Products

I added query Products because I thought it’ll help but it didn’t.

Steps to reproduce

Expected result

website should work in production

Actual result

some problems with static query I guess

System: OS: macOS 10.15.6 CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.14.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.8 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 84.0.4147.125 Firefox: 79.0 Safari: 13.1.2 npmPackages: gatsby: ^2.17.4 => 2.24.10 gatsby-cli: ^2.12.62 => 2.12.65 gatsby-image: ^2.2.29 => 2.4.13 gatsby-plugin-google-analytics: ^2.0.13 => 2.3.13 gatsby-plugin-layout: ^1.0.11 => 1.3.10 gatsby-plugin-manifest: ^2.2.23 => 2.4.20 gatsby-plugin-offline: ^3.0.16 => 3.2.20 gatsby-plugin-react-helmet: ^3.1.13 => 3.3.10 gatsby-plugin-root-import: ^2.0.5 => 2.0.5 gatsby-plugin-sharp: ^2.2.32 => 2.6.21 gatsby-plugin-styled-components: ^3.3.10 => 3.3.10 gatsby-plugin-transition-link: ^1.20.2 => 1.20.2 gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 gatsby-source-filesystem: ^2.1.33 => 2.3.22 gatsby-source-graphql: ^2.6.2 => 2.6.2 gatsby-source-shopify: ^3.2.24 => 3.2.24 gatsby-transformer-sharp: ^2.3.0 => 2.5.11 npmGlobalPackages: gatsby-cli: 2.12.87

[claygiffin]

I may have figured out what the issue is. I haven’t run into this error for my last few builds now after making this change.

When I set up my new Gatsby project, I changed the case of the default components (layout.js and seo.js) to be PascalCase (Layout.js, SEO.js). I know that git by default ignores changes in filename case, so I had to update my git.config to register these changes by running git config core.ignorecase false.

However, it appears that the original lowercase file was never completely removed. It didn’t appear in my repository or local branch, but I noticed that when I staged my changes in VSCODE, both the lowercase and uppercase versions of the files were listed!

To fully remove the old versions of the files, I had to run:

git mv -f src/components/layout.js src/components/Layout.js &&
git mv -f src/components/seo.js src/components/SEO.js

Pushing that change seems to have fixed the Static Query error.

[jack0wsky]

I guess I figured it out. For some reason the problem was in useStaticQuery hook. I switched to StaticQuery component and problem is solved.