Gatsby.jsサイトにCategoryページを導入する

---
title: Gatsby.jsサイトにCategoryページを導入する
date: 2020-11-01 00:00:00 -0900
category: tech
tags: [gatsbyjs]
---

# 以下記事本文

# /src/templates/category.js

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import PostCard from '../components/postCard'

const Category = ({ pageContext, data }) => {
  const { category } = pageContext
  const { edges, totalCount } = data.allMarkdownRemark
  const catHeader = `「${category}」カテゴリの記事（${totalCount}件）`

  return (
    <Layout>
      <div className="md:flex">
        <div className="w-full md:w-3/4">
          <h1 className="pl-3 md:pl-0 text-lg mb-6">{catHeader}</h1>
          <div className="">
            {edges.map(({ node }) => {
              return <PostCard node={node} />
            })}
          </div>
        </div>
      </div>
    </Layout>
  )
}

export default Category

export const pageQuery = graphql`
  query($category: String) {
    allMarkdownRemark(
      limit: 2000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { category: { eq: $category } } }
    ) {
      totalCount
      edges {
        node {
          excerpt(pruneLength: 100)
          fields {
            slug
          }
          timeToRead
          frontmatter {
            title
            date(formatString: "MMMM DD, YYYY")
            category
          }
        }
      }
    }
  }
`

# gatsby-node.js
const path = require(`path`)
const _ = require('lodash')
const { createFilePath } = require(`gatsby-source-filesystem`)

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

  const blogPost = path.resolve(`./src/templates/blog-post.js`) //こちらは個別記事を生成する部分で今回無関係
  const catTemplate = path.resolve(`./src/templates/category.js`) //ここで先ほど作ったテンプレートを読み込む

  return graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
                category // categoryを追加
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages. 個別記事生成　今回無関係
    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: post.node.fields.slug,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    // Create blog post list pages 記事リスト生成　今回無関係
    const postsPerPage = 6
    const numPages = Math.ceil(posts.length / postsPerPage)

    Array.from({ length: numPages }).forEach((_, i) => {
      createPage({
        path: i === 0 ? `/` : `/${i + 1}`,
        component: path.resolve('./src/templates/blog-list.js'),
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          numPages,
          currentPage: i + 1,
        },
      })
    })

    // この部分を今回追加
    // create Category pages
    let categories = []
    _.each(posts, edge => {
      if (_.get(edge, 'node.frontmatter.category')) {
        categories.push(edge.node.frontmatter.category)
      }
    })
    // Eliminate duplicate categorya
    categories = _.uniq(categories)
    // Make category pages
    categories.forEach(category => {
      createPage({
        path: `/category/${_.kebabCase(category)}/`,
        component: catTemplate,
        context: {
          category,
        },
      })
    })
    // 今回追加ここまで
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}