CreatePage为Gatsby throw Error生成的页面

Question

我正在向我的Gatsby博客添加标记，并生成一个页面，该页面将查询带有该标记的所有帖子。页面正在生成，但帖子没有显示出来。我重新编写了代码，现在出现了这个错误:

Original error fixed. see update below.

这是我的模板文件:

import { Link, graphql } from "gatsby"
import * as React from "react"
import Layout from "../components/layout/layout"
// import PropTypes from "prop-types"
const TagList = ({ pageContext, data }) => {
const title = pageContext  
const { totalCount } = data.allMdx.group


return (
<Layout>
<h3>{ data.allMdx.group.fieldValue }</h3>
<ul>
{ data.allMdx.group.map( ({ nodes }) => {
return (
<li key={ nodes.id }>
<Link to={ `/blog/${ nodes.slug}` }>{nodes.title}</Link>
</li>
)
}
)}
</ul>
<Link to="/blog">All tags</Link>
</Layout>
);
}
export default TagList;
export const query = graphql`
query MyQuery($tags: String) {
allMdx(
filter: { frontmatter: { tags: { in: [$tags] } } }
) {
group(field: frontmatter___tags) {
fieldValue
nodes {
id
slug
frontmatter {
title
}
}
}
}
}
`;

下面是我的gatsby-node.js文件:

const path = require(`path`)
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
const tagTemplate = path.resolve('src/templates/tagTemplate.js');
const result = await graphql(`
query Tags {
allMdx {
group(field: frontmatter___tags) {
fieldValue
nodes {
id
slug
frontmatter {
title
}
}
}
}
}
`)
if (result.errors) {
console.log(result.errors);
reporter.panicOnBuild(`Error whil running GraphQL query`);
}

const tags = result.data.allMdx.group
tags.forEach(tags => {
createPage({
path: `/tags/${tags.fieldValue}/`,
component: tagTemplate,
context: {
tags: tags.fieldValue
}
})
});
};

是的，我读了好几遍盖茨比的文档。这并没有解决我的问题。谷歌也没有。

更新:

我设法使它部分工作。页面显示出来了，但是没有数据出现。这是未定义的，我不确定为什么。

我更新了上面的代码块以反映我所做的更改。我没有得到一个错误，否则我会发布它。

Answer 1

所以，错误是在我的查询。尽管它在GraphQL工具中显示了结果，但它并没有在实际页面上显示结果。当我规定结果不能为null时，页面没有生成。我查询数据的方式必须改变。下面是新的查询:

query($tags: String!) {
allMdx(
limit: 2000
sort: {fields: [frontmatter___date], order: DESC}
filter: {frontmatter: {tags: {eq: $tags }}}
) {
totalCount
edges {
node {
slug
frontmatter {
title
tags
}
}
}
}
}

我还通过props调用info，只是为了确保我得到了所有内容。如下图所示:

TagList.propTypes = {
pageContext: PropTypes.shape({
tag: PropTypes.string.isRequired,
}),
data: PropTypes.shape({
allMdx: PropTypes.shape({
totalCount: PropTypes.number.isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
frontmatter: PropTypes.shape({
title: PropTypes.string.isRequired,
}),
fields: PropTypes.shape({
slug: PropTypes.string.isRequired,
}),
}),
}).isRequired
),
}),
}),
}

在生成过程中没有抛出错误，因为没有错误。那时，空查询不是错误。我改变了我的盖茨节点。如下图所示:

const path = require(`path`)
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
const tagTemplate = path.resolve('src/templates/tagTemplate.js');
const result = await graphql(`
query Tags {
allMdx {
group(field: frontmatter___tags) {
fieldValue
totalCount
}
}
}

`)
if (result.errors) {
console.log(result.errors);
reporter.panicOnBuild(`Error whil running GraphQL query`);
}

const tags = result.data.allMdx.group
tags.forEach(tags => {
createPage({
path: `/tags/${tags.fieldValue}/`,
component: tagTemplate,
context: {
tags: tags.fieldValue
}
})
});
};