Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Lesson 4 - Components

This section covers building the components the e-commerce project needs and attaching them to the correct models.

A component is a reusable set of fields defined once in the schema and embedded in models as a basic or modular component field. The components built here solve two specific problems in this project. The Product Variant modular component makes it possible for a single Product model to handle clothing, shoes, accessories, and decor, each with its own required fields, without creating four separate models. The Stripes modular component on the Landing page model gives editors the ability to compose pages from a variable combination of CTA and Product Grid sections.

By the end of lesson 4.2, the following models are updated:

  • Product — Product Variant and Related Products components attached
  • Landing page — Stripes modular component attached
  • Navigation — Nav Link component attached, completing the model left open in lesson 1.2

#Components and component fields

A component and a component field are two different things. You create the component first, then embed it in a model using a component field.

Hygraph supports two types of component fields:

TypeWhat it does
Basic component fieldEmbeds a single component type. Use this when the field always contains the same structure.
Modular component fieldAllows editors to choose from a set of component types. Use this when editors need to select which component fills the field.

The product type components (Clothing, Shoes, Accessories, Decor) use a modular component field inside Product Variant because the content editor needs to present a choice. The Related Products component uses a basic component field because no choice is required. It always contains the same structure.

#Build order matters

Some components depend on others. Build them in this order:

  1. Related Products
  2. Clothing, Shoes, Accessories, Decor (in any order)
  3. Product Variant (depends on 2)
  4. Button
  5. Call to Action (depends on 4)
  6. Product Grid
  7. Link component modification (pre-built in the cloned project)

For the complete components documentation, see Components.

#Lessons in this section

LessonWhat you will do
4.1 Build componentsCreate components and configure their fields, references, and nested component fields
4.2 Add components to your modelsAttach the components to the Product, Landing page, and Navigation models to complete the schema

#What's next

Lesson 4.1 - Build components

Or, go to the Tutorial overview for the full lesson list.