Gatsby カテゴリ一覧の作り方

Gatsbyでどのページにでも表示できるカテゴリ一覧を作る方法。

応用すればタグ一覧も作れます。

コンポーネントでページクエリ使えない

componentでクエリ使用すると次のようなエラーがでる。

TypeError: Cannot read property 'allMarkdownRemark' of undefined

クエリはpageかtemplateでしか使えない。なのでコンポーネントでクエリを使用する場合はStaticQueryを使用する。

公式ドキュメントはこちら

コンテンツにカテゴリー入れる

コンテンツにcategoryを入れておく。

---
title: コンテンツのタイトル
description: 説明文
date: 2020-04-22T11:30:00+09:00
category: gatsby
---

コンポーネントを作る

componentフォルダにコンポーネントファイルを作成。

// src/components/category-list.js
import React from "react"

// Components
import { Link, StaticQuery, graphql } from "gatsby"

const CategoryList = () => (
  <StaticQuery
    query={graphql`
      query {
        allMarkdownRemark(limit: 2000) {
          group(field: frontmatter___category) {
            fieldValue
            totalCount
          }
        }
      }
    `}
    render={data => (
      <nav>
        <h1>カテゴリ一覧</h1>
        <ul>
          {data.allMarkdownRemark.group.map(category => (
            <li key={category.fieldValue}>
              <Link to={`/categories/${category.fieldValue}/`}>
                {category.fieldValue} ({category.totalCount})
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    )}
  />
)

export default CategoryList

ページやテンプレートからコンポーネントを呼び出す

あとはページやテンプレートからコンポーネント呼び出せばOK。もちろんレイアウトに入れてもOK。

// src/pages/index.js
import React from "react"

import Layout from "../components/layout"
import CategoryList from "../components/category-list"

const BlogIndex = () => (
<Layout>
  <section>
    <div className="container">
      <CategoryList />
    </div>
  </section>
</Layout>
)

export default BlogIndex