Why use Introspection to Query Enums?

When you are working on a project that allows users to pick an option, such as a school name, it is best to query for these values from your database instead of storing them on a list. This is because if new options are added you won’t have to worry about updating a list on the frontend. Moreover, if you needed to use these values in another file you could simply call the enum query.

What’s Introspection?

Introspection allows you to ask a GraphQL schema for information about what queries it supports.

In the introspection system, there are 6 introspection types we can use **Schema, **Type, **TypeKind, **Field, **InputValue, **EnumValue, **Directive.

To query the enums you need to use the **Type query resolver.

Using __Type

For this example, I will be using an enum that stores the names of 7 universities.

enum School {
  UNIVERSITY_OF_CALIFORNIA_IRVINE
  UNIVERSITY_OF_CALIFORNIA_LOS_ANGELES
  UNIVERSITY_OF_CALIFORNIA_SAN_DIEGO
  UNIVERSITY_OF_CALIFORNIA_SANTA_BARBARA
  UNIVERSITY_OF_CALIFORNIA_DAVIS
  UNIVERSITY_OF_CALIFORNIA_BERKLEY
}

Here’s how to query this enum:

query {
  __type(name: "School") {
    name
    enumValues {
      name
    }
  }
}

The __type query resolver requires the name parameter. This parameter allows you to search your schema for items such as objects and enums based on their name.

Once you run this query your result should look like this:

{
  "data": {
    "__type": {
      "name": "School"
      "enumValues": [
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_IRVINE"
        },
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_LOS_ANGELES"
        },
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_SAN_DIEGO"
        },
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_SANTA_BARBARA"
        },
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_DAVIS"
        },
        {
          "name": "UNIVERSITY_OF_CALIFORNIA_BERKLEY"
        }
      ]
    }
  }
}

This returns the name of the enum with all of its values. To use these values, store them in a variable when querying the enums. The statement should look like this:

const items = data.__type.enumValues;

Application on React Frontend

This example illustrates how to apply the enum query on a dropdown menu created with material-ui components. The enum items are stored in the list menuItems and then passed to the dropdown component with the map method. Thus, every time the user interacts with the dropdown menu the query will be called and all the values stored in the menuItems will be displayed.

<Query query={getSchool}>
  {({ data, loading, error }) => {
    let menuItems = []

    if (loading || error) {
      menuItems = []
    } else {
      menuItems = data.__type.enumVaLues
    }
    return (
      <Select
        value={this.state.school}
        onChange={e => this.setState({ school: e.target.value })}
        inputProps={{
          name: "school"
          id: "school-simple"
        }}
      >
        {menuItems.map(item => (
          <MenuItem value={formatEnum(item.name)}>
            {formatEnum(itme.name)}
          </MenuItem>
        ))}
      </Select>
    )
  }}
</Query>

The end result should look like this

Conclusion

Using introspection is easy and it’s a great way to reduce the number of variables that store the same information in your database. The best thing about using introspection is that no changes need to be done to the frontend to update the list being displayed.

If you want to learn more about introspection, I found this article helpful, GraphQL Introspection and Introspection Queries

If you want to learn more about GraphQL, I found these helpful concepts, 36-GraphQL-concepts.