How to build relationships: Post and Categories? #2
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 reference one author in your posts. In this tutorial we will add categories to that structure. You will also learn how to use that relationship to receive your content via Storybloks content delivery API.
Requirements and Goal
Make sure you've your blog setup from the first 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 posts and categories. One
post should be able to have multiple
category should be referenced in multiple
Add a Content-Type Category
Same as in our previous article we will create a new Content-Type to do so we will create a new folder called Categories with the Default Content-Type
category. Since this Content-Type does not exist yet we will again press the Create new 'category' during the folder creation, also this time we will disable the visual editor to keep things simple for the beginning.
Create our first Category
Now we're already able to create our first category in the Categories folder. Navigate into Categories 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
category, if not check your folder settings if you've added
category as your Default Content-Type for the Categories folder.
Define your Category fields
Since we've not defined any schema for this content-type yet we press
Define schema to add the fields we want. We're going to build out the
category with the fields below. You're not limited to those fields append and remove fields as you want.
Text- to allow input a name of the category
Image- to allow upload a category 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 a category
image as shown below. I've named my first category
Design and uploaded the illustrations from Undraw. We've also created Tech and Finance using the same approach. After that, you will be able to access your categories using the Draft JSON option from the top right corner. Make sure to press Save and Publish so we will have those categories available later.
Accessing your Category via API
You should already be familiar with how to access a single entry via slug and also how to access multiple entries using the folder slug if you've read the previous articles. If you have a look at one of the content entries you again will notice the same
uuid field which will be used to create relationships between content types.
Extend your post with a categories field
From the last article your final result should look the screen below where you can see a
Define the new field
To define the new field we will press the Define Schema button and add a new key
categories with the type
Multi-Options since we want to allow a multi select. Add
Stories as the type of source you want to use. To only show content entries from the Categories folder we will configure the Path to folder of stories with
categories/. 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 Categories
You should now be able to see a multi-select with your category entries. Let's select the categories you want and press Save.
Accessing a Post with the categories field
If we now access a single post we should see a field
categories with an array of
uuid of the categories we've selected in the interface. You can click the image to access the performed request.
Get the Categories of one Post
If we're on the detail page of a post we may want to load the detail information of the connected categories. Therefore we somehow need to filter our categories 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 add one or multiple uuids if you want to receive multiple categories in our response. You can click the image to perform the request.
Get all Posts by Category
Let’s think about an category detail page containing all posts by that category. To create a page like this we need to filter our list of posts by a specific
uuid of one category. For this case, you’re able to use the
filter_query[KEY][OPERATION] parameter of the Content Delivery API. Since we want to know if a value in_array the categories array our parameter will look like
filter_query[categories][in_array] with the
uuid of the category as a parameter.
You should now be able to create a one to many relationship between to content types, request them using the
filter_query parameter and allow you editors to manage categories for their posts. If did not add authors yet make sure to check out our previous tutorial.
Build your own Blog using the technology you want!
Use Storybloks Image Service for your blog overview, author avatar and category 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!