GatsbyJS 网站的非页面组件中的 GraphQL 查询投诉
Posted
技术标签:
【中文标题】GatsbyJS 网站的非页面组件中的 GraphQL 查询投诉【英文标题】：GraphQL query complaints in non-page component for GatsbyJS website 【发布时间】：2019-01-25 12:06:45 【问题描述】：我正在尝试将新模板添加到 gatsby-starter-hero-blog，但我对新模板的 GraphQL 查询被拒绝：
warning The GraphQL query in the non-page component
"/Users/mc/workspaces/mc/src/templates/NoteBookTemplate.js" will not be run.
Queries are only executed for Page or Layout components. Instead of a query,
co-locate a GraphQL fragment and compose that fragment into the query (or other
fragment) of the top-level page or layout that renders this component.
For more
info on fragments and composition see:
http://graphql.org/learn/queries/#fragments
文件夹结构如下：
--src
--components
--images
--pages
--templates
--CategoryTemplate.js
--NotebookTemplate.js
--PageTemplate.js
--PostTemplate.js
--theme
--utils
NotebookTemplate.js 是我添加的新模板（用于使用 Nteract 的 Gatsby 插件渲染 Jupyter 笔记本）。
我添加的模板查询的语法与其他模板相同（我在内容中确实有一个示例笔记本，在 GraphiQL 中可见）。
export const query = graphql`
query NotebookQuery($slug: String!)
jupyterNotebook(fields: slug: eq: $slug )
html
internal
content
`
我什至尝试使用一个简单的查询来镜像其他模板之一（甚至尝试使用更改了组件名称的模板的精确副本）创建一个准系统模板，但仍然收到相同的警告（随后没有渲染笔记本. 例如，PageTemplate.js 有以下查询（对 gatsby 构建没有任何抱怨）。
export const pageQuery = graphql`
query PageByPath($slug: String!)
page: markdownRemark(fields: slug: eq: $slug )
id
html
frontmatter
title
site
siteMetadata
facebook
appId
`;
为什么不在页面或布局文件夹中的文件中的这些查询也不会引发此错误？是否有其他文件可以解决问题？ FWIW，这是我正在尝试实现的实际模板。
import React from 'react'
import PropTypes from "prop-types";
import 'katex/dist/katex.min.css'
import ThemeContext from "../layouts";
const NotebookTemplate = ( data ) =>
const post = data.jupyterNotebook
const notebookJSON = JSON.parse(post.internal.content)
return (
<React.Fragment>
<p>
This notebook is displayed in the <strong>client-side</strong> using
react component
<code>NotebookPreview</code>
from
<a href="https://github.com/nteract/nteract/tree/master/packages/notebook-preview">
<code>@nteract/notebook-preview</code>.
</a>
</p>
<NotebookPreview notebook=notebookJSON />
</React.Fragment>
);
;
NotebookTemplate.propTypes =
data: PropTypes.object.isRequired
;
export default NotebookTemplate;
export const query = graphql`
query NotebookQuery($slug: String!)
jupyterNotebook(fields: slug: eq: $slug )
html
internal
content
`;
【问题讨论】：
【参考方案1】：我能够根据 this discussion. 修复此错误
问题出在gatsby-node.js。 exports.createPages 的设置方式，从未为笔记本创建页面。
我确实发现这个特定的错误消息非常具有误导性，而且 GraphQL 片段的文档让 Gatsby 非常困惑，因为大多数入门博客都设置了模板，这些模板不在具有完整 GraphQL 片段的页面/布局文件夹中。
【讨论】：
即使模板按预期工作，我也收到此错误。这确实是误导！ 那么解决方法是什么？遇到此问题，但您提供的链接显示“对于以后发现此问题的任何人，此问题已在周末自行解决。”，没有帮助。 该错误确实具有误导性。谢谢@stagermane，您提供的链接对我很有帮助。我的模板目录中有一个未使用的文件，它导出了页面查询。我通过删除页面查询解决了这个问题。当我在链接Note to my future self: This error is common when the template is not actually used; a bug in page generation (eg. in gatsby-node.js) will cause it. The instructions in the error are misleading. 上阅读此评论时，它击中了我
@stagermane 能否请您提供您的gatsby-node.js 文件？您的解决方案缺乏解释，您提供的链接也是如此。【参考方案2】：
我知道这是旧的，但我也遇到了同样的问题，这里的答案对我没有帮助。
由于 Gatsby 使用 debug 包，
帮助我追踪的是将调试的节点日志命名空间环境设置为gatsby:query-watcher，如query-watcher.ts 中指定的那样。
如果其他人对此感到困惑，只需像这样运行您的开发服务器，它应该可以帮助您更轻松地跟踪它：
env "NODE_ENV=development" "DEBUG=gatsby:query-watcher" npm run dev
【讨论】：
【参考方案3】：当我遇到类似问题时，我正在关注这个Gatsby Blog tutorial。我到了向gatsby-node.js 添加代码的部分。保存文件后，我希望能够浏览到我的博客文章，但我收到了以下警告：
The GraphQL query in the non-page component "C:/GitRepos/gatsby-blog-starter/src/templates/blogPost.js" will not be run.
就我而言，该解决方案没有任何意义，但我在这里分享它，因为它确实为我解决了问题。
我所做的是在blogPost.js 文件中注释掉postQuery 的整个代码，其中包含graphql 查询。保存文件并运行gatsby develop 后，我不再收到上述警告。但是当我尝试导航到博客文章时，Gatsby 说它无法访问属性 markdownRemark 的值。
所以，我在 blogPost.js 文件中取消了 postQuery 的整个代码的注释。然后保存文件后，一切正常。警告不再出现，我可以毫无问题地导航到我创建的博客文章。
我知道，这没有意义。但是在注释和取消注释其中包含 graphql 查询的代码后，我的问题得到了解决。
【讨论】：
【参考方案4】：对我来说，问题确实出在 stagermane 提到的 gatsby-node.js（createPages 函数）中，但是我失败的原因是 allMarkdownRemark 的限制为 1000，而我现在有超过 1000 页。
我只是将其更改为更高的数字，在本例中为 5000，如下所示，它起作用了！
allMarkdownRemark(limit: 5000) ...
【讨论】：
以上是关于GatsbyJS 网站的非页面组件中的 GraphQL 查询投诉的主要内容，如果未能解决你的问题，请参考以下文章
在 GatsbyJS 中使用 styled-components 设置自定义组件的样式