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 create a couple of KeystoneJS Lists. We will give the lists a name, which Keystone will use to automatically generate GraphQL queries and mutations. We will then query items and create new items from the GraphQL Playground.

Instructor: [00:00] To create a list in Keystone, I'll start by requiring the text field so we can use it in the list. I will now create a list with Keystone that create list.

[00:11] First, we give it a singular name, let's say cat. We'll define what fields we want in there. In the fields object, I'll add a name field which uses the text field type that we required just before. I will now start my dev server with Dev.

[00:29] If we go to the admin UI on localhost port 3000, we can see our cats list up there. It currently has no items. Let's create a cat named Pixel and save. Let's create another list now. We'll copy and paste our cat list and make this one a list of dogs. Fields can remain the same. If I restart my server, we now see our two lists.

[00:57] Let's also create a dog quickly. We'll call this one Maya. Both our lists now have one entry.

[01:05] Let's go to the graph QL playground. In the dogs tab here, we can see that we can, for example, query for all cats or all dogs. Query all cats. I want all cats and for each, I'll ask for the name field. Here's Pixel that we created just before.

[01:24] We can also use mutations to create items. I'll write a mutation called create cat. To create a cat, I'll need to pass a data objects to the mutation with a value for the name field. Let's call this one Felix. We'll ask for that name in the query response. Let's run that mutation now. There it is. If rerun the old cats query, we now have two cats.

[01:48] Just for fun, let's create a dog as well with the create dog mutation. Same deal. We give it a name value. Let's call it Bingo. Ask for the ID and name as a response. I'll run that mutation. Here's the new dog with an auto generated ID and the desired name.

[02:08] If we go back to our admin UI, we can see our two cats as well as our two dogs.

Course

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

Model your API data with Lists and Fields in KeystoneJS

Share this video with your friends