Gatsby and Netlify CMS Preview error with rendering StaticQuery

I’m using Gatsby with Netlify CMS and ran in the problem with previewing templates in Netlify CMS.

There is an index page component which works as expected. It gets the data from markdown and frontmatter and is linked with
Netlify CMS widgets and there is featured posts component which gets its data via useStaticQuery hook.

But once I go to index page preview template in Netlify admin I get:

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
> 1 | import React from "react"
  2 | import PropTypes from "prop-types"
  3 | import Link, {
  4 |   withPrefix,
View compiled
> 1 | import React from 'react'
  2 | import v4 from 'uuid'
  3 | import { useStaticQuery, graphql } from "gatsby"
  4 | 
View compiled
▶ 28 stack frames were collapsed.

My goal is to render homepage from markdown and frontmatter data coming from Netlify CMS and featured blog list component which gets its data from /posts directory via useStaticQuery hook in Netlify Admin.

The reproduction repo can be found here

Node dependencies like useStaticQuery (and pretty much anything else from the Gatsby package) can’t be run in the browser. Ensure any common/shared components used in your preview template components don’t import those (and also ensure they don’t import anything that imports them, all the way up the chain), and everything should work.

In this case can you please explain how is BlogRoll component working inside of IndexPageTemplate

I honestly do not know. I discovered we were doing that months back and haven’t had time to revisit. But if something was broken in our preview templates that would be the first thing I’d go after. Code is being imported that flat out cannot run in a browser, I can only assume Gatsby is swallowing those errors somewhere.

1 Like