CreatePage 为 Gatsby Throwing 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
        }
      })
    });

};

是的，我多次阅读 Gatsby 文档。它没有解决我的问题。谷歌也没有。

更新：

我设法让它部分工作。页面出现了，但没有数据出现。它是未定义的，我不知道为什么。

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

Answer 1

所以，错误出现在我的查询中。尽管它在 GraphQL 工具中显示了结果，但它并没有在实际页面上执行此操作。当我规定结果不能为空时，页面没有生成。我查询数据的方式必须改变。这是新的查询：

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

我还通过道具调用了信息，只是为了确保我得到了一切。看起来是这样的：

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
      ),
    }),
  }),
}

它在生成过程中没有抛出错误，因为没有错误。那时，空查询不是错误。我改变了我的 gatsby 节点。这是它的样子：

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
        }
      })
    });

};