Build a Hygraph component

Previously, you created a GraphCommerce app and started building a custom header. You're now ready to build a Hygraph component.

Hygraph is the integrated Content Management System that is part of the magento-graphcms example.

In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your app. The final result will be relatively simple, but you'll learn where to find resources to build more complex features on your own.

After you've finished this tutorial, you'll have accomplished the following:

• Create a Model in Hygraph, called Banner
• Configure the Model's copy and image field
• Define the relationship between the Banner Model and Page Content field
• Write a GraphQL query fragment and add it to the page query
• Add the component to the page renderers

Requirements

You've familiarized yourself with React ↗, Next.js ↗, and Mui ↗. GraphCommerce is a frontend React framework that uses Next.js for server-side rendering.

Create the Hygraph model

• Login to Hygraph, navigate to the Schema and add a new Model called "Banner"
• Add a single line text field called "Identity" and configure the following:

• Add an Asset field called "Image" and configure the following:

• Add a Rich text field called "Copy" and configure the following:

Define relationship with Content field

To be able to use the newly created model to add banners to pages, define the relationship between the Banner model and the Content field of the Page model.

• Navigate to the Page Schema. Edit the field called "Content"
• Click "Define relationship" (collapsed by default). Add the Banner model to "Models to reference"

• Navigate to Content, edit the Homepage entry and add a new banner instance to the homepage:

Validate GraphQL Schema

• Go to your local environment and run yarn codegen, this ensures the changes you just made are added to your local environment.
• To validate the addition of the Banner model and the relation with the Page model Content field, try out the following GraphQL query in your local GraphQL endpoint (running at http://localhost:3000/api/graphql):

query {
  pages(where: { url: "page/home" }) {
    title
    content {
      __typename
    }
  }
}

Should output the following. Make note that 'Banner' is listed as a typename.

Create the component query fragment

• Add a new file, /components/GraphCMS/Banner/Banner.graphql:

fragment Banner on Banner {
  image {
    ...Asset
  }
  copy {
    raw
  }
}

• After saving the file, a new file Banner.gql.ts should be created automatically. Take a look at the file's contents. It should export the type BannerFragment.

Add the query fragment to the page query fragments

• In /components/GraphCMS/RowRenderer.graphql, add the fragment:

fragment RowRenderer on Page @inject(into: ["HygraphPage"]) {
  content {
    __typename
    ... on Node {
      id
    }
    ...RowColumnOne
    ...RowColumnTwo
    ...RowColumnThree
    ...RowBlogContent
    ...RowHeroBanner
    ...RowSpecialBanner
    ...RowQuote
    ...RowButtonLinkList
    ...RowServiceOptions
    ...RowContentLinks
    ...RowProduct
    ...RowLinks
  }
}

Create the React component

• Add a new file, /components/GraphCMS/Banner/index.tsx:

import { RichText } from '@graphcommerce/graphcms-ui'
import { BannerFragment } from './Banner.gql'

export function Banner(props: BannerFragment) {
  const { copy, image } = props

  return (
    <div>
      {image?.url}
      <RichText
        {...copy}
        sxRenderer={{
          paragraph: {
            textAlign: 'center' as const,
          },
          'heading-one': (theme) => ({
            color: theme.palette.primary.main,
          }),
        }}
      />
    </div>
  )
}

Add the component to page components

• In /components/GraphCMS/RowRenderer.tsx, add to the imports:

import { Banner } from './Banner'

• In the same file, add banner:

const defaultRenderer: Partial<ContentTypeRenderer> = {
  RowColumnOne,
  RowColumnTwo,
  RowColumnThree,
  RowHeroBanner,
  RowSpecialBanner,
  RowQuote,
  RowBlogContent,
  RowButtonLinkList,
  RowServiceOptions,
  RowContentLinks,
  RowProduct,
  Banner,
}

• If a Model entry had been added to the homepage content field, it should render. Note that the order in which content of the content field is sorted, matters:

Next steps

• Explore the GraphCommerce framework