Storyblok Raises $80M Series C - Read News

Skip to main content

How to build relationships between content-types? #1

  • Home
  • Tutorials
  • How to build relationships between content-types? #1

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

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.

Section titled 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.

Goal Description

Section titled 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.

Creating the new Content-Type Author

Section titled 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.

Create a new content entry, Jon Doe

Section titled 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.

Author form only view

  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.

Author fields

Section titled 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.

Author filled with options open

Section titled 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.

Response of a single author via slug

Section titled 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.

Image of the post without author

Section titled 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.

Image of the schema configuration of the author field

Section titled 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.

Image of the selected Author

Section titled 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.

JSON result with the selected author{:target="_blank"}

Section titled 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.

Request to receive the author of a post by uuid{:target="_blank"}

Section titled 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.

Get all posts by one author{:target="_blank"}

Section titled 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!


Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Scriptconf and Stahlstadt.js.