Retrieve 'Has Many' Related Entries In Keystatic

Share this video with your friends

Social Share Links

Send Tweet

In this video, you'll learn how to get a list of posts that were written by a specific author.

Because the author entry does not have any data about posts, you need to work out this ("has many") relationship from the other side ("belongs to"), in the post entries.

[00:00] Right now, on the single post page, we are displaying the authors, but on a single author page, we are not showing what posts this author has created. The way the relationship between post and author is set up is each post has an author's array field, and you can think of it as a belongs to relationship where each post belongs [00:19] to 0, 1, or multiple authors. Technically, there is nothing on the author dataset that makes any mention of a specific post. So if we wanted to display on an author's page which post this author has written, we gotta get this information from the other side. We need to iterate over all the posts and then figuring out [00:39] which of these posts lists a specific author in the author's array. And that's what we're going to do right now. In the author page, we're getting the slug from the URL params, and then we're getting the author that corresponds to that slug. And so below here, we're going to get a list of all the posts. Remember this is asynchronous code on the server side and we can build [00:59] static pages from that, so this is not too much of a problem in terms of performance. So we want to get all the posts and then filter those posts by checking which ones contain the author slug in their array of authors. So let's get all the posts, const all posts equals await reader dot collections [01:19] dot post dot all, and then we want to filter out the post written by the current author. So let's do const author posts equals, and here we will filter our array of all posts, but instead of the check here, I will keep the entries where post dot entry dot authors [01:39] includes our slug. And remember here slug comes from the URL params which is the author slug. So if we've done this right, the author posts should be an array of posts which have been related to the current author. And let's verify this. So I'll scoot down after our showcase, and here, let's [01:59] check first that we have an author posts array, like so. And if we do, we'll have a fragment and like we did before an HR and then an h two tag that says posts written and an ordered list. And inside here, we're going to iterate over the author post array and for each post, [02:19] let's have an li item with the key of post dot. We should have the slug, yep, and let's just display for now the post dot entry dot title. And let's take a look at the front ends to see what we've got. Here I'm on the Simon page, I have the showcase, and then I have 2 posts written because Simon has been linked [02:39] to both posts. And if I check out Jed's profile who wrote one of the posts, we should see only one post. To wrap it up, let's turn this into a link to the actual post. So instead of the title of the post, we'll have a next link tag, the h ref will be slash post dot slug and for the text we'll [02:59] have the post dot entry dot title. So now we should be able to navigate between posts and author freely. Let's start from the home page. So I will check the first post and then I will go on Jett's profile. Jett profile should now link to the first post as well. From here we can go to Simon, which has [03:18] 2 posts in the post written, so we can access the second post from there, which is written by Simon. Everything's working properly.