Я пытаюсь построить свое новое приложение Gatsby JS.
Это приложение хорошо работает, когда я пытаюсь разработать gatsby .
Но когда я попробовал для сборки, Builder не может найти вариант frontmatter.
Похоже, что у GraphQL нет проблем, потому что я могу проверить содержимое уценки в журнале.
Что не так в моем коде?
gatsby-config. js
...
plugins: [
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/articles`,
name: "articles",
},
},
...
src / pages / markdown-template. js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import CustomCard from "../components/ui/customcard"
import "./markdown-template.css"
export default function Template({ data }) {
console.log(data.markdownRemark)
const frontmatter = data.markdownRemark.frontmatter
const html = data.markdownRemark.html
const tags = frontmatter.tags
return (
<Layout>
<CustomCard>
<div className="article">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.updated}</h2>
<div className="tags-container">
<div className="tags">
{tags.map(tag => {
return <span className="tag">{tag}</span>
})}
</div>
</div>
<hr />
<div
className="article-body"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</CustomCard>
</Layout>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
created(formatString: "YYYY-MM-DD")
updated(formatString: "YYYY-MM-DD")
path
title
tags
category
language
}
}
}
`
Вывод на консоль при попытке запустить сборку gatsby
...
success Building production JavaScript and CSS bundles - 9.682s
success Rewriting compilation hashes - 0.005s
success run queries - 9.978s - 10/10 1.00/s
[ ] 0.001 s 0/7 0% Building static HTML for pages
{
html: '<p>asdf</p>\n<h1>test</h1>',
frontmatter: {
created: '2020-01-10',
updated: '2010-01-10',
path: '/article/hello',
title: 'Hello Gatsby',
tags: [ 'Hello', 'World' ],
category: 'test',
language: 'ko'
}
}
failed Building static HTML for pages - 1.742s
ERROR #95313
Building static HTML failed for path "/markdown-template/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
8 | export default function Template({ data }) {
9 | console.log(data.markdownRemark)
> 10 | const frontmatter = data.markdownRemark.frontmatter
| ^
11 | const html = data.markdownRemark.html
12 | const tags = frontmatter.tags
13 |
WebpackError: TypeError: Cannot read property 'frontmatter' of null
- markdown-template.js:10 Template
src/pages/markdown-template.js:10:43
...