loading...
Cover image for Create homepage of categories and products

Create homepage of categories and products

notrab profile image Jamie Barton ・1 min read

Inside a new directory src, and inside that a new folder for our pages, we'll create the file index.js.

We can query Chec using the @chec/gatsby-source-chec plugin we configured earlier.

Gatsby will run the exported pageQuery at build time. Let's write a query to get the merchant information, all categories, and products.

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

export default function IndexPage({
  data: { checMerchant, allChecProduct, allChecCategory },
}) {
  return (
    <div>
      <pre>{{ JSON.stringify(merchant, null, 2) }}</pre>
      <pre>{{ JSON.stringify(categories, null, 2) }}</pre>
      <pre>{{ JSON.stringify(products, null, 2) }}</pre>
    </div>
  )
}

export const pageQuery = graphql`
  query IndexPageQuery {
    checMerchant {
      business_name
    }

    allChecCategory {
      nodes {
        name
        slug
      }
    }

    allChecProduct {
      nodes {
        name
        permalink
        price {
          formatted_with_symbol
        }
      }
    }
  }
`;

Discussion

pic
Editor guide