I create two types of posts in Gatsby JS. I have blog articles and projects. I am using this instruction - https://www.gatsbyjs.com/docs/tutorial/part-6/. The bottom line is that this approach of creating, for example, a blog does not require the use of a file gatsby-node.js.
By analogy, I decided that I would add to gatsby-config.js settings for projects
{
resolve: "gatsby-source-filesystem",
options: {
name: `blog`,
path: `${__dirname}/blog`,
}
},
{
resolve: "gatsby-source-filesystem",
options: {
name: `projects`,
path: `${__dirname}/projects`,
}
},
Then I will create a Projects folder next to the Blog folder and recreate a structure like this in it
pages
|___blog
| |___{mdx.frontmatter__slug}.js
| |___index.js
|
|___projects
|___{mdx.frontmatter__slug}.js
|___index.js
And I thought that everything would work for me. The problem is that the site itself works in the develop mode, but when you do gatsby build, then errors are issued all the time. My approach is fundamentally wrong in something. In what?
In order not to copy the code of my files here, I opened a repo - https://github.com/leokolt/schtml/.
Here is an error that occurs when building a project, while everything works in development mode. Gatsby is trying to create a yet-another-post page under the projects type, although it belongs to the blog type.
ERROR
Page data from page-data.json for the failed page "/projects/yet-another-post/": {
"componentChunkName":
"component---src-pages-projects-mdx-frontmatter-slug-js-content-file-path-c-gatsby-schtml-blog-third-post-index-mdx",
"path": "/projects/yet-another-post/",
"result": {
"data": {
"mdx": null
},
"pageContext": {
"id": "74425280-1f4a-54bc-b4dd-029579178280",
"frontmatter__slug": "yet-another-post",
"__params": {
"frontmatter__slug": "yet-another-post"
},
"frontmatter": {
"title": "Yet Another Post",
"date": "2021-07-25",
"slug": "yet-another-post",
"tags": [
"animals",
"Chicago",
"zoos"
],
"categories": [
"GatsbyJS",
"Gatsby Develop",
"Сайт с нуля"
],
"posttype": "blog",
"featuredImage": "./third.jpg"
}
}
},
"staticQueryHashes": [
"3764592887"
]
}
failed Building static HTML for pages - 6.819s
ERROR #95313
Building static HTML failed for path "/projects/yet-another-post/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
WebpackError: TypeError: Cannot read property 'frontmatter' of null
- {mdx.frontmatter__slug}.js:22
webpack:/schtml/src/pages/projects/{mdx.frontmatter__slug}.js:22:19
- emotion-styled-base.esm.js:1
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:1:59
- emotion-styled-base.esm.js:4
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:4:50
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- emotion-styled-base.esm.js:4
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:4:50
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- index.js:62
[schtml]/[camelcase]/index.js:62:1
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- emotion-styled-base.esm.js:5
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:5:65
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- emotion-styled-base.esm.js:4
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:4:50
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- emotion-styled-base.esm.js:2
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:2:32
- emotion-styled-base.esm.js:4
[schtml]/[@emotion]/styled/base/dist/emotion-styled-base.esm.js:4:50
- {mdx.frontmatter__slug}.js:26
schtml/src/pages/projects/{mdx.frontmatter__slug}.js:26:10
- index.js:62
[schtml]/[camelcase]/index.js:62:1
In the same way I reccomended you in Crate Tag & Category taxonomy in Gatsby your approach will become far way easiest if you add a key value to your markdowns in order to filter which type of data are you querying. Otherwise, your GraphQL query won't be able to infer the type of data (project or post) you are fetching because the query is exactly the same and at the same level.
Given the same project sample you have:
---
title: "First Work"
date: "2021-08-28"
slug: "first-work"
posttype: projects
---
You can take advantage of posttype creating a file like:
{mdx.frontmatter__variant}/{mdx.slug}.js
To create specific queries and pages for each variant, since posttype will become the first nested level