Gatsby not generate correct page

Question

I'm facing a problem that could not generate a blog.js page.

Success

• I could have connected gatsby and contentful and got the data on the home page(http://localhost:8000 )

fail

• when I clicked the read more button, Card on (localhost:8000), and switched into another page (localhost:8000/blog/(content that I created on contentful)) that has not succeeded and 404pages has appeared(the only slag has changed and appeared that I expected to).

My repo

My partial solution (but not working that I hoped to)

・Transfrer file (./src/templates/blog.js)→(./src/pages/blog.js) in this way that could've shown up the page (http://localhost:8000/blog) but I don't know why ) and bellow the error was disappear but could have not fetched the data(contentful).

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.

Next error

• Cannot read property 'contentfulBlog' of undefined

Answer 1

According to your gatsby-node.js, and assuming you've uncommented those lines, you have a mismatch between your "Read more" button and the path generated to all tech.js content.

First of all, to clarify your partial solution: it will never work because in your gatsby-node.js you are telling Gatsby that the template for all contentfulBlog is certain template. You are generating each page from the retrieved data and passing the id (to filter) in that template. Since you've moved the template path to a page folder, all that content is not passed properly and became undefined.

/blog/tech is not set as path anywhere in your gatsby-node.js. You have:

path: i === 0 ? `/category/tech` : `/category/tech/${i + 1}`,

So, if your "Read more" links to /blog/path it will always fail since that content may be fetched properly, but it's never set to that path.

You need to fix those paths to fit your requirements. You can change your gatsby-node.js path to:

path: i === 0 ? `/blog/tech` : `/blog/tech/${i + 1}`,

Or changing your "Read more" button.