Create a "hello world" todo app with Keystone 5

Model your API data with Lists and Fields in KeystoneJS

Create initial data with the `onConnect` async method in Keystone

Create a dropdown list of options with the Select field in Keystone

Build a CRUD-ready GraphQL API + Admin UI with KeystoneJS

In this lesson, we take a list of Dogs created in Keystone, and use the "Select" field type to add a "breed" field for each dog. We look at three different syntaxes to pass a list of options to the Select field, and how they affect the Admin UI.

Lecturer: [00:00] We have a blank Keystone starter project here with a single list, a list of dogs, with a single field, a name with a type of text. If we look at our admin UI, we can see that we have four dogs. Let's now go and add a breed field for these dogs.

[00:17] Up here in my file, I'll import the select field type from Keystone. I'll add a new field called Breed. This one is going to be a type of select. Select takes options for the different values.

[00:31] As we will see, there's different ways to pass these options. The simplest one is to pass a series of comma-separated values. If we go and restart our server, we should now have a new field type called Breed. Let's go and assign Billy. Billy is Labrador. Save that. We'll quickly update the other dogs.

[00:58] Let's take a look at our GraphQL playground. We can now query all dogs. We can ask for the name as well as the breeds. Here we go. We got a list of dogs.

[01:10] We've seen we can pass a list of comma-separated values. There are other ways to pass options. You can also pass an array of strings like that.

[01:21] Finally, there's a third way of passing options, which is an array of objects. We could have a label and then value. Let's grab this, put it there. Maybe start the labels with an uppercase. Voila, that's the third way of passing options.

[01:38] If we look at our admin UI, we can see here in the breed column that the uppercase labels are being used. However, the data coming back from the query uses the value with lower case.

Course

Build a CRUD-ready GraphQL API + Admin UI with KeystoneJS

Create a dropdown list of options with the Select field in Keystone

Share this video with your friends