The GraphQL query in the non-page component - graphql

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