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

iamskok
  • 600
  • 5
  • 19

1 Answers1

1

Graphql queries that Gatsby processes will never work in netlify-cms preview. Usually gatsby and netlify-cms use separate webpack instances during build. At least that's how it's done in gatsby-plugin-netlify-cms.

Please have a look at this question if you really need to access the data extracted for static queries but you won't be able to keep the exact same code as you will need to import raw JSON files. https://stackoverflow.com/a/58944342/157601

Z. Zlatev
  • 4,757
  • 1
  • 33
  • 37
  • Thanks for your answer! Probably it wasn’t clear, but I’m already using gatsby-plugin-netlify-cms in my project. It also appears that official Gatsby Netlify starter is using StaticQuery in its BlogRoll component and properly renders its data in the Preview components, though I haven’t any code outside of gatsby-plugin-netlify-cms which could be responsible for this https://github.com/netlify-templates/gatsby-starter-netlify-cms – iamskok Nov 21 '19 at 07:08
  • The BlogRoll component isn't used for previews in netlify-cms. You can see all components used in previews here https://github.com/netlify-templates/gatsby-starter-netlify-cms/tree/master/src/cms/preview-templates. Generally you can create previews of single documents and the BlogRoll is more of an archive view. – Z. Zlatev Nov 21 '19 at 09:24
  • I can see that BlogRoll is being imported in IndexTemplate and indexTemplate is being imported in the preview component https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/src/templates/index-page.js#L7 – iamskok Nov 21 '19 at 19:16
  • @iamskok you're correct, it is imported. But the static query does not run in the CMS preview. Only what is rendered is `Loading (StaticQuery)`, the actual blog roll is not rendered. If you're using the `useStaticQuery` hook, you could wrap it in a `try` `catch` to return a sensible default on error. – Oli Jul 22 '20 at 13:04