This one has stumped me. I'm using Gatsby, Sanity, and Netlify and everything in development has worked as expected. Now, when I load my site on Netlify (no build errors) all I see is a white screen with "Loading (StaticQuery)". No errors whatsoever for me to debug. I've seen several issues about this but they have gone unanswered on github or the solutions haven't worked for me.
Only two of my components use Static Queries, the Layout component (which wraps everything, hence why the site doesn't load at all in production) and SEO component which both come from the starter I used and are pretty much untouched.
I'm using a modified version of this Sanity starter: https://github.com/sanity-io/example-company-website-gatsby-sanity-combo
I've updated all of the packages to remove all npm vulnerabilities (something I haven't yet done on a couple other projects that use the same starter). So instead of Gatsby 2.18.7 from the starter I've updated to Gatsby 3.2.1. Again, no problems in development, only in the production build. I've deployed those other projects based on the same starter with an older Gatsby version to Netlify without this issue so I expect this issue has something to do with the change in versions.
I'll include my Package.json and the Layout and SEO component files which are the only two files that use StaticQueries.
Package.json
"scripts": {
"build": "gatsby build",
"deploy": "npm run now-deploy",
"develop": "gatsby develop",
"empty-cache": "gatsby clean",
"lint": "eslint .",
"now-build": "npm run build",
"workers-build": "npm run build",
"workers-start": "npm run build && wrangler preview --watch",
"workers-deploy": "npm run build && wrangler publish",
"now-dev": "npm run build",
"start": "npm run develop",
"format": "prettier-eslint --write \"**/*.js\" \"!.cache/**\" \"!node_modules/**\" \"!public/**\"",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"dependencies": {
"@cloudflare/wrangler": "^1.15.0",
"@fontsource/montserrat": "^4.2.2",
"@fontsource/raleway": "^4.2.2",
"@sanity/block-content-to-react": "^2.0.7",
"@sanity/client": "^2.7.1",
"@sanity/image-url": "^0.140.22",
"date-fns": "^2.19.0",
"dotenv": "^8.2.0",
"gatsby": "^3.2.1",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-image": "^1.2.0",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-source-sanity": "^7.0.2",
"get-youtube-id": "^1.0.1",
"postcss-import": "^14.0.1",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.2",
"react-autosize-textarea": "^7.1.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.0.0",
"react-icons": "^4.2.0",
"react-script": "^2.0.5",
"react-tabs": "^3.2.1",
"react-youtube": "^7.13.1"
},
"devDependencies": {
"eslint": "^7.23.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-standard": "^5.0.0",
"gatsby-plugin-postcss": "^4.2.0",
"postcss": "^8.2.9",
"prettier-eslint-cli": "^5.0.1",
"prop-types": "^15.7.2"
}
}
Layout.js
import { graphql, StaticQuery } from 'gatsby'
import React, { useState } from 'react'
import Layout from '../components/layout'
function LayoutContainer (props) {
const [showNav, setShowNav] = useState(false)
function handleShowNav () {
setShowNav(true)
}
function handleHideNav () {
setShowNav(false)
}
return (
<StaticQuery
query = {graphql`
query SiteInfoQuery {
site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
title
}
company: sanityCompanyInfo {
phone
email
_rawDescription
name
linkedin
instagram
facebook
}
}
`}
render={data => {
if (!data.site) {
throw new Error(
'Missing "Site settings". Open the studio at http://localhost:3333 and add "Site settings" data'
)
}
if (!data.company) {
throw new Error(
'Missing "company info". Open the studio at http://localhost:3333 and add "company info" data'
)
}
return (
<Layout
{...props}
showNav={showNav}
company={data.company}
siteTitle={data.site.title}
onHideNav={handleHideNav}
onShowNav={handleShowNav}
/>
)
}}
/>
)
}
export default LayoutContainer
SEO.js
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
function SEO ({ description, lang, meta, keywords = [], title }) {
return (
<StaticQuery
query={graphql`
query SEOQuery {
site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
title
description
keywords
author
}
}
`}
render={data => {
if (!data.site) {
return
}
const metaDescription = description || data.site.description
return (
<Helmet
htmlAttributes={{
lang
}}
title={title}
titleTemplate={title === data.site.title ? '%s' : `%s | ${data.site.title}`}
meta={[
{
name: 'description',
content: metaDescription
},
{
property: 'og:title',
content: title
},
{
property: 'og:description',
content: metaDescription
},
{
property: 'og:type',
content: 'website'
},
{
name: 'twitter:card',
content: 'summary'
},
{
name: 'twitter:creator',
content: data.site.author
},
{
name: 'twitter:title',
content: title
},
{
name: 'twitter:description',
content: metaDescription
}
]
.concat(
keywords && keywords.length > 0
? {
name: 'keywords',
content: keywords.join(', ')
}
: []
)
.concat(meta)}
/>
)
}}
/>
)
}
SEO.defaultProps = {
lang: 'en',
meta: [],
keywords: []
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.array,
keywords: PropTypes.arrayOf(PropTypes.string),
title: PropTypes.string.isRequired
}
export default SEO
