GatsbyJS 网站非页面组件中的 GraphQL 查询投诉

Question

我正在尝试向 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 build 没有任何抱怨）。

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
      }
    }
  }
`;

Answer 1

我能够根据 this discussion.

修复此错误

问题出在 gatsby-node.js。 exports.createPages 的设置方式从未为笔记本创建页面。

我确实发现这个特定的错误消息非常具有误导性，并且 GraphQL 片段的文档对于 Gatsby 来说非常混乱，考虑到大多数入门博客都是使用不在 page/layout 文件夹中的模板设置的完整的 GraphQL 片段。

Answer 2

我知道这已经过时了，但我也运行遇到了同样的问题，这里的答案对我没有帮助。

由于 Gatsby 使用 debug 包，帮助我找到它的方法是将调试的节点日志记录命名空间环境设置为 gatsby:query-watcher，如 query-watcher.ts.

中指定

如果其他人在这方面遇到问题，运行你的开发服务器就像这样，它应该可以帮助你更容易地找到它：

env "NODE_ENV=development" "DEBUG=gatsby:query-watcher" npm run dev

Answer 3

当我运行遇到类似问题时，我正在关注此 Gatsby Blog tutorial。我到了将代码添加到 gatsby-node.js 的部分。保存文件后，我希望能够浏览到我的博客 posts，但我却收到以下警告：

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 后，我不再收到上面的警告。但是当我尝试导航到博客 post 时，Gatsby 说它无法访问属性 markdownRemark.

的值

因此，我取消了 blogPost.js 文件中 postQuery 的整个代码的注释。然后保存文件后，一切正常。警告不再显示，我可以毫无问题地导航到我创建的博客 post。

我知道，这没有意义。但是我的问题在评论和取消注释其中包含 graphql 查询的代码后得到解决。

Answer 4

对我来说，问题确实出在 stagermane 提到的 gatsby-node.js（createPages 函数）中，但是我失败的原因是 allMarkdownRemark 的限制是 1000，而我现在有更多超过 1000 页。

我只是将它更改为一个更大的数字，在本例中为 5000，如下所示，它起作用了！

allMarkdownRemark（限制：5000）{...}

GatsbyJS 网站非页面组件中的 GraphQL 查询投诉

GraphQL query complaints in non-page component for GatsbyJS website

reactjs

jupyter-notebook

graphql

graphql-js

gatsby