M2A Relationships

Speaker 0: Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And today, we're gonna show you how to relate anything to anything or everything inside your Directus instance. So that is done using the many to any relationships or the builder interface that we have inside the project. And, basically, it allows you to link items from a parent collection to any other child collection in the database.

So it is useful for page builder scenarios, other types of dynamic content creation, very helpful when you're building a CMS. You know, you might want to empower your marketing team and allow them to build complex layouts without actually touching code, and without a ton of effort on your part. So, you know, this graphic kind of illustrates what we've got going on here. We've got 3 different types of content. These are gonna be set up as different collections inside Directus.

We've got a container for that content, like we wanna put all this content on a blog post or a page. And then we have this Junction collection, which has the ID of the blog, the collection for the actual different types of content we have, and then a ID for the content within that collection. So that's kind of how it all fits together at a high level. Let's jump into Directus and actually set this up. So I'm just in one of my demo projects and I'm gonna hop over to the data model section here and I'm also gonna do a little mouse highlighter thing.

So what I've already done here is basically gone through and defined collections for all of my different components on a page. I've got a hero section that has a title, some buttons, and a background. I've got a, CTA section which has a title, some buttons and an image. I've got FAQs that have a title, a headline and some actual FAQs, some questions for us to answer. And what I don't have here is a container for this.

What is it? What is the vessel for this? Let's create a new collection called pages. We'll just give this a generated UUID. I'm gonna leave the rest of this blank for now.

We'll give this page a title. Probably want to give it a slug so we can access it or a permalink or something like that. And now we're into the many to any relationships inside Directus. So how do we set this up? Alright.

I'm gonna go down to the relational section, I'm gonna look for the builder or m2a, and I typically call this something like blocks, content blocks, page blocks, you know, your specific naming convention, you know, use what feels right for you. But when we set this up, unlike the other relationships in Directus where we have to pick 1 collection that we want to relate to, here we can pick as many collections as we want. So I want the block hero. I want the, block FAQs. I want the block CTA collection.

And once I'm done with that, I'll hit save, and that will create that field for me. Now if I go into my data model and I look at the very bottom, you can see that Directus has created this junction collection for us called pages blocks, or pages underscore blocks. If we take a look at it, we can see we have a relationship back to the pages ID, and then we have an item and a collection. So, these relate to the actual blocks that we selected like hero or CTA or FAQ. So now, how does this all come together when we're actually setting up or creating a page?

Alright. We give it a title. We'll call this slash for the slug just because that's the homepage or you know, root home page, whatever you wanna call it, index. Great. And then I go in and create some blocks.

So I can create a hero block. This is my hero. You are my hero. Okay. Go in and fill out the rest of these fields as well.

Maybe we add some FAQs. Right? FAQs, we'll give it a title. Let's add one question to it. What is many to any?

The answer is magic. Alright. So we'll go ahead and save this. Save this, and now we have that page builder scenario where we can set this up, right? If I wanna be able to drag and drop the order of that, I could just go back to that relationship.

I go to pages, I go to blocks, and I look for my relationship here. I'm just gonna add a sort field, we'll call it sort. Directus will create that for me. And now I can drag and drop to rearrange these blocks and that would be the order that we would render those on the front end. So now I'm just gonna go in and quickly give public access to those blocks.

So I've got a hero, I've got FAQs, and I also have pages and pages blocks. You know, set up your permissions based on what you need for your specific project, but I just wanted to take a look at this really quickly on this video. So we're gonna go into our API. We'll do a slash item slash pages. And here we could see we've got a title, we've got our slug, we've got our blocks.

Great. But how do I get the information within the blocks? Right? So I'll just call fields. Let's get all the root level fields and we'll do a comma, and then I'm gonna say blocks dot item dot ID.

Let's do another one like blocks dot item or no, let's just get all the fields from the item and take a look at that. Right. Cool. Alright. So now I could see just by, you know, setting up this quick little param for fields, I've got the actual content of my blocks.

So I've got my FAQs and here's what that looks like. I've got my item, my hero here, so we could see that as well. And then you would obviously, like feed that into your front end. You probably got some type of component that loops through these things and dynamically renders the correct for that. So that is it for this video.

I hope this demystified some of the many to any relationships for you. There's definitely more meat on the bone here, but come back for the next video. We'll see you.