DEV Community


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 (

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

      <CategoryList categories={allChecCategory.nodes} />

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

      <ProductList products={allChecProduct.nodes} />

Discussion (0)

Editor guide