How to build relationships between content-types? #1

During this article, you will learn how to build a relationship between two content-types using a headless CMS. Our previous article covered how you can create a simple blog content structure in this tutorial we will add an author to that structure. You will also learn how to combine that relationship to receive your content via Content delivery API of Storyblok.

Requirements and Goal

Make sure you've your blog setup from our previous article or another content-type you want to build a relationship within your Storyblok space. Our goal for this article is to create a relationship between author and post. One post should be able to have one author. One author can be referenced in multiple posts.

Add a Content-Type Author

Same as in our previous article we will create a new Content-Type to do so we will create a new folder called Authors with the Default Content-Type author. Since this Content-Type does not exist yet we will again press the Create new 'author' during the folder creation, also this time we will disable the visual editor to keep things simple for the beginning.

Create our first Author

Now we're already able to create our first content-entry in the Authors folder. Navigate into Authors and press the Entry button on the top right corner to create the new content-entry. You will be able to add a name, slug and content-type where the content-type should already be author, if not check your folder settings if you've added author as your Default Content-Type for the Authors folder.

Define your Author fields

Since we've not defined any schema for this content type yet press Define schema to add the fields you need. We're going to build out the author with the fields below. You're not limited to those fields append and remove fields as you want.

1. Key: name, Type: Text - to allow input of their name
2. Key: avatar, Type: Image - to allow upload for an author image

After adding the schema keys for your content-type we will press the Save Schema at the top right corner of the application and move forward to adding content to our newly created form.

Fill with content

You should now already be able to add the name and upload their avatar as shown below. I've named my author John Doe and uploaded the designer illustration from Undraw as an avatar. After that, you will be able to access your author using the Draft JSON option from the top right corner again. Make sure to press Save and Publish so we will have that author available for later.

Accessing your Author via API

Same as we did with our posts in the previous tutorial we are able to access a single author via slug{:target="_blank"} and multiple authors using the folders slug{:target="_blank"} via our API. If you have a look at one of the content entries you may notice the uuid field which will be used to create relationships between content types.

Extend your post with an author field

From the last article your final result should look the screen below where you can see a title, image and content field.

Define the new field

To define a new field we will press the Define Schema button and add a new key author with the type Single-Option. Add Stories as the type of source you want to use. To only show content entries from the Authors folder we will configure the Path to folder of stories with authors/. Make sure to select Use UID instead of ID otherwise you would end up with the numeric ID rather than the UID. Do not forget to press Save Schema at the top right corner to save your content-type schema.

Choose your Author

You should now be able to see a dropdown with an empty entry. After one click on that dropdown, you should already be able to see our author from the Authors folder. Let's select the author you want and press Save.

Accessing the Post with the Author field

If we now access a single post{:target="_blank"} we should see a field author with the uuid of the author we've selected in the interface. You can click the image to access the performed request.

{:target="_blank"}

Get the Author of one Post

If we're on the detail page of a post we may want to load the data from the author. Therefore we somehow need to filter our authors by the uuid we've available in our post. The Storyblok Content Delivery API allows you to use the by_uuids query parameter to filter by exactly that. You can also add multiple uuids if you want to receive multiple authors. You can click the image to access the performed request.

{:target="_blank"}

Get all Posts by one Author

Let's think about an author detail page containing all posts by that author. To create a page like this we need to filter our list of posts by a specific uuid of one author. For this case, you're able to use the filter_query[KEY][OPERATION] parameter of the Content Delivery API. In this case, we want to know if a value is in the content of the author so our parameter will look like filter_query[author][in] with the uuid as a parameter.

{:target="_blank"}

Next Steps

You've learned the basics to create a blog content structure and you're now able to create a relationship between two content-types. You can now allow your editor to create their own author profile and reference it in their posts.

1. Build your own Blog using the technology you want!
2. Learn how to add Categories to your Posts.
3. Use Storybloks Image Service for your blog overview thumbs and avatar images.
4. Add the Storyblok JS Bridge and enable the visual edit-mode.
5. Check out more params of the Content Delivery API

We’re always searching for a way to improve Storyblok to get a better experience for you – therefore we would love to receive your feedback!