React Hookを使用してGraphQLでナビゲーションにカテゴリーリストを表示する

Navigation.js

import React from "react";
import { Link, useStaticQuery, graphql } from "gatsby";

const Navigation = () => {
  const data = useStaticQuery(graphql`
    query NavQuery {
      categories: allMarkdownRemark(limit: 2000) {
        group(field: frontmatter___category) {
          fieldValue
          totalCount
        }
      }
    }
  `);

  const categoryList = data.categories.group.map(cat => (
    <li key={cat.fieldValue}>
      <Link to={'/categories/' + cat.fieldValue}>
        <FiFile />
        {cat.fieldValue}
      </Link>
    </li>
  ));

  return (
    <nav>
      <ul>
        {categoryList}
      </ul>
    </nav>
  );
};

export default Navigation;