Hygraph Content Federation FTW

what is up I am back with another video and you can see I have a new hat with a new logo and so this is the logo of high graph where I work now and high graph is a hatless CMS with a graphql API but it's also a Federated content platform putting these two things together gives you something really powerful to build your brand websites apps whatever you want to do and so in this video I want to show you how I built my new website using this Federated content platform and high graph and so if you're interested in just Tim how did you build this thing skip ahead to the the next chapter where I actually show you the website some code stuff like that but if you actually want to know how I did it and like why is content Federation so important and what is it and why is it better than other approaches stay here because the coming few minutes I'll just explain to you what this thing exactly is all right so I used a Federated content platform so to know what that is let's take a sweet little dive into not really history but just have a look at our space to see how does this all work because let's start with like a bit of a Captain Obvious quote composable architectures are the future monoliths are dead I guess 99 of all of us in this space everybody watching kind of agrees on that right and so developers especially developers are really happy with that because we can now get to do everything code first all the things in my composable architecture are small pieces right so I can just connect them together and let only choose the ones that are great and that's awesome we love that as developers but there's a little bit of pain behind these eyes right because having to choose all the things yourself and then connect them up gifts some issues especially at scale so when we start scaling things get a lot harder because we have all these small parts that you have to compose together certain things start to happen right they all have different apis they all have different data structures um how do you then Stitch these things together and it's essentially like cable managing a desk with a lot of tools on it if you constantly change the things or you have to figure out what cable does what you better have good Cable Management right if you have a massive cables in really hard to figure everything out and so this gives you anxiety as a developer and it's basically the anxiety only developers really know right having to stitch up stuff is hard and so what you get is tight coupling glue code and because of these two things you get technical debt and it's really starting to be challenging to maintain the thing that you've built and I might say that it almost starts to feel like you've built another monolith again but then just by combining all the things together and just adding all the spaghetti things and then suddenly you're stuck again that's not good and we need to find solutions to fix that and so there's a few approaches in the wild that I have seen um where we have like a sort of a solution but I think they're not really working and the one we see the most is just fix it all in the front end right so it's literally query all the things but you query all the things from all your different places all in your code base so your code base has now knowledge of all these different places how to query them but also how to get the data from them and map that data and sanitize it and also add defensive code for if a certain thing is not there in the response it's just really really challenging and it's if essentially you're adding code to tightly coupled to all these places and what happens if you have multiple channels if you have an iPhone app and a website you have to then add all that connection data mapping sanitizing code in both that's not what you want that's crazy what happens if there's one per person leaves that connected four things you're gonna have to you know go through all the crazy connections and figure it out it's just it's too complex too much technical that this is not the way well then you have something that's slightly better but not that much better which is the middleware all right this is a custom piece of proprietary software that you write that is essentially just gluing and stitching everything together however when you build it yourself it's going to be complex it's going to be time consuming you get all the issues from the front end part but on top of that you have to do some sort of caching and if you have to do caching yourself that is a challenge I can tell you that from personal experience that's not fun so these two things work and we see them all the time but they are something much much better and that is data Federation or content Federation in this case of high graph so high graph has the idea that you can connect to different sources like maybe your Bim system maybe some proprietary data that comes from some microservice that you created and the idea is that all these things stay autonomous within their specialty and they have their own flexibility and it also makes the whole thing more secure because when you then start querying from the front end the Federation tool actually unifies and simplifies and standardizes all the things to be able to query to these you know separate systems that connect to it and the security that comes in is that there's just less surface of attack because you're only putting your implementation your front end and talk to the Federation part the unified front-end layer not to this you know specialized system that sits somewhere else and so you have this lovely place where you can use graphql to specifically query what you want and then the caching of high graph of these surfaces is on the CDN Edge so it's really fast and there's all these little tools for cache invalidation and all that stuff and the cool thing is it's a product it's not exactly expensive and it works really well and now everybody can use it so this is kind of the basics of why I think this is really really important and so why don't we now go into how I built the website all right so this is my new website and of course I used High Ground and I'm showing that off even by wearing the same hat and the same shirt as when I recorded this video anyways so this website has a bunch of different sources where the data comes in right my images actually all come from cloudinary this content is coming from the CMS but I also have videos I have conference talks I have articles and all those come from specialty places right and so of course you can put everything in the CMS but I tend to use more specialty tools and I guess you do too and I'd guess if you work at an agency all your customers do too and what you want to do is have all that data come into one place that then unifies that data and gives you a really transparent and easy way to query it and that's what's happening on this website and so let's have a look how that actually works in high graph and so in high graph well you can see this is my my base page and what you should know this is the free account and you can see how much I have 1 million API calls I have a bunch of entries content models whatever you can use whatever I show you here you can do that yourself as well really easily for free so just go there and make an account and try anyway so let's go to my schema and so the schema is where all the data comes in and you can see I have a schema for my conference talks this is just all stored in high graph but there's also a remote source and I have created something I called the timedics API and I did something specific that I wanted to do but you don't have to I actually wrote One API with some codes that wraps other apis because I wanted to code it myself it is what it is you don't have to you can plug in YouTube directly in here if you want to I however wrapped it so I have an endpoint for articles and so what you can do in high graph is using the graphql sdl language is You can actually strongly type whatever comes out of this API so high graph knows what to do with it and make you a graphql schema so I have articles that have the following items and then I also have a collection of all these articles and so you can just this is like typescript like type or sorry graphql like typing and I also have a video item which has also a collection of videos and so I have one endpoint and I have said there's a few types of content coming out of this and I've described that here in high graph and what you can then do once this is set up you can actually go and make a query and so here I have an article data collection so I can actually if I hit edit now you can see this thing has a get method and it's getting my article data collection return type and then I've added a couple of properties like I want to do a per page how many items do I want I have a username to query daft.2 for Tim benics and a whole bunch of other things and then the cool thing is here you can see that these variables are now being concatenated into a URL that is being used to do the get from whatever that API is and you can see the same for my video collection that is now a video data collection return type and I have playlist ID and how many I want and you can see the concatenation again this is a very simple way and there's a few extra options here where you can say I want to purge the cache of that specific query every 30 seconds or I want to use a web hook to do that so you can actually control how much cache is used on the CDN Edge for this anyway so what you now can do now you created these queries you can actually go to the playground and you can see I've created a few so I now created a playlist query which is the video data collection for this playlist and you can see this comes out so this is literally just querying YouTube and getting that in here and I can do the same for my articles I can do the same for my talks and then talks is native inside I graph but playlist is actually a video collection from YouTube and you can say it all works inside and this also translates to my website so that's the next one we will have a look at so this is fias code which is my site and you can see here I have a queries folder and inside that folder I have a few files like and so my playlist query is here and then my articles query is here and I'm actually using next three with a really good graphql module and that module does a lot of like fancy code generation based on the introspection it can do from the graphql schema and so when I hit npm run Dev it actually creates functions for me or composables you call them in next or in view that can query these things for me and there is a video that I'll put in the comments where I really explain how that works in my next three setup that's too deep for this video but so I have a few queries that are just files and then when you look at my index file this is the home page you can see there's a videos list component and I get the playlist ID that I want I have the per page I want three per page stuff like that and this function or this component has a simple function that just queries the video's endpoint and it just uses this query so this is extremely clean and what you can also do is do this in the CMS so when you're building your page you can select I want these videos and stuff like that I decided to go a bit more code first but you can also do that from the CMS and then you can actually build a website that has all these things and my code knows nothing about these sources it's super clean and so that's what I wanted to show you today and I think it's a really interesting approach especially at scale because your front end knows nothing from all the specialty sources that you use which means you can change one of these sources or update it or augment it and the front end has no code changes other than maybe hey I want an extra field that just became available it's just graphql super simple transparent performant anyways that's it I'm happy coding thank you