GraphQL在GatsbyJS网站的非页面组件中查询投诉 [英] GraphQL query complaints in non-page component for GatsbyJS website
本文介绍了GraphQL在GatsbyJS网站的非页面组件中查询投诉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将新模板添加到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
}
}
}
}
`;
为什么不在Pages或Layout文件夹中的文件中的这些查询没有引发此错误?有没有其他文件可以解决这个问题?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
}
}
}
`;
推荐答案
我能够根据this discussion.
修复此错误问题在gatsby-node.js
中。按照exports.createPages
的设置方式,从未为笔记本创建页面。
我确实发现这个特定的错误消息非常具有误导性,而且GraphQL片段的文档对Gatsby来说非常令人困惑,因为大多数入门博客都是使用不在页面/布局文件夹中的模板设置的,这些文件夹中没有完整的GraphQL片段。
这篇关于GraphQL在GatsbyJS网站的非页面组件中查询投诉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文