我想做的事情

在侧边栏上展示了分类列表。
当选择展示的分类时，希望显示与该分类相关联的文章。

侧边栏只是展示并获取了以下分类。

import React from "react"
import { Container, Row, Nav } from "react-bootstrap"
import { useStaticQuery, Link, graphql } from "gatsby"

import Styles from "./sidebar.module.css"

const Sidebar = () => {
  const data = useStaticQuery(graphql`
    query {
      allContentfulCategory {
        edges {
          node {
            title
            slug
            id
            createdJP: createdAt(formatString: "Y年MM月DD日")
          }
        }
      }
    }
  `)

  const categories = data.allContentfulCategory.edges
  return (
    <div className={Styles.sidebar}>
      <Row>
        <div className="col-lg-12">
          <div className={Styles.sidebar_item}>
            <div className={Styles.sidebar_heading}>
              <h2>Categories</h2>
            </div>
            <div className="content">
              <Nav className={Styles.categories}>
                {categories.map(({ node }) => (
                  <Nav.Link
                    key={node.id}
                    as={Link}
                    to={`/category/${node.slug}`}
                  >
                    {node.title}
                  </Nav.Link>
                ))}
              </Nav>
            </div>
          </div>
        </div>
      </Row>
    </div>
  )
}

export default Sidebar

做法 (zuò fǎ)

我会在gatsby-node.js中为每个帖子页面按照分类进行创建。

创建按类别分类的页面

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // 使うテンプレのパス
  const categoryTemplate = path.resolve(`./src/templates/category.js`)
  const result = await graphql(
    `
      {
        allContentfulCategory {
          edges {
            node {
              slug
              id
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  const categories = result.data.allContentfulCategory.edges

  categories.forEach(category => {
    createPage({
      path: `category/${category.node.slug}`,
      component: categoryTemplate,
      context: {
        id: category.node.id,
        slug: category.node.slug,
      },
    })
  })
}

按照类别创建页面模板

根据路径.resolve（./src/templates/category.js）创建类别单独页面的模板。

这次是在/src/templates/category.js中创建的
然后，将变成与个别投稿相同

获取与GraphQL中的id匹配的类别，并循环显示与其关联的文章。

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const Category = ({ data }) => {
  const category = data.contentfulCategory
  const posts = data.contentfulCategory.blogpost

  return (
    <Layout>
      <h1 className="p-3">{category.title}</h1>
      {posts.map(post => {
        return (
          <div> {post.title}</div>
        )
      })}
    </Layout>
  )
}

export default Category

export const pageQuery = graphql`
  query($id: String!) {
    contentfulCategory(id: { eq: $id }) {
      id
      slug
      title
      blogpost {
        id
        slug
        title
      }
    }
  }
`