TodoCMS

Creating a Project

Creating a robust, GraphQL powered, content API in GraphCMS is as easy as pushing a button! This button.

"Create a project"

Select From Scratch in the next dialog.

Naming and Region

"Naming a Project"

From there, you will be presented with the following options:

Name

The name of the project for easily locating the content later and for identification in the API.

Description

A helpful description to explain what the purpose of the project is. Think about onboarding new employees in the future, it's not always as obvious as we think.

Select a Region

Choosing which servers the project will run from. To help you decide, we've created a very helpful millisecond readout to let you see which servers are fastest from your current location. Since we are based in Germany, you can see that Germany (Beta) is our current fast option.

It seems every new technology that comes out has to demonstrate their ability by creating a Todo application. Let's do the same! With GraphCMS, no project is too small to create a CMS for, it's simplified!

We'll call our project TodoCMS and we'll host it in the EU.

Adding a Model

After we've created our project we need to define a model on our schema. Schemas are the blueprints our project content will follow. You can read more about them here. You can read more about models here.

To add a model on the schema, we first need to click on the menu option "Schema" in the menu. If you don't see it, you may need to talk to the project owner to get the right permissions to access them. If you've been able to create a project, however, you should see it.

"Sidebar Schema View"

We should now see two options:

  1. That we are on the Models View
  2. That we can create a new Model

Create a Model

Click on "Create Model" and you will be presented with another dialog to add a name and description. The API ID, as in the rest of the application, will be automatically generated. You can override this, but it's recommended to do this as little as possible to avoid naming problems later.

Fill it out with something like this.

"A filled out model with Todo details"

Creating an Enum

We are going to switch away from the model for a moment to create an Enumeration. This will make sense in a minute.

Click on the Enumeration Header in the Schema sidebar.

Then click on "Create Enumeration" and you'll be presented with this model.

"Create Enum"

Fill in the fields as I have done here. To add options, type your option in the "Possible Values" field and click "Add to List".

It's important to note that Enums can't contain spaces or any special characters and must begin with a capital. It's a convention for this special type of field and in our efforts to make the worlds most developer friendly CMS, we keep these concepts as transparent as possible.

You can read more about enums here.

Adding Fields

Now we'll return to our model. Toggle back to the Models view. Click on the tab on the right side of the window for "Fields" and drag a "Single Line Text" field onto our model. We will give the field a name and a description. See the following gif for guidance.

"Add name to Todo"

Next we'll add our enum. In the fields panel, this is called "Dropdown". We'll have to choose from one of the existing enums we've created. That's why we created it first.

In this case we are going to reuse the name of our enum and call it "Todo Status" as well.

Ok, I've added a few extra fields onto the model to support classic Todo behavior. You can see them here:

"More fields to support our Todo"

Creating Content

Ok! Let's create our first Todos! Navigate to the "Content" window of the application. By default, the first model we defined will be automatically selected. Most projects will include many different models, however, in our case we just have one. This view will look similar to our schema windows. Click on "Create Todo" in the upper right corner.

Ok, that was a lot! Let's unpack this a little. Let's begin with the "Create" window. We are presented with our defined fields of Name, TodoStatus, Due Date and Description. At the very top of the window we have a drop down to choose between Published, Draft or Archive. Draft is a saved state of the content you are working on but is not public to the API unless you have access to draft posts. Published posts are public and Archive is removed from the regular UI altogether.

Uploading an Asset

Let's add the ability to accept images. If we have the power of a full CMS at our disposal, let's make this a deluxe Todo list!

Add an asset field to the Todo model. An asset can be any kind of file, but for our purposes we'll use images.

Then we need to upload an asset so it's available to our content model.

Then we connect it to our Todo and we are done. I think you can see where this is going.

Seeing our Result (Warning, code zone!)

Now, let's do a quick test to see if we can actually see this data from our API. Don't worry if you aren't a developer, you can copy the code below if you've been following along.

{
  todoes {
    name
    description
    todoStatus
    image {
      url
    }
  }
}

That's it! On the right-hand side of the API Explorer you will now see the content entries you've created.

Summary

In this post we have:

  • Created a Project
  • Added a Model
  • Created Content
  • Added Assets
  • Checked if it all works by querying from the API Playground.

Believe it or not, it doesn't get more complicated than that! There are various helpers and tools built into the application, but if you can do what we've accomplished here together, you are ready to build powerful GraphQL APIs with little more than drag-and-drop actions. Good Job!