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 can be referenced in multiple
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 New button on the top right corner to create the new content-entry. You will be able to add a
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.
Text- to allow input of their name
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 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.
Extend your post with an author field
From the last article your final result should look the screen below where you can see a
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
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/. 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 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.
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.
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.
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.
- Build your own Blog using the technology you want!
- Learn how to add Categories to your Posts.
- Use Storybloks Image Service for your blog overview thumbs and avatar images.
- Add the Storyblok JS Bridge and enable the visual edit-mode.
- 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!
|How to set up a blog content structure||https://www.storyblok.com/tp/how-to-create-a-blog-content-structure|
|How to build relationships: Posts <> Categories||https://www.storyblok.com/tp/how-to-build-a-content-relationship|
|UnDraw MIT Illustrations||https://undraw.co/illustrations|
|API Request: Single Author by slug||https://api.storyblok.com/v1/cdn/stories/authors/john-doe?version=draft&token=rtK6qbhT8nroEh0s4hVivgtt|
|API Request: Multiple authors using the folders slug||https://api.storyblok.com/v1/cdn/stories/?version=draft &token=rtK6qbhT8nroEh0s4hVivgtt &starts_with=authors/|
|API Request: Filter Authors by UUID||https://api.storyblok.com/v1/cdn/stories/?version=draft|
|API Request: All Posts of Author with specific UUID||https://api.storyblok.com/v1/cdn/stories/?version=draft&token=rtK6qbhT8nroEh0s4hVivgtt&starts_with=posts &filter_query[author][in]=22f4fb1b-50b3-4bf2-816e-7d589e307421|