loading...

Update index page to use CategoryList component

notrab profile image Jamie Barton ・1 min read

Above where we're importing ProductList, let's import the CategoryList component:

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

Then where we have:

<pre>{JSON.stringify(categories, null, 2)}</pre>

Replace it with:

<CategoryList categories={allChecCategory.nodes} />

Finally let's add a <h1 /> to the page with our merchant.business_name, and add links to both the category and product index pages.

Where we're importing graphql from the gatsby dependency, let's also import Link.

import { graphql, Link } from "gatsby";

Now update the IndexPage function to look a little something like:

export default function IndexPage({
  data: { checMerchant, allChecProduct, allChecCategory },
}) {
  return (
    <React.Fragment>
      <h1>{checMerchant.business_name}</h1>

      <h3>
        <Link to="/categories">Categories</Link>
      </h3>

      <CategoryList categories={allChecCategory.nodes} />

      <h3>
        <Link to="/products">Products</Link>
      </h3>

      <ProductList products={allChecProduct.nodes} />
    </React.Fragment>
  );
}

Discussion

pic
Editor guide