Complex Queries via API

Speaker 0: Welcome back to yet another episode of Short Hops. I'm your host, Brian Gillespie. And today, I wanna cover, a tough topic for new comers to direct us, which can be setting up your queries via the REST API. So today we are going to query our hearts out, and kind of run through some complex queries more than just, yeah, you know, calling a standard endpoint, very simple. Alright.

So, I've got a example project over here. I've got some pages that we're working with within a collection. And over here on the right, I've just set up a simple little node project and pulled in our SDK. If you are working with the Directus API, I highly recommend using the SDK, just because we've got some little convenience methods in here for you. It makes it much easier to work with your Directus API.

So I have got, I've imported the create Directus function. We've got a a rest API, we're gonna read some items, so that's one of the methods we're gonna call. And then I'm just creating a client here, so the format's very simple. We pass the URL, we tag on, a rest function at the end, or with rest function at the end, and then we can call that client. So I'm just saying, hey, defining a constant.

We'll await that request to pages, and I don't have anything in the filter here. I could actually comment this out if I wanted to. And then let's just run node index dotjs, and we could see I'm getting a bunch of pages here. So one of the first things that you might wanna do when working with the API, the REST API acts like GraphQL in that I can call the specific fields that I want. So I can add a parameter here for fields and we'll just say I want the ID, the title, and maybe the blocks for this specific page.

So now if I call this again, we can see a Directus has given me just the information that I asked for. That's great. What if we wanted to filter this down though? Right? I'm getting a bunch of different pages.

Some of these are published, some of them are not. Maybe we just wanna see only the published pages, right? So that's where our filter comes back in. And here, let's add a comma there. And now let's do a filter where the status, and we've got a couple of operators here.

There's actually a lot of operators. You can find these on the documentation. And we want the status to be equal to published. Great. We can run that again.

And now I shouldn't see, like, a test with new default because I'm seeing that over there. Great. Okay. I don't see that one in the list, But let's say I wanted to actually limit the number of results that I see, I could do something like this where I just add a limit parameter and we'll pass that too. And now I should only get back to pages.

Right? So I see my home page. I'm getting the manifesto page here. And I can see the blocks. This is an ID.

We'll go about fetching that in a moment. Now what if we have a more complex filter where we need to stack different conditions together? So for that, you have the and and or operators. So I could do something like this. And instead of an object, this is gonna be an array.

So I'm gonna pass an array of objects like status is equal to published. Can I do formatting on this? I don't have Prettier or ESLint setup on this project. But So I want the status is equal to published and maybe the permalink let's just get the home page, right? So I'm gonna do equal to not home but slash because I can see that right here, this permalink.

Great. And even though I've got a limit of 2, I should only get one back. Permalink is equal to, did I save that, or status is equal to publish. Oh, that's an or filter. So we want both of these conditions.

Right? Let's do that. So we want to match both of those conditions. And now the only item I get back in my array of data is the home page. Great.

So that's how we can stack filters together. Let's take this a step further and for our blocks, we want to get the content within those blocks. And, you can expand the relationships within a single API call within Directus which is again is super nice as well. So we'll do blocks, let's add, this is actually gonna be an object so we'll do blocks. We'll give it an array of fields that we want to give for the block.

Let's get the block ID, maybe we want to get the collection for that block, This is set up using our many to any builder relationship and we'll do item dot star. So the star or asterisk is a wild card. That should return all the fields or all the root level fields for the item within the block. So let's run this and actually see what we get out of it. And now you can see I'm actually getting the data for my blocks.

So I can see, you know, this is columns, we've got a title, we've got a headline, we've got the actual rows. So I could even drill further into those relationships via a single API call if I wanted. Now there's one other field that I want to pull within this and we'll do hide block. And do we have hide block? Okay.

So now I've I've got this hide block on here. You know, within the page builder, maybe I wanna hide one of these individual blocks so that it doesn't show on a page. I can query that on my front end so that, you know, hey, we we don't have to remove this, maybe we want to show it at a later date, but I wanna hide this specific block and not render that when I consume that API on my front end. So how would I do something like that? This is a setup on the relational field, right?

So at the top level here we can filter based on the pages, but there is a special parameter that you can use to filter the relational data in a single API call. So you'll see how powerful this is in just a moment. We'll go in and we'll do deep parameter. And we're going to look at our blocks. And now it's like we've got a whole another query within this, right?

So I'm just going to preface this with a underscore or an underscore and we're gonna do a filter and now we are filtering on the block level. So the related blocks we wanna do hide block is equal to not equal to true. Alright so let's see what that returns. And I'm just gonna clear out my console here and I shouldn't see the first item as a quote because I have removed that or filtered it out. Forgot my comma at the end there.

So we'll clear one more time, call this out. If I zoom back up to the top of this, you could see the first block in my array here is the form section. Right now if I go in and I just hide a lot of these blocks, right? I've hidden the first three blocks, the first section that I see in my API call should be this FAQ one. Let's clear this again.

Just to make it easier we'll do node dot JS and, oh, I forgot to save the actual item over here. Let's try that one more time. Node. Js index dot JS, there we go. And now the first block that we see is the FAQ section.

Right? If I wanted to see all the blocks that we hid, I could just change that to not equal to false or I could set it to equal to true, either way. But now I can see here's all the blocks that we hid within that specific page. So I hope this has been a great tutorial on just the sorts of things you could do with the, global parameters when you're calling the API. Stay tuned for more episodes of Short Hops.

That's it. We'll see you.