loading...

Create categories index page

notrab profile image Jamie Barton ・1 min read

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
      }
    }
  }
`;

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

pic
Editor guide