Skip to main content

How to build relationships between content-types? #1

    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    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.

    Goal Description

    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

    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

    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

    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

    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 and multiple authors using the folders slug 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

    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

    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

    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

    Accessing the Post with the Author field

    If we now access a single post 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

    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

    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

    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!