Set up headless CMS localization in 6 mins

this is Tim from hgraph and so recently I implemented a multilanguage project with hgraph and I thought it would be complicated to do but it wasn't at all so here's a video of all the steps I took to make this work in hgraph let's go into the browser so this is my little example project and to be able to add another language we actually go to our project settings locals and then we just start typing so I've now added Fringe here and when you add a language there's two little things you have to think about first of all if you want three or four or five languages you need to upgrade your account to a bait account but then there's one other one when you actually go to your permissions it could be that the permissions are set up for just that one or two locals that you have and if you have more locals that don't are not included in the permissions you cannot see them or query them and you can see here for me it's all local it's out of the box right but you could actually do this this so now I can only query English for example of course we want to query all of them so here we go and I have also set up draft and published this is just kind of like one permission to rule them all just for demo purposes all right this is added so what I want to make is actually a little meme collection like a little database full of a few memes so let's start with one and memes are images generally so let me just grab um an image that I created with one of those fun meme generators and it's basically just the Change My Mind One and it says graphql is the best um so let's edit this one because we've uploaded the English version now and you can see here on the right there's actually French because we've added that language Let add that localization and now I get to upload my French version all right so now we have one asset for two languages and these two languages have their their own have each a media item but it's one asset so of course now that if you want to show this in let's say an API output we could query just the assets but actually I want a little database right so um let's go to the schema oh let's save it first of course and you can see you can actually save all of the local locals here let's go to the schema and add a meme model and so the meme model actually has a title and an image let's keep it simple for now so let's just add the title and as you can see here on the bottom there is this localized Field property here because you could build a schema that a few fields are not localized like an ID or a slug or whatever you want and then others are localizable because you have to write some copy for example or select an image right so now we have the title it is localizable now we scroll down we're going to add an image so an asset picker just call it image all right and so you're not seeing me clicking a checkbox here for localizing because what this actually is it's a you can see it here it's a two-way reference which means an image asset is a model on its own right you can see that here on the top there's an asset model for the system so this is actually a reference field and we're not localizing the reference field we're actually localizing the asset itself but we just did that in the step before all right so this is now saved and so let's add some content so let's add our first Meme and um it was called change my mind and so let's add our French version here and I went to Google Translate because typing and speaking French are two different skills right we have all the the commas and apostrophes and all the complicated stuff so I'm just going to copy paste this stuff right so change my mind two languages and now let's grab our image that's also already set up for two languages so let's save and publish this one French English and whatever is non-localized sure and now we have our base done so the next thing that we have to do is actually query this thing and so let's just go to the API playground because that's how easy it is to query stuff with high graph you don't really have to know graphql that well because you can just make your query here visually so um let's go we want all memes sure and and let's see we want for the local French and what do I want well let's query the local itself let's get the title and then let's get the image and for the image I need let's see what do we have just a URL sure that's clear so now you can see my title is French um what I can also do here is actually say give me English and now now we have the English version well let's check if that image is actually the English one now there we go that's the English version and so this one this is just a simple query in here you wouldn't probably do this in code this way because you don't want to hard code this we actually want a variable so let's build that right let's call this Meme and what we want is actually oh is a local as a variable from your query because your app knows what language you are in right let's call this local and it has to be the local type and actually when you do it with a variable what it wants is this this could be an array and so we can do local in here and so now essentially we can say give this to me in French and English if we wanted to so we can add a query variable here now local and what we want for this one is let's go with English you see it also gives you French oh we have to do double quotes and let's hit it here's my English version and if we do French now I have my French version and you can actually see that the image is the local as well if we just add local to the image you can see that as well and so now this query you can just paste it into your code whatever graphql language you're using or the way you call graphql you can just add this as a variable and you're ready to rock and you know what this wasn't that complex actually and there's a bunch of other little things you can do with localization like without giving the local getting all the versions and all that stuff but that's not for this video um I will put a link in the description to our documentation that has all of that stuff and so if you have questions about this or you want to try it out or talk to us about it join us at slack. hyra.com and there you can talk about everything learn things um join our community anyways um happy coding cheers