Gatsby and Netlify CMS Preview error with rendering StaticQuery

Netlify CMS
1

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 https://github.com/gatsbyjs/gatsby/issues
useStaticQuery
./.cache/gatsby-browser-entry.js:1
> 1 | import React from "react"
  2 | import PropTypes from "prop-types"
  3 | import Link, {
  4 |   withPrefix,
View compiled
_default
./src/components/common/FeaturedPosts.js:1
> 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

2

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.

3

In this case can you please explain how is BlogRoll component working inside of IndexPageTemplate gatsby-starter-netlify-cms/index-page.js at master · netlify-templates/gatsby-starter-netlify-cms · GitHub?

1 Like
4

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.

2 Likes
5

This is interesting. I’ve just finished implementing my styled-system in Netlify-CMS previews, but I ran into this issue. My Link primitive is a styled-component that adds styled-system props to the Link from the gatsby package. However, it doesn’t work in the Netlify CMS preview. I’m curious as to how the Gatsby netlify starter has created a workaround for this.

6

Hi @R-Bower and welcome to the community :smiley:
The starter hasn’t created a workaround for this.
The preview template for that specific component (BlogRoll) just shows this in the CMS preview pane:
image

7

Styled components don’t work with Netlify CMS preview?

8

Hi @haseeb.burki and welcome to the community!

Styled components should work in the CMS preview, I believe that the use case here:

is not working since the underlying component is Gatsby’s Link component which won’t work in CMS previews.

9

I’m missing something here. How is the preview for this showing the “Loading (Static Query)” instead of error’ing. Where’s the logic that swaps that component out instead of using the BlogRoll component which uses the static query.

10

I’m experiencing the same issue but I’m using eleventy, any help?