The GraphQL query in the non-page component

Question

Material that i Used

・Contentful ・Gatsby ・Graphql

Success

Got a Content from Contentful By using a 8000_graphql and show up on local URL(http://localhost:8000/)

Fail

Switched out a page URL(http://localhost:8000/) to URL(http://localhost:8000/blog/....) that shows up 404 pages.

Error

warn The GraphQL query in the non-page component "C:/Users/taiga/Github/Gatsby-new-development-blog/my-blog/src/templates/blog.js" will not
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

blog.js

import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import Nav from '../components/nav';
import SEO from '../components/seo';
import './blog.css';

const BlogTemplate = (props) => {
    return (
        <Layout>
        <SEO title={props.data.contentfulBlog.seoTitle} description={props.data.contentfulBlog.seoDescription} keywords={props.data.contentfulBlog.seoKeywords} />
        <Nav />
        <div className='blog__header'>
            <div className='blog__hero' style={{backgroundImage:  `url(${props.data.contentfulBlog.featuredImage.fluid.src})`}}></div>
            <div className='blog__info'>
                <h1 className='blog__title'>{props.data.contentfulBlog.title}</h1>
            </div>
        </div>
        <div className='blog__wrapper'>
            <div className='blog__content'>
                <div dangerouslySetInnerHTML={
                    {__html: `${props.data.contentfulBlog.content.childMarkdownRemark.html}`}
                } />
            </div>
        </div>
        </Layout>
    )
}

export default BlogTemplate;


export const query = graphql`
 query BlogTemplate($id: String!) {
   contentfulBlog(id: {eq: $id}) {
     title
     id
     slug
     content {
       childMarkdownRemark {
         html
       }
     }
     seoTitle
     seoDescription
     seoAuthor
     seoKeywords
     seoImage {
       fluid(maxWidth: 1200, quality: 100) {
         ...GatsbyContentfulFluid
         src
       }
     }
     featuredImage {
       fluid(maxWidth: 1200, quality: 100) {
         ...GatsbyContentfulFluid
         src
       }
     }
   }
 }
`