Blazor API Client using REST & GraphQL APIs - Full Course

[Music] i've spent quite a bit of my professional career trying to get on board the javascript train it's a fantastic language but for some reason i just can't quite get to grips with it for a lot of reasons probably mostly my fault but where does that leave somebody like me a c-sharp developer that wants to write single-page applications interactive web applications running on the browser what am i to do is there anywhere for me to go well if you stick around maybe there is a solution well hello wherever you are whenever you are where am i melbourne australia as usual and when is it it's may 2021 so that was yes a very cheesy introduction to what we were going to be talking about today and that is blazer and what is blazer well it's a lot of things to a lot of people but in my mind it's microsoft's attempt at a kind of single page web application framework without the need to use javascript and uh that sounds interesting well you're in the right place and in today's video more specifically what we're going to be doing fully step by step is building a blazer client to blaze an application that's going to call a number of apis out on the internet one rest api one graphql api and the way we're going to architect our application is that we can swap those implementations out nice and easily without having to do too much additional work and you'll also see how you can write applications like that without actually using any javascript at all so hopefully that sounds interesting another long video is about three hours long so buckling settle in and let's get started so yes welcome to this full step-by-step course on building a blazer api client using both rest and graphql api end points quite a mouthful i'm sure you'll agree now before we do anything else let's take a look at what you're going to be building if you decide to follow along with the course which i really hope you do so over in our project i'm just going to run up.net run and you'll see we get a little kestrel web server running on local host 5001 and 5000 so if we hit one of those endpoints i'll just start edge and we'll get our blazer client here we go now we get some stuff out the box with this project we get a home page or a home component they get a counter component which just allows you to increment counter not particularly exciting and we also get this fetch data component but just stick a pin in that for a moment the first thing we're going to do as part of our build is build our own component that allows us to convert to and from base64 so this is a string encode it as base 64. take that out and and decode it now you might go what is that going to do with apis doesn't really seem to do have anything to do with apis it doesn't really the reason we're doing this is to get used to building components so you'll understand how they're architected how they're put together different approaches to building components that sort of thing so it gets our feet wet before we jump into calling api so that's the first thing we're going to do the second thing we're going to do is revisit this fetch data component now this is a component you get out the box with this project template and out the box what it does is it reads in some json data from a file it's the static files weather data and it displays on screen but what we're going to do is retrofit it to make a rest api call and if we click on it now it actually goes out and makes a rest api call pulling back some data don't worry i will talk about what the apis are and what the data is a bit later but you can probably see on screen what type of data we're getting back so that's the second thing we're going to do we're actually going to make an api call using one of the existing components and then finally the third thing we're going to do is create a totally new component and on the surface it's going to look like it's doing exactly the same thing as our fetch data component but behind the scenes it's doing a whole lot more the way we architect it is much more sophisticated so what you're actually seeing on screen it looks exactly the same in fact it's pretty much doing exactly the same thing it's going to a rest api and it's pulling that data back but i did mention we're going to be working with both rest and graphql so the way we're going to architect our application is that we can swap out our implementation of rest really quickly for an implementation of graphql so i will jump into the code at this point close down our little server and you can see here we're going to be working with something called data services so we have a rest implementation which we'll go through and we have a graphql implementation again which i won't go through but what i will show you is in our program class we can easily swap out one data service for the other and the way we do that here is simply by registering the implementation class with our dependency injection container so we're using the rest data service all we need to do is use the graphql data service and that's it save that off we'll run up again we'll refresh our client now we'll get exactly the same data back it will look no different but we are calling two different apis that use different design patterns one is rest one is graphql we'll cover both fully step by step now if you don't know what dependency injection containers are or anything like that don't worry we cover it all in this course so that's running up now let's come back to our client and we'll just do a refresh just to show you i'm not full of hot air although i am full of hot air coming back home we'll refresh and we'll come back to launches and now it's going to be graphql api which actually looks a bit quicker than the rest one i'm sure for no other reason then it just happens to be a bit quicker and you can see we get back exactly the same data but using this different implementation class fantastic so if you come with me now you're going to learn how to build this and i hope you very much do but the next thing we want to do is go through the course overview in a bit more detail so you know what you're going to be doing at each phase so let's do that next so let's just come back over to powerpoint we'll go through the course overview now just before i do that though i just wanted to say if you want to skip ahead to a particular section and i'll go through the sections in a second and you want to just jump to the api uh development part you can do that all the time codes are in the description below so if you want to just jump there you can do that you don't have to watch bits maybe that you're not too interested in if you want but i would recommend obviously that you watch the whole video up to you though you can do either so let's take a look at the course overview um so introduction we've already done the demo i'm going through the overview now after this we'll go through the solution architecture of the solution you're going to build and then the ingredients and tooling we'll then spend some time on blazer theory what is blazon why you would use it and the flavors of blazer there's two flavors of blazer and then we'll talk a little bit about web assembly we'll then move on to coding and we'll do a full project setup so we're not downloading stuff from github that's already got loads of code in it we're doing it completely from scratch so dot net new project all the way up so product setup will go through the anatomy of a blazer project so if you've not done any blazer stuff before there's a couple of nuances when compared some to some other.net stuff so we'll go through that anatomy and we'll build our first component which is that base64 encoding component according part two we'll take a look at the apis we're going to be using in a bit more detail we'll make some test calls with a api client called insomnia we'll then use http client to retrofit our fetch data component to pull data back from one of those apis and then we'll go on to discussion about something called http client factory and we'll talk about splitting concerns within our components and we'll talk a little bit about app settings now if some or all of that made absolutely no sense to you don't worry i do explain it all fully when we get there coding part three is really the main part of the course and this is where we are going to build our second component to call both our rest and graphql apis using data services that implement those specific design patterns okay so that's really the main part of the course although it just looks like a small section that's the main part of our course and then finally we'll move on to the end of the video will talk about next steps better wrap up and then support our credits but i think now we move on to solution architecture okay so let's take a quick look at our solution architecture now this is the architecture that we're going to be building to obviously and we'll start with looking at the fact that we have two apis a rest api and a graphql api endpoint now these are externally hosted we do not build these as part of this video it would just take too long and it's not really the focus of today's video now i've selected two apis in particular i'll talk about them later when we come to that you can of course use your own apis if you want to do that but to follow along i would suggest you use the apis that i've selected for us but you can of course use any ones that you like next you'll have your local machine you'll have your web browser and this is possibly a little bit too much detail at this point in time but within your web browser is this thing called webassembly or you might hear it called wasm or waysum i'm not sure how you pronounce it it's not a plugin it's nothing like that and i do talk about it in more detail later but it's just something that is required in this particular architecture to run our blazer app but don't worry it's not an install it's nothing additional that you have to do it is just there and and is required in this architecture we'll also need a web server now as part of our project setup doing dot net new and setting up our new blazer app we're going to get this out of the box and if you've done any net programming before you're probably quite familiar with the kestrel web server it's just a little development web server we need that to basically serve up our application so we'll visit that server we'll visit the endpoint and as a result of that we will get our blazer app downloaded onto our browser into our browser and it sits on top of this thing called webassembly don't worry i cover web assembly a lot in a lot more detail later and from there the app will then talk to our apis make the relevant calls which is really what we're going to be doing as part of this build and pulling data back into our app and everything will look wonderful i'm sure now just on this architecture if we then stop the server the app will continue to work it will work in this offline mode and it will continue to work fine all the server in this configuration is really doing it's just acting as the delivery mechanism of our application that's all it's doing unless of course you decide to put something on that server like an api it's not required unless you do something like that so we can stop the server the client will continue to work if of course we went to refresh and download a new copy then we would run into results obviously but that's it for the solution architecture we will revisit this a bit later when we talk about blazer in more detail but for now we can move on alright so let's take a look at the ingredients you'll need if you want to follow along so vs code text editor i recommend that one it's free you can use anything you like including visual studio if you want to do that but again this is a vs code based tutorial you'll need version 5 of the net framework i'm not going to show you how to install that just google.net framework download and follow the instructions should it's pretty straightforward so i don't feel i need to take you through that in this video i recommend either insomnia or postman now they're just api test clients they are not mandatory but they're useful when you are writing code your own code to call apis and you can use them to test the same apis and see if you're getting the same kind of results or or not they are useful i'm going to use insomnia as part of this tutorial and then around about two hours of your time i've not actually timed it yet so i think it should come in hopefully under the two hour mark if you want to follow along with it all right so we're moving on to a bit of theory now and we're going to talk about photos blazer along with some other questions and i've tried to balance this section with providing enough detail so that it's number one it's interesting and number two that it gives you enough background so when you go into the coding part you kind of have a bit of an understanding of what is going on but at the same time i didn't want to go into too much detail so hopefully i've got the balance correct but you can you can let me know whether i have or not so before we move into that let's just talk about most web applications today now when i talk about in the context of this video talking about a web application i'm talking about web applications that are running on the client in your browser so effectively don't like saying this but effectively javascript based applications okay that's what we're talking about now you will should appreciate that you do get other uh patterns of web app development where the code is executed on the server and then html and css are then rendered down to the browser we're not really talking about those type of applications today we're really focused on the ones that yep sit on the browser and are predominantly javascript based so as you can see on screen there most web apps today are comprised of html of course of css which is used for styling as i'm sure you're aware and then javascript now even frameworks like react and jquery and angular and all those kind of things they fundamentally use these technologies there are some nuances and some differences but effectively everything is based on these three things now if you're wanting to write interactive web apps basically you need to know javascript okay there's really not much no other way around it really in the past going back there were things like activex and even things like silverlight and what's the other one flash and stuff like that but basically these days javascript is the is the really the main way that you would develop an interactive web app or a variant thereof of javascript now the real question is what if you can't use javascript or anything i say can't you just you don't want to learn it or you don't have enough time to learn it or something like that what do you do you're a bit stuck today if you want to build an interactive web-based app you're a bit stuck really so this is where blazer really comes in so what is blazer well free good open source web framework from microsoft and so really in a nutshell what it allows you to do it allows you to develop client-side apps written in c-sharp so you don't need to use javascript you can use csharp as the language of choice to drive these interactive web apps really importantly no plugins are required so i did mention things like activex and silverlight and flash and all that kind of stuff you don't need any plugins everything you need by and large will reside in your existing browser that you are running and watching this tutorial on today and as i've said there everything that the world wide web consortium recommend is all you really need to use so basically all modern browsers will support this framework effectively laser apps can still interact or interact with javascript so you can actually use javascript functions or call javascript functions from within your.net methods which we're not going to cover today but it's a very cool feature and yes blazer comes in two flavors and we'll cover these in a lot more detail in the coming sections so blazer servo and blazer client or blazer web assembly now an important point to note here and i keep laboring this point these are two separate flavors of blazer they're not part of the you don't use both at the same time so typically when you see something like client server i immediately go to the kind of space where i'm thinking as a client and a server when they work together that is not what this is you either use blazer server pattern or you use the blazer client or the blazer web assembly pattern one or the other so does that mean that javascript is dead of course not absolutely not positively no on that one blazer really in my view is an alternative to javascript and it's an alternative in some fairly specific use cases and i actually fall into one of those use cases as i'm sure you may do if you're watching this but yes it's not a replacement for javascript and i don't think it ever will be to be honest with you microsoft may have a different view on that i don't think it will be and in fact as you'll find out in a bit it's actually somewhat dependent on javascript as well you don't need to learn this javascript but it's somewhat dependent on it all hanging together and working so why would you use blazer what is the use case around it well kind of cover that already but basically the main primary use case is when you want to use c sharp as opposed to javascript to develop web apps and the reason for that is that you can like myself leverage your existing c-sharp skills i know javascript a little bit but i struggle with it i don't really have time or the inclination to learn i've had all the time in the world i probably would but i just don't so for me i'd rather just use my existing language skills to build those web apps and as i said yeah i don't have time to learn something else with javascript and another one i mean i do this quite frequently i would use blazer to quickly prototype apps prove a concept and then once the concept has been proven out another team may take over and actually then redevelop it using something like react or something like that so it's maybe for me it's a quick way for someone like myself to create apps web apps very quickly that may not eventually make their way fully into production someone else may take and build a react version of the same app but um yeah these are the kind of things i'm thinking of anyway but predominantly it's for people who want to use c-sharp to build web apps all right so let's take a look at the two flavors of blazer and again i keep mentioning this but you would use one or the other not not you don't need both to be working at the same time so blazer server apps are actually hosted on a server they're hosted on an asp.net server they run as an application on the server and the client the web client is really nothing more than a presentation there it's a thin client so if you're very old like me you may remember green screen terminals that are just a presentation there they're you know they're not very smart they just talk to a back end a mainframe um or if you're not that old you maybe use even today things like citrix or remote desktop where you just have a client that is effectively just presenting a desktop from some other server or application somewhere and that's really the kind of model that blazer server is following the apps run on the server and the way the client the web app and the server interact with each other is using something called signalr and again i'll slide on that a second which is basically another microsoft technology fundamentally based on web sockets and again we'll go into more detail about what that is in a second but basically this connection um it's persistent and the client just sends basically just update messages to the server and vice versa the server just sends um messages back to the client that tells it how to render the user interface effectively so really only the client document object model is updated and the document object model is effectively just the structure of the web page and so all the server is doing is telling the client to augment and change the dom so that the user interface changes in response to things like button clicks and searches and all that kind of stuff so yes the client is presentation only and because it's relatively simple from a browser perspective although it does need to support web sockets and it basically works on all browsers there's probably very few browsers where this setup would not work so blazer client apps are quite different and this is the pattern that we are going to follow in this tutorial we are going to follow the blazer client approach so as you already saw in the solution architecture section the app code is downloaded in full from a server and it runs on top of webassembly which is this component in all modern browsers and again we'll talk more about webassembly in a bit the server can in fact be anything so blazer server needs to be an asp.net server because the app is actually running on that server in this instance the server can be anything it doesn't have to have.net installed or anything like that it just has to have the packages there the dlls there that can be pulled down and hosted and run in the client which is quite good actually it can work offline as you've seen already so the server can then kind of fall away and that will continue to work that would not be the case with blazer server you need to have this internet connection or this network connection for the for blazer server to work and yeah as it said it will run on web assembly now i did a bit checking most desktop browsers about 93 of them at the current time have web assembly so it's pretty decent coverage and i'm wondering where the other seven percent are they're probably internet explorer running in corporations somewhere that can't or won't update because you've got some legacy intranet application that needs uh internet explorer to run some activex application i would imagine that's probably the case but for the most part yes webassembly is available on most browsers now a really important point to note is that you can develop a blazer app and it theoretically can run in either hosting configuration you shouldn't really have to change anything now there are a couple of caveats around that statement and i'll talk a bit about them later in the video but you don't have to write an application for the server setup and then fundamentally rewrite it for the client setup the same app should run in either configuration so that is also a huge bonus and interestingly when microsoft first brought this out blazer server was the original flavor that they brought out and then when web assembly gained more traction they kind of brought out this other alternative way of using blazer so a bit more of a deeper dive into blazer server you have a server obviously that is running or needs to run asp.net and your app will run inside that runtime effectively and you'll have a separate app running for each client connection which i've not shown here you'll then have your local machine with a web browser on it it will make a http request to the server there will be a http response with a i suppose i'm calling a thin version of the app that all the app is really doing is running some html and a bit of javascript to set up this signalr connection and so the http session falls away if signalr or websockets is supported on this connection then that's what will be used and it's a fully duplexed fully persistent connection and the thin app just talks to the actual app on the server back end and then if we were calling apis the apis are actually being called from the app that are running on the server okay so a little bit about signalr it's an open source library from microsoft and bear in mind we are not using this configuration but i just thought i'd give you a bit of detail on it i have done a video on quite a long video but three hour long video on websockets and signalr and why they're different um so check that out if you want more detail predominantly used for real time asynchronous type applications so where you need a kind of persistent connection in real time events traversing that connection signal is really quite clever it uses the best available transport so i keep talking about web sockets websockets is one type of transport if websockets is not available or are not available on the connection or on one of the endpoints then it will use the next best option so it might use http long polling or something like that but from a user perspective using the signalr libraries you're completely unaware of that it takes care of that for you so it's quite a nice framework but fundamentally it aims to work on top of web sockets and as i say they will fall back to other methods if web sockets are not available so if using web sockets the connection is bi-directional so it's yeah fully bi-directional and nailed up unlike http which is a kind of request response stateless kind of protocol this is a stateful protocol that is persistent and just a little diagram there so this is kind of how a websocket connection is typically established there'll be a http upgrade request and if both endpoints can support websockets then websocket connection will be established and will be persisted and then will obviously be closed at some point based on either either client or some other some other event but that's it for i'm not going to cover blaze or server anymore if you want to read more about that i'll i'll put some links below but we are now going to focus fully on the blazer client architecture or the blazer uh web assembly architecture which is what i'm going to show you now now you've actually already seen this in the solution architecture right at the start of the video so local machine web assembly running in that web browser any server doesn't have to be a.net server or anything like that the app will be downloaded onto the clients and then the client will make the connections to the apis or make the calls to the apis directly so let's talk a little bit about webassembly now now i've updated this diagram that was right at the start of the theory section where we were talking about html and css and javascript web assembly is really this fourth piece of the pie now and i'll tell you why i believe that to be the case it's an open standard which is really specifying this portable binary code format that you know will actually run on top of web assembly the whole goal of it is to enable highly performant apps on web pages and i've kind of put on in bold and italics because again coming back to this point the web apps we're talking about here are web apps running in a browser and the reason i'm saying it's really this fourth piece of the pie is that in december 2019 it was a world wide web consortium recommendation that webassembly be adopted as a core technology along with html css and javascript so again i want to label the point open standard this is not a microsoft thing or a google thing is a open standard similar to html javascript and css theoretically supports any language we are going to be focusing on c-sharp obviously this is really important one of the questions you may have is that you know what speed does it run out of javascript will presumably run a lot quicker than this possibly very ever so slightly but it does aim to execute things like c sharp code at almost the same speed as javascript would execute runs within the same sandbox environment anyway and it's available on all four major browsing engines really three edges effectively chrome isn't these days but edge chrome firefox and safari and again i've mentioned this already you don't need to enable it you don't need to download it it's not a plugin it is just part of your existing modern browser and then before we move on to coding i just want to make the distinction between web assembly and blazer effectively so you have webassembly blazer or c sharp runs on top of webassembly so blazer blazer allows you to compile c sharp applications into webassembly runtime components but you may or you do in fact have other languages that can run on top of webassembly such as c sharp bust goal and i'm sure there will be many others but point to take away from this slide is web assembly is one thing blazer is a separate thing that kind of works with webassembly blazer client should i say is something that works with webassembly the blazer server doesn't make use of it at all all right so that is definitely enough theory i think now we move on to coding all right so let's begin coding so i'm just going to open a new visual studio code window that's where we're going to be doing all our coding today and let me just kill the welcome message and then i'm going to do control back quote to open integrated to terminal and change into my working directory which in this case is on my d drive in my season 4 folder and in my episode 2 folder and of course it will be different for you now let me just check there's nothing in there no there's nothing in there great so clear the screen now before we go on i just want to check to see that i have dotnet installed and installed the right version as well so to do that it's dot net dash dash version and i have version 5 installed now if you get an error message there or you see a lower version number than five then go away and install the latest version of dotnet framework pretty easy pretty straightforward so i'll leave you to do that yourself fantastic so let's take a look at the templates that we have available when we want to scaffold up a new project and we just type dot net new to get that list and we are wanting a blazer web assembly project so here we are blazer webassembly app is the one that we are after now that's just the blazer client that i've been talking about in the previous slides and you can see above that you have the blazer server project as well but up key we don't want the blazer server we want the laser wasm project and we will give it a name and then we'll call it blazer api client and that will go away and it will scaffold up a new blazer wasm project for us so quick directory listing we have a folder there and let's just open that up recursively in our existing visual studio code session and that should load fantastic now we may get a message down here saying do we want to rebuild some assets or something of that hr we usually get something like that interesting if we don't get that there you go i'm just waiting for that to pop up yeah so do we want some required assets just click yes and we get this dot vs code folder which we don't need to go into too much more detail with so i think what we'll do now is we'll run up the application we'll see what we get and then i'm going to move back and forward between the application and this project and we're going to go through the anatomy of the project so you understand what everything is and where it fits into the bigger picture so let's do that now okay so just before we run the application what i'm going to do is come into our program class and for those of you who've done any net programming before you'll appreciate that the program class and the in the main method specifically within the program class is really where dot net applications get kicked off it's really the entry point for the application so i'm just going to put in here a console.writeline and i'm just going to put in laser api client has started now you don't really need to do this this is just for me while i explain what's going on with the application and how it starts and where everything happens this is yeah you don't need to do this you can if you want obviously and so what we would expect is when the main method gets hit that message laser api client will get pushed out to the console okay so just wanted to do that just stick a pin in that for the moment though and what i'm going to do is open up the integrated terminal again so control and back quote and then we'll just do a dot net run to run that up fantastic now you'll see a few things here and the fact that our application was built in the wheels that's good you'll see that we are running on two endpoints so the the server that's been started is available on two endpoints one for https and one for http and you'll also see that we have our hosting environment set to development now interestingly you'll note that nowhere in that console output is our little message that we put in there that's not there why because we've not actually run our blazer client app all we've done is run up a kestrel server that's all that's going to eventually serve our app so you can see here.net run this is the entirety of the output that has not been written out yet before we go into that let's just take a look at where this stuff came from so if you go into the properties folder and look in launch settings json you will actually see something that looks some stuff that looks quite familiar our application launch url with those endpoints in there our environment has been set to development and the only other thing that wasn't appearing in that output but i will mention because it's somewhat interesting is this inspect uri that is required if you want to do interactive debugging which we're not doing here in today's video now this profile get picked up because we're running our application at the.net command line if you're running your application in visual studio for example one of the other profiles would be picked but we're running in the dot net cli so this is the this is the profile that get picked so we're not going to do anything else with launch settings json so we can close that down and kind of forget about it for now our application well be very careful here our server is still running uh so let's go over to edge and then and see if we can call one of these endpoints and pull down our blazer client app so if we come back over here i'm just going to copy that you can't click on it to launch a window i'm just going to copy it and before i do that i'm going to open development tools by hitting f12 and i'm going to make sure the network tab is selected all is selected and we have the previous output from this last application which is bing so i'm going to paste in our endpoint pay attention to this window here the top left window here and just see what is going to transpire so hit enter you can see loading appear up here and then our application appears so we'll cover that in a second and then you can see all sorts of network activity and one of the things you can see is the as a result of that request a whole load of microsoft runtime stuff has been pulled down and you'll also see when we come a bit further down you'll see the blazer api client dll has been pulled down now that's our actual application now what i want you to pay attention to is the initiator of these requests and it's something called blazer.webassembly.js javascript file that's been responsible for actually pulling this stuff down so that our application can run and i'll show you where that is in a second now the other thing i want to show you is if you come over to a console you'll actually see something that looks a little bit familiar i'm noticing i've put an e at the end of blazer it doesn't really matter um but our blazer client has started and that message has been pushed out to the web console in our browser so that makes a bit of sense now one thing you'll see here is that it knows its browser which is cool and you can see that the resources have been loaded fantastic and all the resources have been loaded from the network okay this is the first time we've grabbed this application so you saw that whole host of microsoft runtime stuff come down if we refresh you'll see we still have the same number of resources but you'll see that the majority of them if not all of them have come from the cache so in this instance we've not gone and pulled all that other stuff down again so it's only the first time we do it it gets cached and then subsequent loads will be a lot quicker as you actually saw fantastic so that's our application up and running i think i'll close this down now and let's take a quick look at what we've got here so we've got a navigation pane down the left hand side we have a few different buttons on our homepage we have this hello world page now before i go on everything in blazer or most things in blazer the important stuff in blazer are really called components these are the building blocks of any blazer app so what you're actually seeing here this hello world page is basically a component in fact this survey box here is also a component and it's actually nested inside the hello world component our counter is a component and if you click on this the counter will be incremented so nothing terribly exciting but what is exciting is that this is not javascript it's executing this is c sharp that is executing okay and then finally our fetch data component is going and pulling down from somewhere some data now i can tell you this data is just coming from a static file a json file that's been read in okay so that's basically our application it's fairly simple so what we're going to do is we're going to actually update this component to go out to the internet and pull data down from an api which is not doing at the moment and then we're going to add some other functionality to the application to be a bit more sophisticated but why don't we pop back over to the code now and i'll just take you through what has been going on there if i can find the the correct window there we go so i might just kill this for the moment just so we get a bit more space and close that down and so what i want to show you is the entry well it's not really the entry point but the initial page that gets loaded is this index html page so when we made a request to our server endpoint this is the page that gets loaded and it's a fairly it's a fairly straightforward html page it has a head and it's just pulling in a lot of static styling resources css as you can see there and then within the body there's some interesting stuff now one thing i want to draw your attention to is this loading dot dot dot here you saw that when the page was loading and it was waiting for the application to get loaded okay but once the application has loaded this is where it actually runs it runs within this division here or this div tag with an id of app this is actually where it runs we then have another div which is for any arrows and i'm sure we'll have some as we move through the application so you'll see what that will look like when we generate errors at some point and then finally within the index page you'll see this blazer.webassembly.js file and that was the initiator of everything getting pulled down so this script runs and all our stuff gets pulled down and populated into here and that's where the application actually runs now you will remember that i did say blazer was somewhat dependent on javascript this is what i mean we do need a little bit of javascript to get this all up and running you don't need to write the javascript you don't even need to see what it's doing but it is dependent on it to some extent we're staying within www.there's a couple of folders in here one for their css resources and one called sample data which has this static weather json file and this is the file that got read into that fetch data component so that's all that is so we can safely ignore that now the only other thing worth mentioning about ww root if you wanted to provide an app settings json file which you often get with net projects that's where you would put it in the www root folder and it just gets read in and settings are available now we're going to be making use of that later but for now we can kind of park the wwe route folder so then the other things that i really want to take you through is this pages folder and you'll see possibly some things that look a bit familiar counter counter dot raise or should i say is our counter component and our components are written as razer okay and if you've done any asp rays or pages stuff it should be familiar to you razer is basically a mix of code c sharp code and html and in this case it's all in the one file stick a pin in that for the moment and one thing you'll notice is that each component has a page directive at the top which is basically telling the application where you can find that component so if we actually come back and rerun the application and we click on counter you'll see basically this is the this is what it's referring to it's routing to the counter component okay so kill that i'll leave it running actually and just close down the terminal so this is our counter component fetch data pretty much exactly the same but you can see interestingly that we're getting a http client object injected into this piece of razer that we are using to retrieve our weather data and it just writes out a table okay so you can see sort of html mixed with some code and then actual code block that has you know a page load or on initiate on initialized async page load effectively and then another class here that will actually retrieve the data we use we use to populate the data and you can see it's in the one file so again stick a pin in that for the moment index raiser is basically our hello world page so again coming back here back home it's this one here and in interesting you can see it's making reference to another component called survey prompt and that moves us nicely on to this shared folder where we have some additional components that are shared amongst the application so survey prompt is in there and that's all this is referencing and then we have our main razer that's a css page we have our main layout component and you can see it's referencing our nav menu component which is also in our shared folder and again that just relates to this section here and the main is obviously the entire window fantastic now we're going to be working mainly within the pages folder well actually exclusively within the pages folder to create new components but we will be visiting and updating our shared folder specifically the nav menu to add some new navigational navigational items to the menu when we come to doing that now the only other thing really i want to mention in ports razor is just a list of using directives so it's just pulling in the relevant stuff that we need to make reference to so won't go into that in much more detail but the only other thing that's really worth talking about is this root component here so app.raiser is what's called our root component and what's that that is really responsible for is routing so when we select the counter component for example this is responsible for routing and displaying the the correct component okay blazer api client protcs project is just a project file and it's pulling in some package references i don't think from memory we touch this but again those of you familiar with net programming you'll be familiar with this and then finally we come on to the program class and specifically our main method and this is really the last kind of piece of the puzzle really you'll see that yes this was written out to the console in the web console window it's responsible for building our host which is basically our application here is where we're setting up our root component and you can see here that it's adding it the app root component which is this one here it's adding it to our app tag or app div in our index file so here so it's basically loading it into here here's the id app and here it's referencing it using the hash app convention we're also using dependency injection i'll cover dependency injection a bit in this tutorial but basically what this line is doing is making our http a client making our http client available to us throughout the rest of our app and you'll remember hopefully you remember if you come back to the fetch data razer component that we were actually injecting a http client in here for retrieving our static data so that's what that's doing there and then finally the application is running so that's basically our sample app scaffolded that's the main anatomy components of our application what i'll just finish off with is just showing a bit of a slide that basically just repeats what i've gone through but i don't know about you but i find a picture is sometimes a bit better to help me understand what's going on so the first thing we did was a dot net run so dot net run and then that basically just launched our kestrel server and then pulled in that launch settings json file which i showed you and then it was just listening on these two end points here for activity but yeah the actual app hadn't run yet so then the app launched proper was when we made a request to localhost port 5000 that called our index.html file that then called the blazerwebassembly.js which pulled down our runtime and our compile dll which you saw and then the program class effectively kicked off and the main method really executed and what that meant was oh yes before we move on to that you could alternatively and we will be doing this is add an app settings json file to the www root folder we've not done that yet and it's not there by default but you could provide that and that will provide additional settings into the main method but what that did was it built our main app host and it allowed us to specify where our root component was and where it should go it registered the http http client in our dependency injection container and then finally it runs our app which runs in the app tags within our index.html and then basically that is our app and we had a look at some of the components that were in there naming their counter and our fetch data components and we'll be creating our own components next which is really the rest of the video so why don't we go on and do that so we're going to build our first component and on screen here you can see a screen mark of what we're actually going to build and in this case we're going to build a component that allows us to convert to and from using base64 encoding and base64 is just yes it's just an encoding standard that's used quite frequently throughout different it applications so for example if you've ever used basic authentication that uses base64 encoding to encode the username and id when you send that across in the header so i thought it'd be a good example for us to get started with to start working with blazer components so we will add a a button to our navigation plane point number one with a nice little icon we're then going to actually create our new component and it's going to have a couple of text areas or text boxes one for the non base64 encoded string and one for the base64 encoded string we'll grab a couple of buttons to encode and decode from and they will have events behind those and then there's going to be some c sharp code that's actually going to do the encoding so it covers all our bases gets our teeth cut on building components and it sets us up really well to move on to the next part which is actually building components to consume data via apis so let's get started and start building out our user interface all right so let's just take down powerpoint as much as i hate to do that you know how much i love powerpoint and we're going to come across and we're going to create our first component so in pages right click new file and we're going to call it base64 converter dot eraser now it's important how you name your razer components because ultimately they get converted to a class effectively so you really need to make sure the first letter is capitalized on your component names now we're going to put all our markup and all our code into this razor file as your components grow more completely as your components do more complicated you will undoubtedly split out your code and your markup just to kind of mean just to kind of keep things a bit separate and we'll do that when we come on to doing the api stuff but for now this is a relatively simple component we're going to keep everything in the one file so the first thing we're going to provide is a page directive which you'll remember is used for routing so we're going to give it the same name as our component so base 64. converter fantastic and then we're going to launch into the markup so in this first bit we're just going to do effectively just html markup okay now for a warning i am not a as you'll probably a fantastic ui type person so my ui skills are quite rudimentary um so yes fairly basic but functional and just as another sidebar as part of the project scaffold you get the bootstrap css framework packaged up with that so we're going to use bootstrap classes to help style our ui bootstrap has some people who love it very much some people who don't like it so much it's probably falling out of flavor in the last few years i still quite like it um huge subject area all of its own i'll put some resources done below that you might find useful um but it's not something i can delve into nor do i want to too deeply in this video so bear with me now there's a bit of typing involved here but i think it's worth doing at least for this first component so the first thing we actually want to create is one of our actually the first time we want to create a heading isn't it so h1 tag and we'll just say base64 converter fairly simple we then want to do one of our text boxes but we want to put that in a div and we're going to get not a deck div and we're going to give it a bootstrap class of form group and this just kind of groups form elements together in one little package and it just styles it a bit nicer so we're going to put a couple of things into this form group and again form group is a bootstrap styling class so i want to create a text area and again another class is going to be the form control and make sure you spell form correct not typing as from and then some sizing and this this to be honest with you for me is the most confusing part of bootstrap how things are sized and it's all to do with reactive user interfaces and massive topic just go with me on this one that's what we're going to use but again do your own research um placeholder and this is just the text that will appear sort of by default in our text box or in our text area so on base64 and that's it for now we're gonna we will add a couple of event handlers in here at one point next actually but for now we're just going to keep it as sort of pure html and css and then the reason we're using a form group is we're going to add another little small tag which will give us some small text underneath our text box describing in more detail what it's for and it's a there you go i've spelt it wrong already a form text and then text muted again just giving us some styling and then we'll put the text in so this is the value you want to encode as base 64. now let me just do a control b just to clear down that sidebar so we have a bit more room that's all looking quite good so that's our first text box with our heading so i think we probably should run it and take a quick look to make sure we've not done anything massively wrong dotnet run okay and i'll just fire up edge and we'll see what that looks like and hopefully it should look somewhat like our mock-up so localhost 5000 let's just go straight to b64 converter there we go so yeah it's not looking too bad now obviously we don't have our button here yet we'll do that later but we have our first text box which our text there which we can you know resize and we have our kind of you know subtext here and our placeholder text so it's all looking quite good it's looking kind of similar to a mock so that's great so let's keep going we're going to add our two buttons now and then we'll add our other text area so back over here let's just kill this from running let's take this down and we'll start on our buttons now so no surprises it's going to be a single button again we want to style it so give it a class and we'll say btn button obviously and then we're going to color it as a primary button which is blue okay and then we're going to give it a type which is button and that's it for now keep it relatively simple and then what we want to do is we can just say uh you know encode and that will obviously provide that wording within the button but what we can also do is provide a little icon like the down arrow and the up arrow so we'll put that inside the span tag and a span tag is really just there to yeah do stuff like put icons on the screen it's a kind of i don't like calling it a nothing tag but it's kind of this is what it's kind of for now what we're going to use actually is we're going to use an icon framework called open iconic and i'll actually just bring that up so you can have a look and see what that's like type in here it's probably we are use open iconic yep and i'll put links to this down below and you can see here it provides us with a load of icons and this is actually where these icons come from in the sort of boilerplate application so yeah i know what icons we need to use it's the up and down arrow so you can actually search for them so i think if you type in arrow here you'll get a number of arrows so we want to use the thick bottom arrow and also the arrow thick top to represent pushing stuff up and down between our text areas so we're going to do that now let me get that down so yep let's see span class and then in the in the styling you're going to specify oi for open iconic and then we actually specify the icon that we want so the first one we want is oi arrow thick bottom i'm tempted to make a joke there but that's probably very politically incorrect of me so i will resist doing that and you know just close the span out and all that does is put an arrow next to our encode word and i've put a space in between here so let's just copy this save you from typing anymore and copy that in this is our other button that's going to push stuff up so we'll say style is button success which will make it green and then we'll change our icon to oi arrow thick top perfect and then we'll change this to decode and that will uh perform our decode operations and then finally let's just copy this and this will be our text area for your our actual base64 encoded string will exist so let's just change the placeholder text base64 and then we'll change this text here this is the value you want to encode from base64 hopefully that makes sense so we'll save that off now that is basically our user interface done using just html and a bit of css a bit bootstrap and that's that's it so we'll run this again we'll take a look and then if we're happy with it we'll move on to actually writing some c sharp code and at them putting some events behind these buttons and doing the more interesting stuff so let's quickly run up and we'll take a look and see how it looks hopefully it looks wonderful as per our mock so let's come over here let's refresh and now pretty close um there's a bit of a you know the buttons kind of sit directly on top of this other text box here but you know what i'm going to leave that for at the moment now actually just before we move on the only other thing we want to do is create a button here just before i forget so let's just kill that again and it's pretty simple i'm not going to do a lot of typing here so we'll come back into our project and we'll go into our shared folder this time and you'll remember that we have this nav menu razer component with all our buttons in it so i'm just going to copy you can see here we've got three existing buttons effectively they're just a list elements in an in an unordered list try saying that after a few videos and we'll just paste that in here we'll keep everything the same and then we'll just put the the route to the component so base 64 converter and we'll change the again you can see here they're making use of a icon from the open iconic library and what i want to use this time is random and you'll see why in a minute and then we just want to change the label the actual text to base 64 converter so hopefully that made sense the href has just taken us to the component we're just creating another list item under the other one so we'll get a fourth button change the text and change the icon cool very simple actually so let's do another.net run and hopefully we should see these changes propagate through and indeed we do now because we're actually already on this component is highlighted which is actually really nice it's highlighted as button for us already you don't even need to do anything styling wise so we've now got our base64 uh component from a user interface perspective ready now to do some more interesting stuff which is right c sharp code executing on the browser so we'll move on to that now all right so let's just minimize this and we're going to come back to our project so i'll just kill the running server get rid of our terminal and we'll close down nav menu razer we don't need that right now so we're going to be doing most of our work within our base 64 converter component bit of amount of though so what we want to introduce now are some smart some events into our ui elements and as well as introduce some c-sharp code that's basically going to run in the browser and perform this conversion to and from base 64. so what we'll start with is looking at our button elements and this is probably the most familiar part i would imagine for most people it's not unusual to expect that when you click a button event be triggered click event and then when that click event is triggered you would usually do something with it like submit a form or call a method and that's what we're going to do we're going to call a method for each button converting again to and from a base 64. so what we're going to do is come back over to our first button the convert or the sort of the encode button according to base64 button and we're going to introduce our on click event it's actually really straightforward so type the at symbol gives us our kind of blaze our event list and we will look for on click clicking there is there so first one i think and then we just make it equal to the method that we want to call now these methods don't exist yet so we will get some errors if we did a build at this stage um but let's just specify the name of the method we want to call so this is our encode button so i'm going to call it convert to a64 that's it that's it really obviously we have to create this method somewhere but that's it for our event on our button so we'll just copy this and we'll do exactly the same thing down here on our other button or converting from base64 so we'll just call that convert from basics before and so yeah we do still need to write these two methods which we'll do in a bit cool so that's our buttons taken care of very simple and then the next thing we want to do is probably a little bit more um interesting and before i move on let me just close down our side panel by doing ctrl b so we're going to add some stuff into both our text areas and what we really want to do is we want to bind the contents of our text area to a c sharp property so that we can then work with that c sharp property so the way we go about that is introducing this thing called the bind value and again this is another bit of razer laser code and we specify a bind value and what are we binding to well we're binding to or we want to bind to an as yet undefined c sharp property and i'm just going to bind it to a property called non base 64 and i'm just going to say body just to kind of distinguish it from some of the other things are flying around in the code so basically we're going to create this property in a bit and we're going to bind the contents of our text box to that property and it's a non-base64 encoded string at this point in time now you can see it's complaining and the reason it's complaining is yeah fair enough we're telling it that we want to bind to this as yet un defined property but how do we do the binding and the way we do that is by specifying a bind value event so these two things kind of go hand in hand with each other so again we specify bind value this time we specify the event that creates this binding and we simply specify the event name so the event name in this case is not on click but on input not import input there we go on input so just to recap every time you type something into the text area the on input event will fire and it will then bind or rebind the contents of the text area to our bind value which in this case is a c sharp property make sense cool should do it's not that complicated so i'm just going to copy this and i'm going to copy it into our other text box but i will change the name of the bind value in this case just paste it in and i'm going to take out the non because this text box is the base 64 body that we're going to convert back to non base64 so hopefully that makes a little bit of sense so i will put a link to an article by microsoft a bit more about blazer eventing and it covers a lot of this stuff in a bit more detail but this is all we really need to do for our project so all good now i've just noticed i have put this in the wrong place so let me just take that out put it in the closing tag i should have really put it in here so for those of you who spotted that well done i'm glad i spotted it before i tried to run the code now if you do try and run the code or build the code we're going to get a hell of a load of errors because none of these properties or methods exist yet so i'm not even going to bother building because i know i'm going to get errors so we're going to keep moving onwards so in order to resolve the errors that we haven't yet seen but i know are there we need to introduce our methods and our properties now the way we do that is by introducing a code block so it's just at code curly brackets and then we now have a section where we can enter our c c-sharp code now when i talked about splitting out concerns and moving code into a separate file it's really this bit here that you would split into a separate c-sharp file which we could do now not going to though we will do that later we're going to keep it in the same file for the moment so the first thing i want to do is create our two properties so prop tab first property is a string and the first property is this non base64 body so i'm just going to copy that out and i'm going to set that to this here fantastic and i'm going to do a second property tab string and i'm just going to type in this times base 64 body okay and that's basically this bind value here so something that's already in base 64. and again just to keep repeating the the same thing the value of our text box or text area will get put into these properties automatically on input fantastic now what's left for us to do is really to create our two methods that are going to allow us to convert to and from base 64. so it's our first one store or encoding or converting to so private void my typing is getting worse as i get older and we'll just copy the name exactly just so there's no scope for error there we go and we're just going to access our properties directly we're not actually passing anything in via the method you could change that i suppose if you really wanted to but i don't feel as i needed to do that here so kind of a two-stage process the first thing we need to do is create a byte array in order to then convert that byte array to base 64. so we'll create a variable and we're going to call it plain text capitalize the t bytes [Applause] and we're going to make that equal to we're going to use system text encoding so in coding to utf-8 now we're not getting intellisense here and i'm imagining that's because we don't have this using statement using system text anywhere but let's let's keep going for the moment because i want to show you something anyway so get bytes and then we want to get the non-base64 matches here so whatever is in the non assigned to the non base64 property we want to take that because we want to convert it to base64 and we're converting it into byte array effectively then this is the clever builder i think it's quite clever what we want then want to do is make use of this property which bear in mind is bound to our second text box and what do we want to do with that we want to assign that a value and the value we want to sign it is the converted plain text effectively so we'll use the convert method on system and uh you get a whole host of stuff on this so we want to you make use of two base64 string great and then what do we want to put to a base 64 string or byte array here i'll paste that in here so hopefully that made sense so we will click our convert to base64 button we'll call this method it will take whatever is in the non-base64 property which is bound to our first text box upstairs converts it to a byte array and then we convert it to a base64 string and assign it to our second property which is bind to our text box below fantastic so this should all work now but i want to keep going and i want to do our second method but i'm going to suspect we will get a compile time error because it doesn't know what this is but let's keep going we'll do our second method and then we'll tidy that up we'll resolve that issue in a second so private void convert from base64 almost the mirror opposite of what we've already done so we want to create a another variable and this time i'm going to call it base64 encoded bytes and we'll use the convert method again but this time it's from base64 string and what we're passing in we're passing in the base64 body so the property bound to our text box below there we go again just the opposite really and then we want to like we bound to the base64 property we want to bind to the non-base64 property because we're doing it the other way hopefully it makes sense when you see it working it'll probably make a lot more sense and again we'll make use of encoding which it's not aware of but let's keep going utf-8 hopefully i type this in correctly get string and what do we want to convert this thing here b64 encoded bytes so i think we're pretty much ready to go but i suspect there'll be an error a build error so let's just do a dotnet build and we have two errors okay that's good yeah because in coding we've used it twice so encoding does not exist in the current context so there's two ways you can resolve this there's really one way but it's doing it the same doing the same thing in two different places so we can just bring in a using statement up here and use system text if we save this and we do another do another build it should resolve our issue indeed it does fantastic but i'm not going to do that i'm going to take this out here and what i'm going to do because i kind of skipped over i didn't skip over it but i kind of didn't pay much attention to it when we were going through the anatomy section down here you have this imports razor file you can just pop it in here if you feel you're going to be using system text elsewhere in your project and i feel probably it's a fairly standard thing that we may be using elsewhere when it's certainly become to be using our api so i think it makes more sense to put it here at a more global level so let's save that off and we'll do a build again and we should have nowhere else indeed we don't so all that's left to do is run this up and hopefully it all works as we would expect so there we go so let's refresh our app so the first thing we want to do is convert to base64 so i'm going to enter in a string this is not base 64. we'll click our encode button that will call the relevant method and then populate hopefully there we go fantastic our second text box with the converted value i'm going to take this out here i'm going to decode and it goes the other way so you can decode and encode between base 64. so if you've followed along give yourself a round of applause and a gold star smiley happy face well done okay so that's us finished with this component well i'm certainly finished with it you might not be and for the following reason the reason being that we've not really done any proper error handling or anything like that so i want to show you what will happen let's read come back over and reload the client so we have nothing no values in our text boxes and if we try and encode what is effectively null we'll get an error and there you go and you'll see the error message pop up here and this was actually the error div from the index html file that's what it looks like so easy enough to fix um i actually wanted to generate an error and show you what those arrows look like and this is what it will look like in the user interface and if you actually want to go in and look at the arrows hit f12 to bring up your developer tools if you're using edge or and chrome i think firefox might even be the same go to your console and you'll see the output here and you can just see yes null reference the ubiquitous null reference unhandled exception so we need to make a check for that in our functions to make sure we're not trying to use a null object easy enough to do not going to do it here a little bit of homework for you to tidy this up so it's a bit more enterprise ready other than that though we are done then we're going to move on to the api stuff in the next section but just before we do that just to kind of recap what we've done here we have created our first component we have routed to it by you know putting a box on the nav menu so we can get to it that way we've done our user interface which is you know basic but functional we've added binding and events to our some of our user interface or actually all of our user interface elements and then we've written some c sharp code executing on the browser that will actually do our base 64 encoding and decoding so simple but not so simple but it's covered i think it's given us some good coverage to move on to the next section which is what you've been waiting for which is consuming apis using blazer so what we're waiting for all right so let's take a look at finally the apis we are going to be working with throughout the rest of this tutorial so one rest and one graphql so without further ado here's the first one here's our rest api and well actually both apis are going to be working within the same domain in this case space x the private space agency but what you're seeing on screen is the swagger or open api specification for our first api the rest api now i don't believe these are actually official spacex apis i think they've been put up on the internet by some kind person that will allow you and me to work with them so thank you to you um not that that makes any difference but yeah i just thought i'd call that out think they're just someone's passion project anyway back to the point at hand so yeah this is the rest api and you can start to see the types of things that you can do with this api it's mainly read requests or get requests and you can pull back things such as the launches that spacex are going to be executing or that they've already done missions the rockets that they have all that kind of stuff you get the you get the rough uh idea of what this api is going to allow us to do okay and then if we pop over i'm just going to copy this take a quick look at the graphql api i actually have to pick there you go actually resolves to graphql that's good slightly different tools so again this is swagger open api which is a way of specifying or documenting rest based apis and what you're seeing here is something completely different it's a tool that allows us to query graphql endpoints it's called a graphical i think that's how you pronounce it and in this case it just allows us yet to actually let's just do it query the graphql api and you can see very similar sort of almost analogous to the resources that we see here um you have effectively objects that we can query okay and i'm not going to go into too much detail here about the differences between graphql and rest we i think we'll do that as we actually start to exercise these apis so these are the apis we're working with both relate to exactly the same domain which is the space x and we're going to be using rest and graphql all right so what we're going to do next is actually start to exercise them and we're going to do that using a separate tool that's going to exercise both these apis and i think in doing that you'll start to appreciate the nuances and the differences between them and the similarities most more specifically the data payload that they'll both return all right so we're going to do that next so as i said i'm going to use a tool called insomnia to start exercising both our apis it's a tool i use all the time i really like it and it's particularly good for graphql for reasons that you'll see in a moment now if you want to get hold of it it's free um so just pop over to google and i suggest you type look for insomnia do insomnia totally spell that wrong in insomnia api and that should take you to the main yeah i mean website so it's called insomnia.rest although it does rest and graphql so just click on this and free get started for free and yeah download the app and yeah just click on in this case i'm running on windows download insomnia for windows but you get it for mac and ubuntu so highly recommend it it's a great tool so enough of that and i'm not affiliated with them or anything i don't make commissions on insomnia that's free anyway so i wouldn't so back over to my instance of insomnia and let's bring that back up and you get different workspaces or collections i think they're called yeah request collections i'm going to create a new one for this video season 4 episode 2 and click create and that creates a nice empty environment for us so i'm going to create two folders one for our rest requests and one for our graphql requests now of course you don't need to do this if you don't want to but i find um if you're calling lots of different apis on different platforms and even this reason i like this tool as well as you can create different environments so like one for staging and test and production i find it is worth investing in organizing your requests right from the start because i've fallen into this trap where you end up with hundreds of requests and if you've not organized them well it can become quite laborious to navigate them anyway let's work with our rest api first and let's come back over to the swagger specification uh here we go and i want to look at launches the launches the resource now you can probably infer actually from from just looking at this here that if we simply append uh launches to this that that should get all our launches so why don't we go ahead with that theory we could drill in here and actually look i'm gonna i'm gonna make that assumption i think it's a fairly safe assumption so over unrest click the folder new request i'm going to call it get all launches on chance all right and it's a get request as per the swagger spec now just before i click create with rest as i'm sure you're appreciative of you will get get requests to read data post requests typically creating data creating resources put and patch to update resources and delete to delete resources stick a pin in that for the moment i'm mentioning calling that out specifically for a reason when we come on to graphql slightly different nonetheless let's keep going get request get all launches click create that then creates a get request and in our url box i'm just going to paste in the base api uri and then just type launches okay and that should click send looks like it's working it's going to take a while it'll bring back here we go all our launches and this is just a json payload with every single attribute for every single launch that spacex have now stick a pin in this for now we're going to go through this in a bit more detail when we come on to coding but i just wanted to test that this is working and it looks like it's fine there's no authentication i don't think we've got any headers at the moment which is not best practice but we'll cover all that bit later but it seems to work and this is one of the reasons why i like these apis they're very forgiving some apis when you call them you have to make sure that you're providing a user agent header you've specifying the content type they may require authentication and that's good but for purposes of this video that can be quite problematic so these apis are very forgiving very easy to call you shouldn't have many problems with it so let's just create another request let's get all the rockets so get all rockets get requests create that paste in our base url and i'm going to guess i'm going to go to the specification but i bet rockets will bring back all our rockets and looks like that has worked 200 response and we get jason with all the rocket details fantastic cool so you're probably quite you're probably more familiar with rest than graphql that is a bit of an assumption but on my travels that tends to be the the general lay of the land graphql people aren't typically as familiar with so let's have a look at that now so right clicker graphql folder new request and we're going to get all launches okay now i i made about a song and dance about with rest you have get requests to read data and post requests to create data blah blah blah with graphql for the most part any graphql query or mutation and the mutation is basically a graphql's way of saying creating data updating data deleting data any unsafe operation in the graphql world as a mutation it doesn't matter though mutation or query doesn't matter they're always a post request more than usual more than likely you can use get request but i've not actually seen that personally ever being used okay so graphql always a post request doesn't matter what you're doing reading data creating data deleting update doesn't matter always a post request i'm not going to ever say that again and then for the body you will select graphql query and click create now straight away we're kind of getting an error there's no uri in there that's okay so let's come back over to our graphql endpoint and let's paste this in and see what happens now again i can't remember if i mentioned this but with graphql there's only ever one end point for your particular domain okay so unlike rest where if you want to get rockets there's one uri one endpoint for launches there's another uri uh another endpoint with graphql that is the only endpoint you ever put in and you specify your objects within your query which we'll do in a second so our error is gone which is great another thing which probably happened automatically but i'm going to do it manually is do this refresh schema and what that's really doing is it's going to the graphql endpoint here and it's pulling down the entire specification for that api and it's loading it into this tool and what does that mean why is that a good thing well if we type that we want to query and this is graphql query language curly brackets we then get a list of all the objects that we can query on it gives you a kind of intellisense functionality which i think is absolutely wonderful so we're going to look for launch launches plural okay now this is graphql query language it looks very similar to json but there are no commas that's probably the the simplest way of putting it that's probably a bit basic to be honest with you but that's the way i like to think about it it looks a lot like jason not jason so what we're saying is we're querying we want to pull back our launches object and then if we actually hover over here another thing with loading the schema is that we can actually see that query launches brings back an array of launch objects and that's denoted by these square brackets which is quite common syntax for an array it's in particular json as well arrays are denoted by square brackets if we click on this it actually gives you all the attributes or fields more correctly in graphql language all the fields on the launch object okay so i'm going to say i want the launch id and i want the launch year and i want the launch site there we go kill that and then i think we probably this is a nested object probably so that's why i was complaining so we need to go in and specify more details so again for launch site we hover over that it's a launch site object and you can see you get site id site name blah blah blah so i just want the site name site name now i've never really let's theoretically say i've never really used this api before but already i'm able to query it and interrogate it using this kind of schema based uh intellisense functionality it's really great it's really usable i think and actually very easy to use so let's send that over and that's going to give us a kind of all our launches in the same way we've got all our launches here but you can see here we've got all this data that maybe we don't need and with graphql the nice thing is you only pull back the data that you need it's the same data but just reduced okay so quite nice i like that that's good and then just to to prove the point let's just do one for rockets so new request get all rockets and again post request graphql for the body create and as with this it's the same url there's not a different url same url pop that in refresh schema and we'll write a query curly bracket and we will get a list of objects that we can query and i want rockets this time so pick plural curly brackets and then the intelsense can be good but can also be a bit of a curse because it means you sometimes select the first attribute that you may not want let's just take a look at our rockets so yeah i want to see whether this rocket's active i would like the name if we have the name somewhere presumably we do name and type okay so active name and type fantastic and that's all i want okay i don't want anything else and let's send that over there we go so we get you know all these rockets this particular one falcon one is not active it's a rocket and its name is falcon one um there you go so we've only got four rockets there and if we come back over here again um we we got all our rocket data but we've got every attribute back with it all right so again just a useful exercise just uh you know an exercising of these apis so we're effectively going to take these requests i'm going to bundle them into code using our blazer client fantastic but what we're going to do next is we're actually going to look at the payloads the json payloads that we've got returned we're going to build some objects or some classes more correct we're going to build some classes c-sharp classes from these json objects so that we can model them within our blazer app we're going to do that next all right so let's just minimize insomnia for a minute and let's come back into our project and what we're going to do is yeah we're going to actually make some api calls now we'll be pleased to hear but to begin with all we're going to do is we're going to adapt this existing component that came with the scaffolded application the fetchdata.razer component we're going to adapt it and bend it to our will change it to do what we need it to do but before we do that let's just take a quick review of what it's actually doing and then we'll look at what we need to change on it in order to make our api call now we're going to be working with a rest api to begin with and we're going to pick i think the launches endpoint to work with launch data okay so before we do that let's just go through this existing component and take a look at how it's working so as usual page directive at the top you're familiar with that now and then this inject statement and what this is doing is making available to us or to this component an instance of http client and you can see there's the class there on the http client class and we get this instance of it that we can use through the this component so how does that inject work well in order for that to work let's come back to our program class and you'll remember in our main methods where everything kind of kicks off we have this line here where we are registering in our dependency injection container in our services collection we're registering http client and that just means that we can then use http client throughout the rest of our application using that inject statement syntax that's it's that simple so that's all we really need to know about dependency injection as far as this video is concerned not that complex actually fantastic so let's come back to our component and keep going so we then have some simple html that just displays some headings on the screen in a paragraph and come down to this if statement here and we look at this forecasts object or whatever it happens to be to see whether it's null or not if it is null then we display loading on the screen now before we come down if it's not an old we come down to this next section which i'll come back to in a second but i just want to jump down to understand what is forecasts well as you can see here it's an array okay an array of this class type here so here's the class definition weather forecast a fairly simple class with date temperature and degree c a summary and then a little converter to temperature and fahrenheit that's it so all forecasts is an array of these class types so when the page then loads on initialized async we make use of our http client we use this get from json async method it expects a type and the type that we're specifying is an array of this class type here and the data the location of the data that we're expecting the json we're expecting is at this location here and it's just a file so you'll remember maybe hopefully in ww root in our static files we have a weather json file which is just a bunch of json data not that complex so this is analogous this json file is analogous to our api json payload it's almost the same thing so if we come back to fetch data razer instead of having a file location we will have any guesses an api endpoint so that's basically the pattern and then if we come back up here then obviously if forecast isn't null we've got the data effectively we have a html table and then we just iterate around our forecasts collection and we pull out each of the object components so this is basically showing you the data that's been deserialized from just the json file and that's actually in a workable object structure now and we're going to follow exactly the same pattern cool so what do we need to do then to get uh this working with our api endpoint well the first thing i think we should do is define the class that we're going to use to deserialize our json data because we can't use weather forecast because our data is completely different it's launch data so that's the first thing we're going to do all right so what we want to do now is create a class a c-sharp class that is going to contain our launch data or contain an instance of a launch object that we get from our launch api so let's come over to an application and let's right click and do new folder and i'm going to call the folder gto or dtos now what's a dto a dto is a data transfer object and it's what we're going to write next and the whole point of data transfer objects is that they're used to bring data into your application and also send data out of your application and they kind of help form part of this external boundary of your own application and then usually what you do with the dto is you'll map it to your internal data models and the reason you do that is that if the external contract changes someone changes the api and you need to change the dto that's fine all you need to do is change the dto and then the mapping to your internal stuff and the rest of your internal stuff can remain unchanged so it's yeah it's just a separation of concerns again that i've kept talking about so that's all the dto is they're usually fairly simple objects and the one we are going to build is no exception but the road to building it is a little bit complicated if you've not done it before so it might take a little bit of time so bear with me anyway on the folder we're going to create a dto class so right click and new file and we're going to call it launch dto.cs to represent our launch object and then namespace as usual let's plays api client and then dtos and that's it i'm not going to actually start writing the code just yet in fact i'm not going to write the code i'm going to get a tool to help us generate the code now usually i don't like code generation tools but in this instance i think they're quite useful because they do a lot of fairly repetitive stuff and they can also help with understanding some fairly complex json objects so anyway you'll see what i mean when we come on to doing that so to kick us off on that journey of creating our dto what i want to do is come back over to insomnia and take a look at the the payload that we got back from the get all launches api call and you'll probably recall that we got a large json payload which is an array of multiple launch objects now all i want to do as a first step is isolate a single json object from this payload and then we'll take the next step but that's the first step i want to do so in order to do that i'm going to select all of this copy it and i'm going to copy it into my favorite online json editor which happens to be json editor online there are lots of other tools available but i just like this one mainly through force of habit so select the example payload and delete it and then paste in our payload from our api call now there's two views in this particular editor the code view which you're seeing here and a tree view and you can select code and tree view in the same panel but i'm going to copy this code over to the second window and it shows you in tree view by default so what you can see here is we have an array of 111 launch objects and each one each one of the 111 objects as you can see here has 19 attributes so if we expand this first one you can then start to look at the 19 attributes that it has and furthermore you can actually see that some of these attributes are indeed classes themselves they hold objects themselves should i say so straight away this object is looking quite complex and i don't really want to i don't really want to model this in its entirety i'm going to keep it a bit simpler but we're getting ahead of ourselves what i want to do first is isolate a single object so back over in this window you can see here that you get these little arrows and line two you can click up and down represents one object line 100 the same so on and so forth now what i want to do is just select this one object so the opening and closing curly bracket and that is all don't want to select a comma or the opening square bracket so right click copy and then i'm going to clear this out so right click um ctrl a and delete and i'm going to paste in the single json object and if i copy this over to this window you can see yep that looks correct we've got a single object with 19 attributes now what i was saying is i don't want to model all of these 19 attributes in the class that we're going to build you can do and again these automation tools that build the models for you this is really really common useful because it's very laborious to build this yourself um but we're going to keep it even simpler than that so i'm just going to pick a few attributes top level attributes that i want to pull back so i'm going to take this one out the details out because it's too much text i'll keep the first three of these these look kind of reasonable and then i think there's a mission name that i saw yeah mission name this one here i'll keep that one as well everything else i'm going to get rid of so let me just select all this and again this is a slightly manual curation process and it's entirely up to you if you wanted to do this or not you could just model the entire object but i want to keep it simple for this video so this is a very eventually if you click here it should just reformat it and it will show you if there's any if you take this colon out it'll give you an error so it's pretty good so that's great let's copy it over here so we have an object with five actually i don't want this one let's take that just want four there we go so we got id is tentative launch date local and mission name that's all we're going to model now you might go well what happens when you pull all that data back from the api where does the rest of that data go well it just won't get mapped to the object that we're going to create that's all we'll just fall away cool so we've now got our simplified view of our individual launch object or launch json object and what we want to do now is generate some c sharp code from this so copy this and come over to the second tool and this is just called quick type so in here in this window you can paste in your code and it will go away and it will generate an actual code class for you of the language of your choosing now just before we do that i'm just going to come up here and give it a name and the name i'm going to give it is exactly the same name that we gave our class in our project launch dto and i'm going to select c-sharp as the language that we want to generate and you can see it's gone away and it's generated something way too complicated way over the top that we don't really need now in fairness to it you can kind of configure what you need and all i want rather than complete which is way over the top i just want attributes only that looks a lot better now before we go on i'm going to copy this i'm just going to copy it into our project but before we do i just want to draw your attention to a couple of these using statements up here this one in particular newtonsoft.json so what is that well many years ago in atlanta wait no many years ago um microsoft didn't really have particularly good support for jason in fact some may say they'd had no they had no support for jason so newtonsoft came along and they bought a library they'd wrote yeah a namespace newtonsoft.json that does all sorts of serialization and deserialization it's a fantastic framework but what we have now microsoft have subsequently kind of caught up and they've brought out their own framework if i can find over here i've got the article here yes it's system.txt.js so we're in this kind of weird spot now where i think probably most people are probably still using newtonsoft json you'll see it everywhere but people are now starting to move to the microsoft framework and by and large for what i want to do it's like for like but if you're doing some more complicated stuff newtonsoft i think is still way ahead in this article by microsoft on the how you can migrate from one to another you can start to see that there's a lot of stuff that's not supported in the microsoft framework and with with a workaround and some stuff that's just not supported at all but for our purposes we're going to go with the microsoft framework now this tool is using the newtonsoft json framework not big issue and i just wanted to call that out because i'll go through what the differences are but for now i'm just going to copy the class i'm going to copy it over to our code and then i'm going to go through again in a bit more detail and you'll see a couple of little call outs that i've got so straight away you're getting a lot of errors suggesting that we don't have the right namespaces in now let's go through these things here these json properties what are they well if you look at what it's specifying it's saying json property and then it's got a string in brackets this one's id mapped to our actual property called id this one is is underscore tentative mapped to our c sharp property is tentative so what it's really doing is saying in terms of net naming standards this is the right way to name a property we don't want we wouldn't want to name our property that you could technically but it would be going against all sorts of naming standards so what this is really doing is saying in the if i bring it up in the original json payload we have an attribute called is underscore tentative and we're basically let's put json property thing is saying is we're mapping that the json attribute name we're mapping it to the c sharp property name that's all that is doing okay and we're doing it four times for each one for each property so that's cool so the reason i was talking about newton's soft json is this is a newtonsoft attribute the microsoft attribute is not named json property it's called jsonpropertyname so we have to rename these json property name so let's go through all these i probably should have done a find replace but started so finish and it's still complaining and that is because we do need to bring in the namespace so control period to bring in system.txt.json serialization and that should all resolve fantastic and we'll just bring in date time using system now we have one other thing here that's a little bit of an anomaly and it's a little bit strange now if you take a look at let's take a look at this one here mission name it's saying it's a public property fine it's a string called mission name and if we come back over here we look at mission name yep mission name yeah we've named it differently and the value of mission name is a string great it's done a good job there and the same thought is tentative it's a billion cool it's identified that if you come back over yep it's identified that as a bill cool but if you take a look at id id is actually a string as well it's not a numeric type it's a string now that's quite strange i mean typically ids are usually numerics but the author of this api has decided that it's not that it's a string well that's cool but what this framework has decided to do is it's looked at that and it's tried to i guess apply some intelligence and say no no no that's not a string that is a long and the reason for this here is what it's trying to do is convert the source json which is a string and convert it to a long right that's what this is and if you remember if we go back to the code here if we mark this as complete down here there's actually a i think it's a class that does this conversion i think it's down here somewhere there we go so it's try to be way way way too clever for my liking and i don't need that now from my perspective id is a string although that's quite weird it is a string so i'm going to override the the algorithm and i'm going to specify this as a string not as a long and i'm taking this out we don't need this now because we're not converting from a string to a string so we can get rid of that and that is now what our detail should look like and i think that should now compile so a lot of steps there we could have written this ourselves but i think especially when you have a large class that you want to kind of convert to a c-sharp object or some other language those tools are good but with the caveat that you check what they've done because they can do some weird stuff as well all right so the next thing we want to do is update our fetch data razor component to basically pull back launch data using an api and as part of that we're going to make use of our new launch dto object or launch dto class so as part of that we can get rid of this weather forecast class because we're not going to be using that anymore so we can get rid of that save that off and we're just going to kind of retrofit this existing component to replace weather with spacex launches effectively so let's start from the top and i'm just going to replace weather forecast with spacex launches and i'll just change this as well to something like i don't know this is the launch data for the rest api or something this is launch data pull back via rest api that's good enough all right great and yeah so we're making use of forecasts and stuff the forecast array of weather forecasts so we definitely don't want that so weather forecast is gone anyway so let's get rid of that and we'll replace it with a launch dto now just make sure that's what that was called yeah launch dto that's cool copy and make sure it's the same thing looks correct yeah that's good enough and i'll call this launches rather than forecast what i'm going to do is i'm going to copy this into a find replace so we want to replace forecast so control h so we want to find forecasts and we want to replace it with launches so let's replace all of them great and down here rather than forecast we will have singular launch and this will now error out so let me do the same thing here copy this forecast and replace with launch there we go much better now obviously these attributes are completely wrong so i'm just going to take these out because they don't have things like temperature at least i don't remember as having things like temperature on a launch although maybe it's conceivable that they would and we'll replace those with our dto attributes but first of all this is kind of complaining that we don't have the relevant name space let's see if we can bring that in so yeah using details let's bring that in and that should appear at the top here using details so that namespace is brought in and we've got some issues with this so let's uh take this out and replace it with launch detail this bears uh spending a little time on this is basically our http client we're waiting on it we're putting the result into launches that all looks good this is a get method so we're going to use a get request and we're going to actually retrieve json in all all in one shot it's quite a nice method so get from json async and what we're going to get we're going to get an array of launch dtos now the only other thing is this at the moment we are retrieving data from weather.json which is in here down here that's our file that we're using here but we don't want that we actually want to replace this with our api endpoint so let's just take that out and come back over to insomnia and we'll paste in our endpoints let's make this a bit bigger this is what we want here i'm going to paste that in instead put that in here all right so we're just going to go to our rest api uh rest api and we're going to pull back launches we'll get the json asynchronously and we'll put them into an array of launch dtos that will go into this field here and we'll then iterate round now these now should basically resolve so i think the first thing we want is the id great next thing we want is tentative next thing we want is launch date local and then finally we want the mission name i'm just realizing we probably want to update our headers as well because this will make absolutely no sense now get rid of that for the moment and so id tentative and i'll do brackets yes no and this next one is launch date local i'm just going to call it launch date put space in and then finally mission name cool so let's just reiterate what we did we removed our weather class because we're now making use of our launch detail um we just changed some markup up here and we just renamed some of our stuff here didn't we didn't need to rename it but i think it makes more sense that we did and yes we basically have an array of launch dtos but this really down here and again we didn't really have to change too much we just changed the type that's been returned and the only thing we really changed was the end point that's it's that simple so that should all work now so if i do ctrl s and do a dot net run to run it up we should now by clicking on our fetch data button we should be calling our rest api and pulling that data back so let's pull this up and go over to localhost that wasn't even anywhere close was it host 5000. and if we click on fetch data holding our breath we have success a bit of a slow response but nonetheless it's pulled back all our launch data with the id whether it's tentative or not launch date and mission name and i've spelt the mission name wrong not spelt it wrong put the wrong capitalization and so i'm going to change that well that's a very small error so you might be going well that's great you've been at the end of the video we've pulled back data using blazer using a rest api and yeah i mean if you're happy with that that's cool but i think there's a lot of other things we can do here to make this much much better we can optimize this in a number of different ways so we'll move on and we'll do that next right so the optimizations i'm talking about really are around splitting out our concerns and we've already kind of started to do that so if we come back over to our project what i mean by that is we've already moved our launch dto into a separate part of an application it's not in this component code here so we have our fetch data razer component we don't have that class and here we're bringing it in using you know a using statement which i think is cleaner and as our application grows we might have you know 5 10 20 dtos so rather than having them mixed in your components in fact two components might require the use of the same dto it definitely makes sense to split it out and have them in a central location rather than having them stitched into your components so definitely makes sense especially for shared stuff like dtos and as we move on we're actually going to make use of something calling data services um which again it's a similar concept we're going to reuse shared components really so our details could be shared amongst a problem could be shown amongst components as could other things but for now we're not quite there yet but what i want to do is move this code out into a separate file so that all we're left with in our razer component is predominantly markup okay so just all this stuff here predominantly user interface type stuff there is a little bit of code in here but for the most part we're going to keep our dot raiser files as just user interface stuff so it's quite straightforward we come over to our pages folder and right click and do a new file and we call it fetch data but give it a different extension we give it a cs extension because it's just a c sharp class and so you can see we've got a fetchdata.razer file and our fetchdata.cs file and they are basically two sides of the same coin so i'm going to declare or define our fetch data cs as a partial class so compile time these two things actually come together and they are the one thing so namespace first laser api client pages and then it's just a public partial class called fetch data okay and all i'm then going to do is come over here and i'm just cutting out selecting this stuff and doing an x to cut it and i'm going to drop it in here i'll do an alt shift and f to format let me just come back here and just delete that and we're going to save that file fantastic and then come over here and i'm just going to bring in the relevant name spaces for each of these things so we don't get these red squiggly lines all right fantastic so once that's all done that should now work to be honest with you and you can see here that we're referencing this launches you know array of what do we call them launch details so we've got an array of launch details here and it's quite happy because it knows that it can find it in here in this part of the class and the one thing i don't like though and we'll fix it up in a second but i just want to make sure this works is this inject statement in this razor file i don't feel it should sit in here i feel it should sit over here but we'll deal with that in a second we can take this out because it's not needed in this file and we can save that off so let's run up and all should still work fine indeed it does working okay that's good so uh kill the server take this down and i said the only thing i want to do is take this out of here i don't feel it should sit in there so let's save that and what will happen straight away we get an error over here why do we get an error because it doesn't know what this is now this is not being declared anywhere defined anywhere so what we'll do is we'll declare it as a private property and it's going to be a http client and this is probably going to um that's okay and we'll call it http and make that get and there we go it doesn't know what http client is we need to bring in that namespace system.net http and that stops complaining as does that but this still won't work actually and if you can guess why give yourself a gold star but i'm going to run it and show you why it won't work just yet so let's run up okay it's compiled okay but if we refresh it we're going to get an error so f12 to look at our developer tools and you can see here we don't actually have a value for what http is it's not been instantiated or anything like that so we've not quite finished here and it's quite an easy thing to do all we need to do and bear in mind if you come back to our program class we did add a http client to our services collection but we haven't really injected it into our fetch data partial class just by declaring a private property that's not good enough so what we need to do is inject decorate our property with this inject keyword we need to bring in the namespace and what we're seeing is okay dependency injection container inject a http client instance into here and that will then mean that this is not null and this should now work so let's just save that off and we'll run it up again kill it re-run it and yeah it's all running so here's my edge instance gone it's refresh and it's looking much better you're not getting error and there we go the data's come back so all's well and good now so basically we've split out our code from our markup and that's how we're going to move going forward now what i don't like about this is the fact that we are hard coding our endpoints in code which you should almost certainly not ever do so just before we move on to the final phase of this i want to add in an app settings json file where we're going to put in our end points as configuration rather than code so we'll do that next okay so to add an app settings json file to our project it's actually very straightforward so just minimize our pages folder and we add it into here into our other static files in wwe root now just a quick side step this weather json we no longer need it so i'm just going to take it out it's making no difference if we leave it there but i just don't like having stuff that we don't need lying around let's take that out and then to add an app settings json file just right click folder as usual new file and then app settings.json now that'll work but because this is really running in our development environment i want to make one specifically for development now you need to name it exactly like this because this is just one of the standard.net configuration sources so app settings or lowercase dot development the capital d dot json if you want to just use app settings.json that's fine as well both will work equally as good now just a json file i'm sure you've seen these before and you just provide like a key so i'm going to call this api base url and then into here this is where i'm going to configure a base url for our api so we come back over here and look at our apis that we've got we've got our graphql and rest apis so the base url is really this bit here take out you know this bit here api.spacex.land and then the rest of it is specific to either rest or graphql and in rest case you're going to have multiple routes to rockets and launches and all that stuff graphql you just have graphql so i'm just going to configure to start with the base url and i'm then going to just continue to kind of hard code the route component until i'm comfortable with how it's all going to work and then i might add that into the configuration file as well but the real point of this is really just to show you where you do it and how you do it okay so that's our base url that is in config now and we can swap that out via config without having to adapt our code so let's save that and then to use that or make use of that the way i'm going to do is come over to a program class and this is where we set up our http client using dependency injection and you maybe didn't see if i do control b to close that down one of the things that is passed in by default is this base address and they're just providing this hosting environment base address which i don't want to use i now want to use our configured base address so the way you do that is making use of the builder object dot configuration and then using square brackets and some double quotes you specify the well the configuration element that you want so control b just to open this back up and it's this here okay provide that in to here like so like so all right so we're just setting the base address for any time this http client is used now you may or may not want that you know but in this instance that's what i do want so that's cool so it's our base address set via configuration and then all that we need to do is come back over to fetch data cs and over here all we need to do is take out this here we don't need to provide that it's the base url and then all we need to provide is the subsequent routes to the endpoints that we want now you could move these into config as well if you want and i might do that later but for now i'm just going to keep the video moving and just use the base url and still provide the route in code but that's probably not what you want to do going forward but i want to keep moving um because that would then become a bit more complex and so on and so forth so i just want to show you how you generally set up a configuration so that should all work now again we'll get exactly the same result as before this time we're passing in our uri defining it as a base url and yeah making a request or apis before so let's just request refresh this and holding my breath here there we go data comes back so all good and then we could obviously go in and change that config file to another base uri as as we as we needed so yeah that's that's basically app settings json done so before we move on to the final section i just wanted to have a bit of a conversation around what we've just talked about there the http client and something called http client factory because we're going to be making use of that for the rest of the video so let's let's take a look at that now okay so these are the last two slides of this video you'll be devastated to hear and i really just want to do a bit of recap on http client and then talk a bit about something called http client factory but before i even do that one thing i want to make really clear up front is that we are always going to be using http client http client factory is really just another way of creating them okay that's all fundamentally though http client is at the heart of everything we do so what is it it's the recommended class microsoft's recommended class for sending and receiving http requests and responses now this is really the crux of the conversation it's intended just to be instantiated once within your app and used throughout your app okay that's how it's supposed to be used but often it's not used like that and so people will often create multiple instances and even when they think they're being shut down or destroyed correctly they often aren't and what that means is you end up with this as you can see on the screen this socket exhaustion problem sockets connections are being left open even when you think you're tearing down your http client instances correctly that's not always happening so just stick a pin in that for the moment that's an issue with http client or can be another thing to note and this is really just an fyi as i've mentioned that the start http client is the recommended api if you want to call it that that you use to make requests and that remains absolutely true and continues to remain true for this video as well there are other ap lower level if you want to call them at lower level apis or lower level classes you can make use of to make http requests such as http web request which i have used in previous videos but you're not really supposed to use them you're really supposed to use this higher order class or api http client and that is again microsoft's recommendation so that's what we are going to be going with as well but there are alternatives that you probably shouldn't be using now okay so moving on to http client factory yes it's really was introduced fairly fairly recently to address this improper use of http client where you're creating multiple instances and not necessarily tearing them down correctly so that includes even creating a http client within a using statement you might expect that once that using statement executes that the instance of http client will be destroyed appropriately and have all the connections closed off that doesn't always happen leading to this problem so again yes it was introduced basically to help manage the creation of http clients we're still using http client or just man using this factory to help manage their creation and the underlying connections so yes in short it manages these underlying http message handlers for you you don't have to really worry about them so we're going to pivot and use this now in our application fantastic so what we're going to do moving forward we're going to create a new component for dedicated to launches although we've already kind of got that we're going to create a new component to kind of follow this model and then we'll yeah we'll take it from there so we'll create a new component and then yes we'll start introducing data services and stuff like that but let's let's move on to our next component all right so we're going to come back over to our project and create our next component which is going to be dedicated to launches so it's going to be initially it's going to look very very similar to what we already have but bear with me it will become different as we move through the example so back in our project we're going to create a component and as usual as you've seen before two pages one razor page one c sharp er partial class so let's do that now so i'm just going to call it launches uh razor so this is the obviously the razer file that's going to contain our markup predominantly and then i'm going to create another one for a partial class which yes there we go and so within launch of cs we'll just put in the namespace blazer api client pages and then it's just a public partial class called launches and we'll leave it there for the moment but we'll come back in a second and then over in our razor component we want to put in the page directive which is really the the route to this component launches and just while i remember i'm sure you already remember this but the name of both of our files should be exactly the same with the exception of the extension obviously and as per net naming conventions the cat the first letter of the class should be capitalized the page directive route doesn't need to be capitalized though and then i'm just going to create some very simple markup so just a heading and we'll just say space x launches okay now i do also want the table of data that we had in our fetch data razor component and i'm actually just going to copy that in because it's a bit be a bit laborious to watch me typing all of this and you've already seen it and seen what it does let's just copy that over into launches razer and there we go now we should probably get some errors because it won't know what launches is okay it's not aware of what that is so we're going to put that into our back end code so we'll just declare it private it's a launch dto array called launches there we go so it's exactly the same actually it's what we've already got in our previous components we'll just bring in that namespace and save that off and that all looks good now now obviously it won't actually work we'll just see this loading because we've not actually got the data from anywhere but that's okay we'll come back and we'll tidy that up and then the only other thing i want to do is create a button for this new component on our menu so back over in shared in nav menu razer you'll remember we had our list items here so the last one we did was a base64 component which was our previous component that we wrote so i'm just going to copy that and paste that in and then i'm just going to update the href which is really just the page reference so launches and the icon i'm going to i'm going to use the eject the eject icon which you know old video recorders and even dvd players it's like a little arrow i think that kind of looks a bit like a launch um sort of and we'll just give it a label it launches fantastic and that should be us basically and so that's the same pattern if you're using this project layout create your components two files you can maybe just create one file if you don't want to split it but i recommend you do and then coming into the nav menu and creating a button to it so let's take a look and see if that looks okay so net run and it shouldn't do too much we're getting a warning because basically this isn't being used anywhere but that's okay we'll it will eventually so we will tidy that up so let's refresh and we do we've got launches now and if you click on that it's just going to stay on the loading because it's not doing anything really but that's cool so there's our new component for launches fantastic so what we're going to do next now is talk about data services and what they are and how we use them and we're also going to look at a client factory and how that gets used as well so let's move on to that okay so i'm just going to minimize this and come back into our project close that down so yeah data services is what we're moving on to next and what is the data service well as the name would suggest it's a service that allows us to retrieve data and it really is an abstraction okay so data might come from an api data might come from a database might come from anywhere as a consumer of that data do we really care where it comes from i want launch data do i care if it comes from a database or do i care that it comes from an api do i care that it comes from a rest api as opposed to a graphql api maybe i do right maybe the answer is yes i do care but maybe i don't okay all i'm interested in is the data so what data services in this context i tend to do is really say to the consumer pick the person who wants that data here this is the data we can give you and i'll take care of the implementation of how we get that data now in this case we are both the consumer of that data and also the creator of the data service but conceivably they could be very different parties and so as a consumer yeah i might not be that interested so that's fundamentally what a data service is and in this case we're going to create a data service for spacex and you might then have another data service for another business domain like nasa or the european space agency i mean you could create data services around technology possibly but i probably wouldn't do that so i think it makes more sense to have a data service for a given domain so in our case spacex so let's get started with doing that so in our project right click i'm going to create a folder to contain our data services and then the first thing i'm going to do is create an interface now i'll go over what interfaces once i've typed this out so i spacex data service dot cs so yes an interface basically tells the consumer the person who wants to get the data these are the things we can give you that's it it just specifies the thought doesn't specify the how it doesn't deal with implementation it just deals with what we can do for you and it really forms part of a contract and the idea is that as a consumer all i'm interested in really is the interface what can you give me and how you decide to give me that don't care as long as it's the right thing so that's it'll become more obvious if you've not worked with this pattern before it will become more obvious as we move through the example but let's just put the namespace in for the moment and it's blazer api client and it's in data services fantastic and then it's just a public interface called i space x data service and all we list in our interface are the method signatures of the types of things that we can provide so we're going to be making use of a lot of asynchronous commands so in that respect we need to return a task of what a task of launches a launch details or an array of launch details which should look quite similar i can get my typing working correctly and then what's the name of the the method get all launches we're not passing anything in so no space get all launches now yeah we're returning this method is going to return yeah just an array of launch details and the reason we're using a task is because we're going to be using this synchronous programming model it's really returning a task that allows us to await the method to actually return that's a little bit outside today's topic but you don't we don't really need to cover cover it too much here so following along just basically go with the flow i didn't want to do that i want to bring in the namespace that rather keeps our code a bit cleaner and then we need to bring in launch dto as well okay and that's it okay so i'm going to come along and i want to use this data service and i can look in it and go okay it's going to get me all the launch data don't care how they do it that's what it's going to do but somewhere along the line we actually need to implement it okay and that's where the concrete class comes in so if we go into data services we're going to implement it now i'm going to create an implementation for rest first and the idea is i'll create a rest implementation we'll get that all up and running and then we can then switch out for graphql and it means that we can switch out without affecting the consumer of the interface as far as that person's concerned which is as well we don't need to change anything in the front because as long as the concrete implementation is adherent to the interface it doesn't matter so it's a really nice pattern so again didn't make sense bear with us it should do all right so we're going to create a rest spacex data service so this is our implementational detail and it's a class so put the namespace in first namespace blazer api client data services is now there great and it's a public class called rest spacex data service now in order for us to say that we are implementing this interface we use this colon syntax and then we give the class the name of the interface that we are wanting to implement now we'll error straight away because basically what this is saying is this class that we're developing is supposed to implement the methods that we've listed in here and it's not doing that yet so what we can do click in there control and period and click implement interface now it doesn't actually implement anything it just puts in this kind of boilerplate placeholder code with a an exception that will get thrown but it's good enough for the compiler not to kind of give us some warnings or even errors at this point in time we don't know if we ran it obviously we throw an exception but at this point in time it's not so what we need to do next really is fill out this implementational detail and to use our rest api fantastic so let's just save that off now before we do that i want to now practice for a second imagine in your mind that we have actually done lots of magical implementational detail and that's actually connecting to rest api and pulling it back what we need to do is actually register this data service with our dependency injection container in our program class in a very similar way that we registered our http client and we're going to register it in such a way that we make use of the http client factory now again you might be going i'm not quite following this that's okay bear with me but before we move on to that what we do need to do is actually include another package in our project file because to use http client factory we need to bring in this additional package so let's do that first before we do anything else so controlling uh back quote clear the screen i'm going to do a dot net add package it's microsoft [Applause] extensions http i think that's right we'll find out if it's not okay cool so it's added on your package referencing and that will allow us to make use of http client factory that's good so clear the screen and we'll get rid of this and we can get rid of that now make sure that's saved it's saved by default but just make sure that has saved off now we want to come over to our program class and we can actually do everything that we need to do to register our data service even though we've not implemented it we can tell the dependency injection system all about it at this point in time and then we'll finish off by actually implementing our rest service so i'm just going to do a control b to get rid of the directory window so we get a bit more room and then under under our existing registration for our old approach we're going to now make use of http client factory so very similar actually builder services so we're still adding to our services collection but this time we're going to add a http client and this is really the http client factory in action we're using http client factory now to create our data service and then you'll actually see how we make use of a http client from within that but this is the magic that's happening at this point in time and what we need to tell the factory is what interface and what concrete class are being used so our interface is i what did we call it spacex data service and the concrete implementation in this case is rest spacex data service i think that's correct let me see using there we go using data services i think that should resolve both of them maybe this one was typed wrong let me just check what was called race rest spacex data service uh rest spacex data service um we did put it in the right namespace so it should be right just copy this there's maybe a typo here somewhere i'll do a control b together than that missing an i for my rubbish typing again put that in and that should be okay fantastic okay and similarly to what we did up here we can actually specify a base address which i am going to do because irrespective of whether we're using rest or whether we're using graphql the base address will remain the same so just to keep it a bit simple i'm going to take a new line and you do this via a lambda expression so i'm going to say spacex ds data service goes to spacex data service and we should have base address there there we go equals new uri and then we just specify the base address and i'm actually just going to copy the code that we have out here just to get our base address from config you remember we did that in a previous section and i'm just going to paste that in here and i think uri requires no that's all good i'm using up there so basically let's just recap what we did there so we're going to be using http client factory to register our data service and you'll see how http client comes into play in a second but we're using that to register with our dependency injection container our interface so we're going to request our interface when when we come to using it and we will get given a implementation using rest which we've not yet built and then down here we're just using a lambda expression to specify the base url which in this case is the base url for spacex apis cool so that should all build i mean it won't actually do anything really well it will register what we've told it to register but won't run because we've still not implemented our concrete class so we'll do that next but i just want to do a net build just to make sure we're not introduced to anything weird i think we'll still get a couple of warnings yeah the launches in our components not being used but that's okay that's just a warning okay that's fine so next we're going to finish off the implementation of our rest data service and then plug it all together and it should all work so let's do that next all right so back over in our project i'm just going to close down our terminal and we're going to come back into our data service class or rest data service class but the mouthful so what do we have left to do in here by way of implementation well we need to get an instance of http client passed in somehow and then we just need to implement our get all launches method so where does http client come from well we're going to get it through something called constructor dependency injection and so what that means is we'll write a constructor for this data service class so when it gets instantiated at that point the dependency injection system will give us an instance of whatever we ask for and in this case we're going to ask for a http client that's been created for us by our factory so back over our program class this whole registration here is basically allowing us to get hold of a http client created by the factory because we've used this add http client method all right so maybe a little bit abstract if you've not used it before but bear with me and it should become a bit more clear as we move through the example so to create a constructor type ctor and then tab and then tab tab over into our parameters section and we're going to request a http client to get passed and we'll call it http client so the point when this class our rest spacex data service class gets called constructor gets called and we get an instance of http client passed in now in order to use that we need to assign it to a variable that we can use so we're going to create private variable http client and we'll make it equal to whatever has been passed in and this does not yet exist so control period to create a private read-only field and that will get created up there and just make sure you brought in the namespace for http client if you don't have that obviously bring that in and save that off and now this here is a very common pattern that you'll see used time and time again in dot net applications so that's us got a instance of http client theoretically or in actuality and so all we need to do now is use it within our get launches method so if we come back over to our fetch data component we're going to do something fairly similar in fact we're going to do something exactly the same pretty much as this here so let's just copy that in fact and we'll bring it back over into rest spacex data service and we're just going to return this okay so we're going to await on our http client so we just need to change this to underscore http client and we need to as this is an awaiting statement we need to make sure that this is async and that should hopefully resolve that error and then launch details we have details what we're getting an error on is this extension method get from json async so we need to bring in another namespace using system.net http json and that will bring that in for us and that should be good now the reason again it's exactly the same as what we already had we already have our base url configured at the point when we registered everything in dependency injection we created that here so all we need to pass over is the the remainder of the path or the route to our endpoint fantastic so that's our data service uh implementation completed so really all we need to do now is use it from within our new component our launches component so we'll do that next all right so yeah all we want to do now is in our launches component our new launches component we want to basically make use of our data service and again if we pop back to fetch data we're going to do something fairly similar to what you're seeing here as opposed to injecting a http client we're going to be injecting our data service and other than that it's pretty much exactly the same so let me just copy this protected override async uninitialized method i'm going to put that into our launches partial class as well and we'll just close that off and yeah it's just saying we don't have any um a weight weight operators on there that's fair enough so what we want to do first of all is rather than injecting a http client we're going to inject a data service so back over here we're going to use the inject parameter to inject a i spacex data service component and we're just going to call that spacex data service and we're making it to get that set fantastic okay so it's being injected in exactly the same way as our http client has been injected we're just injecting our data service now because again keep laboring this point if you know about the dependency injection my apologies but for those of you who maybe don't again because we registered here and we're saying if anybody asks for this interface give them this concrete give them this concrete implementation so back over here we're asking for this and we're going to get a rest spacex data service injected fantastic and then all it remains to do is we just need to set launches to something so launches equals spacex data service get all launches and then we will probably get an issue here because we have to await on this and that will resolve that issue as well so that really to be honest with you is it very similar pattern but we're just using an abstracted data service and and also using a client factory to yeah get to our apis so i'm thinking that's good enough for us to run so let's just get the command line up let's do a net build and this warning should be disappeared now they'll have disappeared now indeed it is so we'll do a net run and i'll just bring up our blazer client and let me just refresh it first and so fetch data was already working so let's just check that's still working should be great and now if we click on launches this should be making use of our new data service via our http client factory and indeed it does so again we're getting pretty much exactly the same thing back but we've done it in a slightly different way using a data service and http client factory fantastic so what's really left to do there's a couple of things i want to do we want to implement graphql now and the way we've architected this now is all we need to do is create a new graphql concrete implementation of our interface class and swap out and we should get exactly the same result but using a slightly different technology so it's really showing you the benefits of using this interface pattern so we'll do that next okay so we want to start working with graphql now as opposed to rest and it's slightly it's slightly more complicated not much more but it is a bit different if nothing else so coming back over to insomnia let's take a quick look at the differences between the two let's refresh our memory so with rest number one it's a get request so it's just a uri and there's no body or anything like that it's just very simple and then the payload is json fine and the payload is basically an array of objects all right so square bracket denoting an array and it just launches straight into the number of objects we get back and if we come back to our code what we've done quite correctly is we have modeled one detail launch detail with our select few parameters and then within our code wherever uh for example here's a rest data service we've said expect an array of those dtos and we've handled it that way so we only have to model the launch object is a singular anemi in our code we specify it's an array so that's all cool that all works nicely when we move over to graphql there are a couple of notable differences so the first one is that it's a post request not a get request so we're gonna have to write our code slightly differently what we've done so far has been geared towards get requests we're gonna have to make it as a post request and we're gonna have to add a query body to that request point number one point number two concerns our data and this is what we're going to have to look at first we're still getting an array of objects and the fact that we've specified the reduced field set is irrelevant still an array of objects but we get these additional attributes here data and launches okay so we're going to have to account for that in our modeling somewhere okay we can't just use what we've already got which is just a singular launch object we're going to have to extend our dtos slightly so we have to do that first so that's really the two main things we need to do and then we'll build our graphql data service implementation and just swap it out for the one that we had been using which was a rest implementation so let's go on and do that okay so the first thing i actually want to do is just update our graphql query so that it's going to return a payload that matches our launch details if we come back over to a project yes here's our launch detail that you should be quite familiar with so i just want to return a payload that will get deserialized into this class at the moment we're bringing back some kind of random fields that we're not really going to do anything with so let me just take these ones out and keep id and we want to return is tentative we want to return mission name and we want to return launch date local i think that's right so id is tentative mission name and launch date local that's the ones we've got here yeah that's cool all right so let's just make sure that pulls back some data and it does so again just to reiterate using rest we are getting an array of launch objects that have every field that's potentially available for a launch object with graphql we're just pulling back a subset but it's effectively the same object it's just a subject here it's just got fewer fields obviously in this case and we still have an array of them and all we want to really do now is just model this data and launches attributes here so as before we're going to use some tools to generate the code for us and then we'll double check it to make sure it's correct so i'm just going to select this payload copy it and then i'm going to come over to our json online editor select go to this default payload and paste in our payload and we want to kind of model this so what i'm going to do is i'm going to keep this data object i'm going to keep this launch array and i'm going to keep first or first launch object so our tool knows how to model it and then from here onwards i'm just going to from here onwards this comma here i'm just going to get rid of all these 110 i think there's no 110 objects now the code generation tool even if we pasted all those objects and it would still be able to generate code for us but i'm just kind of doing this just so it's a bit more readable for us and as you can see here what we've got we've got this data object which then contains a launch object or launch array launches array and it just has one launch dtu effectively in there with four attributes so we'll take this now and we'll copy it and we'll copy it into our quick type tool get rid of the default payload and paste it in and just over here i've got language c sharp attributes only selected now as as before it's generated a launch class for us which we don't need we already have that that's our launch dto so we can safely ignore that and all we really want are these two classes here now the only other thing i'm going to do actually is just rename this kind of root class it's currently called welcome i'm going to call it gql data instead there we go and what this is doing let's work from the kind of ground up what we're going to expect is a data class and that data class is going to contain an array called launches and in this instance it's an array of launch objects which is this object here now we'll just need to update this to launch dto as that's what we've called our launch object and you'll remember the json property we're going to have to update that to the microsoft json library syntax not the newton's of syntax and then working a bit further up the tree we're going to have a root class we'll just call it gql data and it's going to expect a property of data which is this thing here okay so it's a bit of a hierarchical tree structure of subclasses and so on and so forth so it can get quite confusing if you're doing this yourself so i find these tools are quite useful at least initially to help you understand how to structure things so we're just going to copy these two classes so right click copy and then we'll come back over to our code and i'm going to create a new dto new file i'm just going to call it gql data dot cs give it a name space of blazer api client and it's in details and i'll paste that in now i generally don't like having multiple classes within the one file i'd usually like to split them out but as you can see here rules are meant to be broken and because these are such small classes i think it would be a bit over the top to create a class for gql data and then a class for data itself would be a bit unreadable and a bit confusing so i'm just keeping that in the one file and we're keeping our launch detail exactly as is that's not changing at all so the first thing we will change actually is this property here instead of an array of launches it's in the way of launch details which is basically array of these that's cool and we'll change the json property to json property name to adhere to the microsoft json serialization framework of course we need to bring in the namespace so control period to bring in system text json serialization that's it that's basically the dto that we need to create we don't need to change launch detail that remains the same we just need gql data with a couple of partial classes in there and that's it so all we need to then move on to is to create a data service for our graphql api and swap it out in our program class and we should be ready to go so let's do that next so back over our project we want to create a graphql implementation of our interface so on our data services folder right click a new file and we're going to call it graph ql space x data service dot cs and then provide a name space as usual laser api client data services and then yes this is an implementation class so public class we're going to give it the same name so graphql spacex data service and like with our rest implementation we are going to implement the same interface i spacex data service now error out for the month but let's just leave that for a second if we pop back over to the rest implementation you'll see that yes we implemented this interface exactly what we have to do with the graphql equivalent but we also require the injection of a http client using the constructor so we're going to do the exactly the same thing here so if you remember ctor constructor tab and then we'll tab into the parameter section you're requiring a http client called http client and then here we're going to assign it to private fields called underscore http client and this does not yet exist so control period to generate a read-only field which comes up here and then we need to bring in the namespace for http client fantastic so i'll save that off and all this continuing to error out is the fact we've not actually implemented this interface yet so let's resolve that to some degree by clicking in there and control period implement the interface and as before we just get this kind of placeholder which we need to obviously fill out with an implementation so just popping back over to insomnia and taking a look at our graphql api call we're using a post request i think i've mentioned this a few times now as opposed to a get request and we are passing over we need to pass over a query in the body looking back at our rest implementation it was really quite simple we made use of this get from json async method which not only does the get request for us but it also deserializes the json that we get back from the request so it's pretty straightforward the implementation we have to do here is a bit different and we have to do a bit more heavy lifting we don't have the luxury of using the get from jason async method for obvious reasons so no bad thing it just gets us a bit more view of what's happening under the covers so just a quick side step if you're doing a lot of graphql stuff from a client perspective you can adopt or make use of actual graphql clients so the.net world is a few available the one that springs to mind is the strawberry shake client by the same people that did the hot chocolate graphql api framework and it takes away a lot of the heavy lifting required the way i'm going to do it um so it's possibly something we'll look at later but i want to do it this way because i actually want to do the heavy lifting and i want to use just a basic http post request with a body that's the way i want to do it in this case but if you're doing this a lot you might want to look at um one of the clients that are available so a library you'll you'll make you're solving it again then again does a lot of the heavy lifting for you we're not doing that here though so yeah we're relying on http client and the features that it exposes to us so the first thing i want to implement is our query itself and i'm going to i'm going to do that is just create an object that we will later serialize and pass that over to our post request so var query object new and it's going to contain i'm going to contain two attributes one called query which is probably quite obvious and i'm just going to make that equal to an empty string at the moment but i'll come back and fix that another one called variables which will just make that equal to an empty object now you might be knowing what is or what are variables well variables are quite straightforward i think but in the context of graphql basically what they are in this instance we're not using them of course but with a lot of queries you'd be passing in a query parameter you know like an id or a name or something a string to you know filter your results on and the way you can do that in graphql is by actually providing it as a variable and you in insomnia you just create them down here as like an adjacent object and you then pass them in we're not using them here today but i'm just leaving that there as a placeholder should we choose to use them in the future but what is important is the query that we want to use so back over in insomnia i want to just basically use this query i want to put it all on one line so i'm just going to do that manually not particularly nice to watch but just make sure you don't you know do what i did there and take out all the spaces otherwise uh you're gonna end up with errors now we will run this query once i've put it all in one line just to make sure i've not done anything stupid cool so we'll just copy that out and we'll paste it into our query string here fantastic and we can just move that white space but everything else we'll leave as is so yeah basically we're creating this query object that we're now going to serialize and where are we going to serialize it well we need to use something called string content if i just bring this over here the string content class is something that we can pass over as part of our post request and it allows you just to pass over a number of different things in a number of different ways so we will probably makes more sense if we actually make use of it so let's just do that first launch query equals new string content and you can see there's a number of things that we can pass over here so we're going to pass over our serialized object which is basically the string content the encoding and then basically the media type and in this case we're going to expect application json as the media type so let's uh take a new line and do each one of these three parameters on a line so jason serializer i'll have to bring in that namespace which should become quite familiar to you now so using system text json and just make sure that's resolving so serialize whether we want to see realize we want to serialize our query object make sure i put in the t there and then the encoding so encoding and i think i need to bring in a namespace for this as well is just going to be utf-8 yep so let me just capitalize that and bring in system text and then the final thing we're going to specify is the media type and that's just going to be application json and we just need to put a semicolon there it might bring this up onto this line that looks a little bit neater the next thing we need to do is actually make the post request so the way we're going to do that is by accessing our http client and we're going to make a synchronous post so post async and what we're going to pass into that is the request uri and all we need to pass over is graphql because we already have our base uri which is the base if you actually come back over to insomnia you'll remember this this is our base uri which we have stored already so all we need to pass over in this case is graphql in the same way that over here we had to pass in rest launches and here we just need to specify graphql and then finally well finally but then we need to pass over the content which is this content string we've just created up here so we specify launch query here so this is making a post async request but we need to put that into something the first thing we need to do is a waiter obviously because it's asynchronous and we need to put that into a variable i'm just going to call response and make sure we put space there so hopefully that makes some sense now it's erroring out the reason it's erroring out is because it's saying we're not in a asynchronous method so we need to put that up here and that should resolve so again i'll just go over that again we're making a use of our http client we're using post async and into that we pass over the uri which is just the portion that is on top of the base url and we're passing over our content which is this launch query here which contains our query object and then we're just going to wait on that and put the response into this variable called response so you'll see that it is much more complex than using the get from json async command we're almost getting there though so the first thing we want to check on our response is if it was successful or not okay so do we get a http 200 or a variant thereof to 10 or something if we were getting that return so if the response is successful fantastic we're going to then do something if it's not we're just going to return null okay obviously that's not particularly wonderful we probably want to do something a bit more detailed if we were getting an error but for the moment i'm just going to return now we may return to that another point in time but i really just want to focus on if it's successful so if it's successful this is a kind of two-step process i'll do it kind of from the ground up so the first thing i want to look at on the response is the content and we basically want to read as a stream okay so we've made the request a post request it's been successful and we're now going to get the data coming back and read as a stream so once we have that response we then want to deserialize it now it's complaining here because i'm not using the await keyword so let's just do that first so we're going to wait on that so once we have that we then want to deserialize it so again we're going to use the json serializer this time we are deserializing as opposed to up here we're serializing the object we are deserializing and we want to use an asynchronous operation and what are we d serializing to we're going to d serialize to gql data or gql data dto which is over here if you remember gql data because we're getting a response in this format here as i'm sure you remember let's all wait on this too this is complaining for some reason yeah i think it's julie so basically we are deserializing to this and what we're expecting as the input we are basically just expecting this so this is where we're gonna we're gonna take this which is our stream now we're going to deserialize to this so i might just uh take in your line if it will allow me to do that that looks a bit more readable i might just tabulate that in and we'll close that off with a semicolon and we want to put that in to something a good enter variable i'm just going to call it gql data all right so let's go through that again so if we get a successful response that's just the response code http 200 for example we want to read the response which is basically our serialized json as a stream and then we then want to de-serialize that using the json serializer and we want to deserialize it to a gql data dto which is this here now that contains of course our launch dto array but we don't want to pass back the gql data dto as is because we're expecting to pass back an array of launch dtos so what we do what we return back is we access the gqldata object we've created and then we navigate through data and then launches which is basically an array of dtos as you can see there and we'll just put a semicolon and save that off now that is basically our graphql implementation so it's a lot more complicated than what we had to do with our rest implementation but nonetheless it should work and all we really need to do to test it now is to come over to our program class and we just need to simply swap this out for our graphql implementation i don't think that uh okay so graphql spacex data cells and that's it it should work fingers crossed so we come back back to our terminal we'll do a net build nowhere else that looks good and we'll do a net run to run it up and we'll come back over to our edge instance localhost 5000 and if you click on launches we're now using our graphql implementation not a rest implementation and query is successful using graphql fantastic so basically what we've just done there is we have created a graphql implementation of an existing interface and all we needed to do in the program class was swap it out from the rest api that we'd been using and if we just come back over let me just kill this and quickly go back through what we've done just to refresh we created a query object which contained our query as a string and we've put a placeholder if we wanted to include variables at some point in the future we then made use of this string content class and we passed in our serialized object we told that it was using utf-8 encoding and then we passed over the media type which in this case is application json and then we made use of our http client specifically the post async method we told it that on top of our base uri it was graphql that we wanted to use the graphql route and we passed over our string content and we awaited on that and we put that into this response object here we checked to see if it was successful and that's just the success code assuming it is we then read the response as a stream and we then d serialize that stream and put it into a gql data dto and pass that into this object here and then we navigated through that object to get to the launches array which is what we're expecting to pass back as part of this method here so it's adhering to our interface and so with that we not only reach the end of this section but we reach the end of this entire video so another long video about three hours long a bit longer than i had intended but to cover everything that i wanted to well it's just ended up being this long so i hope if you followed along you enjoyed it and you learned something and you've ended up with something that's working hopefully in terms of next steps i think for me i would like to maybe use some different apis that would allow us to add data you know create data delete data update that kind of stuff i think that's possibly what i might do next and any other thing i would possibly do as a next step or the next video is focusing a little bit more on the http client class and look at the ways that you can use that in more detail so things like authentication the types of headers you really should be adding to it when you're making requests and stuff like that which we kind of didn't touch on too fully on in this video and of course there's some things with what we've done already that you could definitely tighten up such as error handling and also possibly revisiting what we did with the configuration in app settings development json we just added the base url so there's possibly some stuff you could do around there anyway that's it for this video thank you again for watching if you haven't done so already maybe think about subscribing to the channel and if you liked the video please give it a like other than that thank you again for watching and for my very loyal patreon supporters big thank you to you as well and your names are coming up next but until i make my next video stay safe and i'll see you very soon [Music] [Music] so [Music] so [Music] so [Music] [Music] [Applause] [Music] so [Music] so [Music] [Music] [Applause] [Music] foreign

Channel: Les Jackson

Views: 45,709

Rating: 4.9876924 out of 5

Keywords: .net, .net core, blazor, wasm, webassembly, graphql, rest, api, httpclient, httpclientfactory, les jackson, step by step, tutorial

Id: agIJTnpfFGA

Length: 181min 49sec (10909 seconds)

Published: Fri Apr 30 2021