DEV Community

Jamie Barton
Jamie Barton

Posted on

Create categories index page

Let's also create an index page for just our categories. Inside a new file src/pages/categories.js, add the following:

import React from "react";
import { graphql } from "gatsby";

import CategoryList from "../components/CategoryList";

export default function CategoriesPage({ data: { allChecCategory } }) {
  return (
    <React.Fragment>
      <h1>Categories</h1>

      <CategoryList categories={allChecCategory.nodes} />
    </React.Fragment>
  );
}

export const pageQuery = graphql`
  query CategoriesPageQuery {
    allChecCategory {
      nodes {
        name
        slug
      }
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

Here we're exporting a query which just fetches our categories.

It's important to remember that Gatsby fetches all of these nodes, so we're querying Gatsby, and NOT Chec API at this point.

Discussion (0)