How to add any REST source to Hygraph headless CMS

this is Tim from hgraph and in this video I'm going to show you a little bit of magic about content Federation because let's say you have a d.2 Blog and that's the source of Truth for your blog because you love that platform you get all your community there but you also want to show your blog post on your website well what you would traditionally do is actually implement the API in the frontend code of that website to talk to deathto 2 get the stuff work on it but if you have hgraph as your CMS all ready you can just connect the depto 2 API into high graph and then query High graph with graphql with strongly typed code gen all the cool stuff that you get with graphql so in this video I'll show you how to do that let's go we're in high graph here and so what we need to do to get all this article stuff from theft do is add a remote Source in our schema all right let's go here and add a remote source so we use a proxy API internally as def RS um for these types of demos and so that's we we like to call this the Federate this API so let's add that in correctly spelled obviously and so we are using rest here you can also add graphql to high graph by the way but um for now it's rest and so um the base URL of that API that we are using right now to fetch our death of two articles is this one um obviously after you have to authenticate or do some sort of things with with headers you can add these here currently we don't need these so I'm not going to add them now so then the last step of what we need is actually use something we like to call Custom type definitions and this means that whatever comes out of this rest API we need to type it strongly so graphql can make a proper schema out of that and so we used the language called sdl which helps you type a language in graphql and here in our little um documentation of our Federate this API I can actually grab the article the user and the article list as types for devop 2 and so now that this is added um let's have a look and see how this works so to be able to query this there's two ways so the first one is we add a global instance of this source so you can query it from anywhere in your code that's what we can do with a global query model what we can also do it's the second one we'll do that after is actually be able to query it from content editing in the CMS and that's also a really interesting use case so let's go first with the global one we can actually add a rest field here and so these are articles oh and the interesting bit here is that of course we need to figure out that we want articles from me or from my colleague Brian for example or from low and so we need to be able to actually set something up so first and foremost Federate this API then we need to get the Articles list and then we need to actually set an argument for which user we want these articles from so we can add a string here and say username and that username can now be inputed into graphql to do the query and so what we can do here now is the def do2 slash articles yeah SL and then arguments username so when you look at the URL below here you can see it's the base URL we just added into here then we go to Def to two then the Articles and then the username and this is what will come out of the API for you to use all right let's add this and actually have a look in our API playground so here's the playground and there's no queries here let's clear that up okay no query okay here we have articles and then we can say for username and what do we want to see here oh it's already coming up here do you see that so let's go for oh for the slug social image and the title and the that is enough just for now so what you can see here now is that I'm getting back my slug my social image my title all the stuff from Death do2 is now actually just one query away from high graph and this is cached and it's super fast so now let's go to the next one where I can actually add this as a Content editor so content editors can select the latest few blog post on just the homepage for example so let's go back to the schema and then here in my page schema what we can do is actually make a new text for username so we have to be able to get something for that specific username right so we just have to make a field here and then what we also have to add of course is that rest field that we just did also on the global query and then this one is articles and again Federate this we want to get articles however this time we're not going to add an input argument here because this is a graphql input we actually need that input that we just wrote down that username field right so we go to Def 2 articles and then we actually get doc here and doc has username and so this doc references this document that we're editing right now so this is this lovely integration where you can essentially just add this field to any schema and then use the metadata from that same document to query it and what we can do to make this a little bit easier for Content editors we can actually go to Advanced and say field visibility is API only which means that content editors don't need to see this articles remote list because there's nothing to added it in there it's just it has to exist on it so youc is faded out here so let's make a page and then we queer that in the API playground as well uh we oh we actually have a page already we just added a page how about that so of course our username needs to be Tim minut you can see that rest field is now not seen by the content editor it just of course when you put some proper text here that says hey this is the username for your death. two articles blah blah blah and then imagine you have a bit more of a mature API integration you can say I want the latest stand that or the most POS popular something like that you can really craft that API response so let's hit save and publish and have a look in the API playground for all pages so rather than this one we go to pages and for the page we want our OG description our OG title and our slug that's just page related stuff right and then here you can see where is it articles data and for the articles I just want um what did we have the social image and the title maybe this time the proper URL as well and now let's hit play so now we have our homepage the one we just made with um you know the OG description title all the things and then here are actually my articles and you can have a look at that image there it comes and so now these articles are connected to the query for my homepage and you can do this to the max you can do many different approaches here and um this is a very interesting way of adding Federated data into high graph to make it strongly typed and then you can just query High graph and you don't need to care about these other systems anymore which means they do stay flexible they can do their own updates if you have a big team of people they can actually work on these sources to enrich them and then they just go into high graph and you have one way to query them in a very simple way and you even get an API playground to figure out how to query them anyways that's what I wanted to show you today cheers happy coding [Music]