From Silos to Synergy: The Complete Playbook to Frontend Tech-Stack Unification


2.2 Configure enumerations


When we create product entries for our e-commerce, we want to be able to select values - such as product size or color - from a dropdown menu. This makes sense for our project because we want to be able to only publish products in certain colors & sizes. Making this a dropdown in our content creation screen ensures that only the values we predefine will be used for those product characteristics.

In Hygraph, you do this by adding a dropdown menu to your model. This dropdown gets the list of values from an enumeration that you need to configure before you create the dropdown field.

An enumeration is a predefined set of values that represents a list of possible options. We can use enumerations to group values within a type and then use them when we add a dropdown field.

We will be using enumerations for the components that we are going to create in our next lesson. Let's configure them.

#Configure enumerations

Adding enumerations is very simple.

Adding enumerationsAdding enumerations

We always add them in the same way:

  1. In the Schema editor, we click on +Add next to Enumerations.
  2. We then type in a Display name, which is the name that we will see in the Schema.
  3. We also add an API ID, which we can use later to access the enumeration through the API Playground.
  4. Next, we add enumeration values by typing them in the Values field and then clicking on +Add to list. We will need to do this for each value.
  5. To save our enumeration, we simply click Add enumeration.

For this tutorial, we will add 4 enumerations: separate sizes for shoes and clothes, and separate colors for wearables and decor.

Use the following information to add them:

Clothes size

Display nameClothes size
API IDClothesSize
Enumeration valuesOne by one, add the following: XS, S, M, L, XL

Clothes size enumerationClothes size enumeration

Shoes size

Display nameShoes size
API IDShoesSize
Enumeration valuesOne by one, add the following: Size_35, Size_36, Size_37, Size_38, Size_39, Size_40, Size_41, Size_42, Size_43, Size_44

Shoes size enumerationShoes size enumeration

Wearable items color

Display nameWearable items color
API IDWearableItemsColor
Enumeration valuesOne by one, add the following: Red, Green, Blue, Black, White

Wearable items color enumerationWearable items color enumeration

Decor items color

Display nameDecor items color
API IDDecorColor
Enumeration valuesOne by one, add the following: Gold, Silver, Bronze, Cobalt

Decor items color enumerationDecor items color enumeration

After adding your Enumerations the left sidebar should look like this:

Your enumerations listed in the schemaYour enumerations listed in the schema