title: GraphQL query complaints in non-page component for GatsbyJS website
body: <p>I'm trying to add a new template to the <a href="https://github.com/greglobinski/gatsby-starter-hero-blog" rel="noreferrer">gatsby-starter-hero-blog</a>, but my GraphQL query for the new template is being rejected: </p>
  
  <pre><code>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
  </code></pre>
  
  <p>The folder structure is as so:</p>
  
  <pre><code>--src
    --components
    --images
    --pages
    --templates
      --CategoryTemplate.js
      --NotebookTemplate.js
      --PageTemplate.js
      --PostTemplate.js     
    --theme
    --utils
  </code></pre>
  
  <p>NotebookTemplate.js is the new template I'm adding (for rendering Jupyter notebooks using Nteract's Gatsby plugin).</p>
  
  <p>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).</p>
  
  <pre><code>export const query = graphql`
    query NotebookQuery($slug: String!) {
      jupyterNotebook(fields: { slug: { eq: $slug } }) {
        html
        internal {
          content
        }
      }
    }
  ` 
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>export const pageQuery = graphql`
    query PageByPath($slug: String!) {
      page: markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        html
        frontmatter {
          title
        }
      }
      site {
        siteMetadata {
          facebook {
            appId
          }
        }
      }
    }
  `;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>import React from 'react'
  import PropTypes from "prop-types";
  import 'katex/dist/katex.min.css'
  import { ThemeContext } from "../layouts";
  
  const NotebookTemplate = ({ data }) =&gt; {
    const post = data.jupyterNotebook
    const notebookJSON = JSON.parse(post.internal.content)
    return (
      &lt;React.Fragment&gt;
          &lt;p&gt;
            This notebook is displayed in the &lt;strong&gt;client-side&lt;/strong&gt; using
            react component
            &lt;code&gt;NotebookPreview&lt;/code&gt;
            from
            &lt;a href="https://github.com/nteract/nteract/tree/master/packages/notebook-preview"&gt;
              &lt;code&gt;@nteract/notebook-preview&lt;/code&gt;.
            &lt;/a&gt;
          &lt;/p&gt;
          &lt;NotebookPreview notebook={notebookJSON} /&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  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
        }
      }
    }
  `;
  </code></pre>