In order to make use of our different skeleton examples, we need to create a project that has a specific model structure. In this guide, we go through creating said example project and how to fill it with your own content.
To start your Blog Example you have two choices of going forward:
The first step in our journey for an awesome blog model structure is the project creation. Navigate to your project overview and click on
Create new Project. Choose a name and description and select your desired region.
That was easy, wasn't it? The actual model creation won't get any more difficult, we promise! 🤓
To create the necessary content models you can now click on your created project to get to your project dashboard. Select
Schema in the sidebar. By default, you will be on the first of two nested tabs. You should be on the
Models tab, the other tab being
Enumerations, which we won't worry about for now. This is where it gets interesting. In order to use the example project, we need to have a fixed structure for our models.
Our Blog will consist of two main Models:
Post: Here we will have all the field related to our posts such as title, content, image and much more.
Author: This will be a collection of fields describing the Author (name, image, bibliography)
Doesn't sound complicated at all, doesn't it? Let's get started!
First, we will take care of the Blog
Post Model. Click
Add Content Model on the top right. Enter
Post as display name, the API ID will be filled in automatically. The display name will be the model name shown in the GraphCMS UI, while the API ID is the name in the GraphQL API. If you want to you can set a description and hit
After the Model is created, we can continue creating the fields. We will go through the creation of some fields together and have you create the rest.
Let's start with our Post
Title: click the
FIELDS tab to the right of the window. You'll be presented with a series of fields. Drag the
Single line text field onto our new model. Now we enter
Title as Display Name - the API ID will be filled in automatically again. There's no other configuration we need to do so we just hit
Create, or return on your keyboard.
Next up we will create our Post
Slug field, which we will use for the URL in the detail view. Drag another single-line text field into our model. Enter
Slug as Display name (API ID gets filled in). Now Click the pink "Advanced" flag. There you can set the field to be unique, as we only want unique URL's in our blog. That's all for configuration, so hit
Now you need to create to following fields to finish up the
Content field – Type
Cover Image field – Type
Date and Time field – Type
Date and Time
Tags field – Type
Single line text - under
Additional Options checkbox
One of our last steps is the
Author Model. Just like before, click
Add Content Model on the top right and enter
Author as Display Name and hit
Now we will add the necessary fields:
Name field – Type
Single line text
Avatar field – Type
Bibliography field – Type
Multi line text
Now we are nearly done with our Content Model, and we just need one more step to connect a
Blog Post with an
Relations are used to make a connection between two models.
To set up a relation from our Post Model to the Author Model we need to create a
Reference field. The general approach to create relations is top-down. So you would create the Relation from the Model that is "above" the other. In this case
Post would be our top level model and Author beneath it.
Reference field onto the
The following steps are easy but important to understand so we'll break them down into a list:
On the right panel, click the drop-down "Select model" and choose Author. This is telling us which two models to connect.
Click the drop-down for the connection icon between "One to one relation" – in our case, we will define our content model that a post can only have one author, but that an author could have written many posts. To do this, we'll choose the "many to one" selector, that is the three dots on the left leading to one dot on the right. See the image below for an example.
There's one more thing we need to do before we can access the later created content via the API - Permissions for the project!
Under the settings for our project, we can scroll down to the
Public Api Permissions section. Click the drop-down and change this to read.
In order to have a good source of content for the demo applications, we want to create at least 5 content entries. You can decide yourself what they should be 😊
To create some posts, click on
Content in the left navigation. Click on the
+ symbol on the top right to start the creation.
Fill in all the Fields you need for a Post. The
Authors field is the Relation we just created. You'll need to create authors on their own before you can connect them. Similarly, you will need to upload images under
Assets before you can attach them, as well. Don't worry, this will change soon!
When you create content, all items start as
Draft – you will need to switch this to
Published before you can see the content.
Repeat these step until you have a few posts ready.
When you are done with the content creation you are ready to jump into the examples!