Gatsbyブログの記事をタグ（カテゴリ）管理する：その① 記事一覧ページを作る

import { graphql } from "gatsby"

export const pageQuery = graphql`
  query ($tag: String) {
    site {
      siteMetadata {
        title
      }
    }
    allMdx(
      filter: { frontmatter: { tags: { in: [$tag] } } }
      sort: { fields: frontmatter___created, order: DESC }
    ) {
      totalCount
      edges {
        node {
          frontmatter {
            title
            modified_date(formatString: "YYYY/M/DD")
            thumbnail_image {
              childImageSharp {
                gatsbyImageData
              }
            }
            created(formatString: "YYYY/M/DD")
            tags
            description
            slug
          }
        }
      }
    }
  }
`

allMdx(
    filter: { frontmatter: { tags: { in: [$tag] } } }
    sort: { fields: frontmatter___created, order: DESC }
)

totalCount

edges

const Tags = ({ pageContext, data, location }) => {
    const { tag } = pageContext

const { edges, totalCount } = data.allMdx

{edges.map((edge) => {
          const post = edge.node
          const title = post.frontmatter.title || "タイトルなし"
          const slug = post.frontmatter.slug
          const created = post.frontmatter.created
          const lastModified =
            post.frontmatter.modified_date[0] || post.frontmatter.created
          const description = post.frontmatter.description || post.excerpt

          return (
            <PostCard
              title={title}
              slug={slug}
              created={created}
              lastModified={lastModified}
              description={description}
            />
          )
        })}

const path = require("path")
const _ = require("lodash")
const { AllTagDefinition } = require("./src/params/all-tag-difinition")

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

  // タグページのテンプレートを定義
  const tagTemplate = path.resolve(`./src/templates/tags.js`)

  // すべてのタグを取得する
  const result = await graphql(`
    {
      tagsGroup: allMdx {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `)

  // エラー処理
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  let tags = result.data.tagsGroup.group

  tags.forEach((tag) => {
    // タグの英名を取得する
    const tagDefinition = AllTagDefinition.filter(
      (item) => item.name === tag.fieldValue
    )
    const tagSlug =
      tagDefinition.length === 0 ? tag.fieldValue : tagDefinition[0].slug // 定義に無かった場合（filterした結果が空配列）は日本語のままslugにする。

    // createPage呼び出し
    createPage({
      path: `/tags/${_.kebabCase(tagSlug)}`,
      component: tagTemplate,
      context: {
        tag: tag.fieldValue,
      },
    })

  })
}

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

const tagTemplate = path.resolve(`./src/templates/tags.js`)

// すべてのタグを取得する
  const result = await graphql(`
    {
      tagsGroup: allMdx {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `)

let tags = result.data.tagsGroup.group

[
  [Object: null prototype] { fieldValue: 'AWS', totalCount: 2 },
  [Object: null prototype] { fieldValue: 'Airflow', totalCount: 2 },
  [Object: null prototype] { fieldValue: 'Gatsbyブログ作成', totalCount: 6 },
  [Object: null prototype] { fieldValue: 'Linux', totalCount: 1 },
  [Object: null prototype] { fieldValue: 'MWAA', totalCount: 2 },
  [Object: null prototype] { fieldValue: 'Node.js', totalCount: 1 },
  [Object: null prototype] { fieldValue: 'React', totalCount: 2 },
  [Object: null prototype] { fieldValue: 'npm/yarn', totalCount: 1 },
  [Object: null prototype] { fieldValue: 'プログラミング', totalCount: 11 },
]

const AllTagDefinition = [
  {
    name: "プログラミング",
    slug: "programming",
  },
  {
    name: "Linux",
    slug: "linux",
  },
  {
    name: "React",
    slug: "react",
  },
・・・省略（すべてのタグに対して設定）・・・
]

// オブジェクトにしてエクスポート
module.exports = { AllTagDefinition }

const { AllTagDefinition } = require("./src/params/all-tag-difinition")

tags.forEach((tag) => {
// タグの英名を取得する
const tagDefinition = AllTagDefinition.filter(
    (item) => item.name === tag.fieldValue
)
const tagSlug =
    tagDefinition.length === 0 ? tag.fieldValue : tagDefinition[0].slug // 定義に無かった場合（filterした結果が空配列）は日本語のままslugにする。

// createPage呼び出し
createPage({
    path: `/tags/${_.kebabCase(tagSlug)}`,
    component: tagTemplate,
    context: {
    tag: tag.fieldValue,
    },
})
})

{ AllTagDefinition : AllTagDefinition（オブジェクト）}

{ AllTagDefinition } = require("./src/params/all-tag-difinition")