GatsbyJS - How to Create Table of Contents
Follow this page to add the slug
field. In this example, we query all the pages under /en/versus
and sort them alphabetically:
export default () => (
<StaticQuery
query={graphql`
query {
allMarkdownRemark(
filter: { fields: { slug: { regex: "^/en/versus/" } } }
sort: { fields: fields___slug }
) {
edges {
node {
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`}
render={(data) => (
<ul>
{data.allMarkdownRemark.edges.map((e) => (
<li>
<a href={e.node.fields.slug}>{e.node.frontmatter.title}</a>
</li>
))}
</ul>
)}
/>
);