CODEWITHSUNDEEP
javascriptgraphqlgatsbynetlifynetlify-cms
iamskok
iamskok

Reputation: 630

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 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

Upvotes: 1

Views: 996

Answers (1)

Z. Zlatev
Z. Zlatev

Reputation: 4820

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

Upvotes: 1

Related Questions