Gatsby 和 Netlify CMS 预览错误与渲染 StaticQuery

Posted 2023-03-08

【中文标题】Gatsby 和 Netlify CMS 预览错误与渲染 StaticQuery

【英文标题】：Gatsby and Netlify CMS Preview error with rendering StaticQuery

【发布时间】：2020-03-13 07:20:59

【问题描述】：

我在 Netlify CMS 中使用 Gatsby，但在 Netlify CMS 中预览模板时遇到了问题。

有一个index page component 按预期工作。它从 markdown 和 frontmatter 中获取数据，并与 Netlify CMS 小部件和 featured posts 组件通过 useStaticQuery 钩子获取其数据。

但是，一旦我在 Netlify 管理员中转到 index page preview template，我就会得到：

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.

我的目标是从来自 Netlify CMS 和特色博客列表组件的 markdown 和 frontmatter 数据中呈现 homepage，该组件通过 Netlify Admin 中的 useStaticQuery 挂钩从 /posts 目录获取其数据。

复制repo可以找到here

【参考方案1】：

Gatsby 处理的 Graphql 查询永远不会在 netlify-cms 预览版中工作。通常 gatsby 和 netlify-cms 在构建期间使用单独的 webpack 实例。至少在gatsby-plugin-netlify-cms 中是这样的。

如果您确实需要访问为静态查询提取的数据，但您将无法保留与导入原始 JSON 文件所需的完全相同的代码，请查看此问题。 https://***.com/a/58944342/157601

【讨论】：

感谢您的回答！可能不清楚，但我已经在我的项目中使用了 gatsby-plugin-netlify-cms。官方 Gatsby Netlify 启动器似乎也在其 BlogRoll 组件中使用 StaticQuery 并在 Preview 组件中正确呈现其数据，尽管我在 gatsby-plugin-netlify-cms 之外没有任何代码可以负责这个github.com/netlify-templates/gatsby-starter-netlify-cms

BlogRoll 组件不用于 netlify-cms 中的预览。您可以在 github.com/netlify-templates/gatsby-starter-netlify-cms/tree/… 处查看预览中使用的所有组件。一般来说，您可以创建单个文档的预览，而 BlogRoll 更像是一个存档视图。

可以看到IndexTemplate中正在导入BlogRoll，预览组件中正在导入indexTemplategithub.com/netlify-templates/gatsby-starter-netlify-cms/blob/…

@iamskok 你是对的，它是进口的。但静态查询不在 CMS 预览中运行。仅渲染的是Loading (StaticQuery)，实际的博客滚动没有渲染。如果您使用 useStaticQuery 钩子，则可以将其包装在 try catch 中，以在错误时返回合理的默认值。