Content Translations in Directus: SDK

Speaker 0: Carmen. Developer educator. Translation station. So here we've got a Directus project dedicated for storing my blog posts. Now, amongst the collections, we can see posts.

And I'd like to take a minute to take a look at the structure or the data model of these posts. Gonna hop over to the settings module and take a look at posts itself. So we can see a variety of fields here. And the ones I want to highlight are slug, which will help us build a URL to find our post in our application. Next, we've got the title and the content.

Another field I want to highlight is translations. Now I've gone ahead and created some translations for our blog posts. If you want to find out how to translate your content in the data studio, check out our data studio content translations episode of Translation Station. Back in our data model, I also want to take a look at post translations, which is a hidden field that holds the translation data for each of our posts. You can see we've got the title and the content.

Let's now take a look at the post itself. We've got the ultimate guide to rabbits, which is written in both English. Scroll down here. As well as French. So I'm going to show you how you can build an application to retrieve translations of your blog posts.

So what we have here is an application written in Nuxt, which uses three ways of accessing our translated blog posts. One is using the Directus SDK. One is using the REST API of our Directus project. And the last is using the GraphQL endpoint of our Directus project. I'm gonna give you a short tour of this Nuxt application.

First, we set up our environment, which will connect to our Directus project and proxy accordingly to go to local host 3,000 slash Directus so that we can access our data. So let's start with the SDK. I've set up a Nuxt plug in here, which instantiates a direct Us client and makes it available to my Nuxt application. By going to SDK slash the language code of the content slash the slug of the blog post, we're going to retrieve and display the translated data for our blog post. Let's walk through this real quick.

First, we instantiate our client and set up the retrieval of the parameters and a reference for the post itself. Then we asynchronously use the direct client to read several posts. Using the deep and filter parameters, we're going to grab the blog post that corresponds to the slug given in our URL, as well as the translation itself for that locale. We then make available the data of the translations into the result and limit to one just for good measure. Once we have that, we grab the translation itself from that payload and display it accordingly.

Let's take a look at it in action. So here we are. We've gone to local host 3,000 in my running Nuxt application slash SDK slash enus, that's for English, slash the ultimate guide to rabbits. And that gives us my blog post. To view it in French, I just have to change my URL to frfr.

Check it out. Now it's in French. Fantastic. Let's see how it's done with REST now. All right.

So we won't be using our SDK client, and instead, we'll be using the fetch API in order to retrieve the post that match the slug as well as the locale itself. And then retrieving as fields the translation title, content, and the language code, limited to one for good measure. Then we retrieve the translation with the correct language code from our locale. And then just like before, if there's a post, we display its content. Let's see it in action.

Back in my browser, I'm going to go to rest slash en dash us slash the ultimate guide to rabbits. Access that, and there's our English blog post. And for French, fr dash fr. And there we go. All good and in French.

One more. Let's look at GraphQL. So just like with the REST API, we'll be using fetch grab the GraphQL data. First, we'll build our query, which will filter out the posts by slug and specifically filter out the translations by the language code alongside that translation's title and content. Then we make a request to the GraphQL endpoint of our Directus project and then set that post value to have that translation data.

Then just like before, if we have a post, we go ahead and display it. Let's have a look. All right. Back in our browser, let's go to graphql en us the ultimate guide to rabbits. And there we go.

There it is in English. Now let's try it in French. Wonderful. So that's the three ways we can access our translated data from our Directus projects API. Alright.

Well, there you have it. How to access your translated content from Directus using our APIs and SDKs. But that's not the only stop on this translation station journey we're on. If you wanna learn how to translate Directus directly or where it gets translated, how to use translation strings, or how to translate your content, check out the other episodes of Translation Station. So I hope this was helpful, and I'll see you on the next stop of Translation Station.

Bye for now.