GraphQL query complaints in non-page component for GatsbyJS website

Question

I'm trying to add a new template to the gatsby-starter-hero-blog, but my GraphQL query for the new template is being rejected:

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

The folder structure is as so:

--src
  --components
  --images
  --pages
  --templates
    --CategoryTemplate.js
    --NotebookTemplate.js
    --PageTemplate.js
    --PostTemplate.js     
  --theme
  --utils

NotebookTemplate.js is the new template I'm adding (for rendering Jupyter notebooks using Nteract's Gatsby plugin).

The syntax of my added template query is identical to the other templates (and I do have a sample notebook in the content which is visible in GraphiQL).

export const query = graphql`
  query NotebookQuery($slug: String!) {
    jupyterNotebook(fields: { slug: { eq: $slug } }) {
      html
      internal {
        content
      }
    }
  }
`

I even tried creating a barebones template with a simple query mirroring one of the other templates (even trying an exact copy of a template with the component names changed) and still am getting the same warning (and subsequently no rendering of the notebook. For example, the PageTemplate.js has the following query (which gives no complaints on gatsby build).

export const pageQuery = graphql`
  query PageByPath($slug: String!) {
    page: markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      frontmatter {
        title
      }
    }
    site {
      siteMetadata {
        facebook {
          appId
        }
      }
    }
  }
`;

Why are these queries in files not in the pages or layout folder not also throwing this error? Is there some other file that allows a workaround? FWIW, This is the actual template I'm trying to implement.

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

stagermane stagermane · Accepted Answer · 2018-08-20T03:14:45

I was able to fix this error based on this discussion.

The problem was in gatsby-node.js. The way that exports.createPages was set up, pages were never being created for the notebooks.

I do find this particular error message very misleading, and the documentation for GraphQL fragments is very confusing for Gatsby, considering most of the starter blogs are set up with templates that are not in page/layout folders that have intact GraphQL fragments.

GraphQL query complaints in non-page component for GatsbyJS website

4 Answers