Skip to content

Instantly share code, notes, and snippets.

@chocolat5

chocolat5/Navigation.js Secret

Created Jan 13, 2020
Embed
What would you like to do?
React Hookを使用してGraphQLでナビゲーションにカテゴリーリストを表示する
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.