GatsbyJS - How to Create Table of Contents

Last Updated: 2023-12-06

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>
    )}
  />
);