GraphQL Client Tutorial With Fetch

Key Takeaways

hello everyone in today's video I'm gonna show you how you can query any graph QL API that you want by using just the tools built into JavaScript we're not going to be using any libraries at all and it's incredibly easy to do so without any further ado let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start creating your dream project sooner so that sounds interesting to you make sure you subscribe to the channel for more videos just like this one and now to get started on this video you can see that as always we have Visual Studio code open to a blank project on the left and on the right I actually have the graphic you'll playground for the API that we're going to be using it's at country's Everglades calm I'll leave a link in the description below for you but essentially what this craft kill API does is if we open up the docs you can see that we access the continents and we can access countries as well as languages and what our application is going to do is it's going to query the continents list and it's going to give us a select box with every single one of the continents from this list and then whenever a user selects a continent in that select box it's going to get all of the countries for that specific continent and just to give you a little bit of an example of how this works we can just do a query here and we want to query the continents so we can say continents and we want to get back the name as well as the code and if we just hit play you can see we get back all the different continents as well as their specific unique code and if you're not very familiar with graph QL or how graph QL works on the back end I have an entire video covering graph QL in depth in nodejs which I'm going to link in the cards in the description down below for you to check out now that we understand how this API works let's come over to Visual Studio code create our basic index.html and if we just hit exclamation point and enter it's going to generate all of the boilerplate HTML code that we need for our application now inside of here what we can do is we want to create our select box which is going to be our continent select so we can just say continent select and then inside of here is where we're going to put all of our options by default want to have a placeholder option which is just going to be selected by default oops make sure it's just option so we want that to be selected and we want it to be hidden just so that the user can't actually select this inside of the select box it'll only show as the default value and we want this judge to say select a continent and then lastly right below all of this all we want to do is add in a div and this div is just going to be for our countries list so we can give it an ID which is just going to say countries list and we can close that off and we can just leave it completely empty we're gonna put the countries in there now if we save this and if we right click we can click open with live server if you have that extension installed in Visual Studio code and you can see it says select a continent and of course there's nothing in the list if we remove this hidden property you can see that it'll be in the list but if we add that that means that the user cannot select that so our list right now is empty which is okay because we need JavaScript to populate this by calling the API right here so let's include a script which we just want to have here with a source of script a s this is gonna be the JavaScript file we make and we're just gonna defer this so it loads after our HTML section loads and we can create that script J s now now Before we jump into populating that select box that we have over here we just want to test actually query the graphical API and in order to do that we're going to be using fetch which is built into the browser and it allows us to make API requests and calls and we just want to pass it this URL country's trevor blades comm this is going to be the URL portion of our fetch so it's just put that in there like this and then the next thing we need to pass our fetch is going to be a bunch of options which is going to be how we're going to customize it so first we want to save a method which is going to be post this is going to be a post request because we're trying to post to this graph QL API next we need to put our headers because we're going to be getting JSON back as you can see this is JSON over here so we need to make sure that we set our headers for our content type whoops so we got content if I can spell it properly content type just like that we want to set this to application sliced JSON there we go and that's essentially telling us what we're getting back from the API is going to be JSON information and then lastly here we need to put the body of our application and this is going to be JSON but we need to make sure we convert it to a string to be used with fetch so we'll say JSON dot stringify and inside of here we're gonna pass an object and this object is only going to have one property which is query and this is going to be this query right here and we can't actually pass this as an object because this is valid JavaScript it's not an actual object but what we can do is pass it as a string so if we use backtick we can put our string onto multiple lines and we can just put our query inside of here just like this and we can always just copy this query straight here from our graphical and paste it into our fetch and this is going to work this is going to query the API and give us back these Chaisson results so to test that we can just put dot then in here then this is going to give us back a response but this response needs to first be converted from JSON to an actual JavaScript object so we just say JSON and then we can do another dot then let's put these on the same line and this dot line then is going to have our actual data response so we can just say data and then inside of here we have our data property here so we can say console dot log data data and that should be all of these continents here let's save that make sure we save our HTML page and let's actually inspect our page and see if that worked there we go and if we go over at our console you can see we have an object which has our continents inside of it and a list of all of our continents so we know that this worked and if we remove code for example and we save this and we check our continents array you'll see that they no longer have the code so we know we're directly calling this API and whatever we pass it we're getting back as results and if we wanted to go a step further we could say here continents oops continents and there we go we have just the list of our continents being returned so now what we need to do is actually add these as options to our select so let's first get our select we can do that by just coming up here creating a variable which we'll call continent or continent select we're going to set that equal to document dot get element by ID and if you remember we put an ID of continent select on here so we're just going to get that element by that ID and now this is our actual continent selector which we can see right here on the side now inside of this dot then instead of actually logging out our continents let's loop through each one of them so we can say continents dot for each and we want to do this for each continent there we go and for each continent we first want to create an option so we can just say Const option it's going to be equal to document dot create element we're just creating an option element and then we need to set the properties on this we first need to set the value which in our case is going to be equal to the code of the continent so we can just say here continent code this is the value so when we select that option that'll be essentially the ID of our option and the next thing we want to do is we want to set the inner text so we can set that here toward continent dot name now we need to add this option to our select so we can get our continent select and we just want to make sure we append this to our option here so we put our option inside of our continent select and now if we save that close out of this you can see that all of our different options for our continents are inside of our select we can select one you can change it to a different one it really doesn't matter but now the next thing to do is to actually get the countries for whichever continent we select because right now this select does nothing and if we go back to our API here let me just expand this out there's another query we can do inside the docs we can query for an individual continent and this just takes the code so what we want to do is we want to query for a continent and we pass it in a code as you can see we have AF for Africa so let's just put in AF and we want to get back the countries so we can say here then we want to get back countries and for each country we just want to get their name for example so now let's run that and you can see we get every single country inside of Africa and this will be the query that we want to run when we actually do our code inside of our application for when we select one of these continents but something that you can do in graph QL is actually pass in variables other than hard coding it because right now this AF is hard-coded into our query we can do what's called passing a variable so we can create a function called the get countries we can say that it takes a variable called code we can call this whatever we want it doesn't matter and we can say that this is going to be a string so now we know that we have a variable code which we can use right here inside of our query and then down here we can pass query variables this is just going to be a JavaScript object so we can say we're gonna pass it a code and this code is AF now if we've run this you can see we get the exact same results over here and what this is doing is it's creating this function for us it's saying it's going to take a code variable which we created down here and it's going to pass it into the continent so we're actually going to create this exact query inside of our JavaScript in order to run it but before we do that I want to clean our code up over here just a little bit because we know we're gonna be calling this fetch query multiple times and the only thing that's going to be different is our queries section so we don't want to have to copy and paste all this code so we'll just create a function to do it we're just gonna call it query fetch and it's going to take in a query of whatever we're going to be passing that query is going to be this section right here so let's copy this code into the function for now let's make sure that we return our results so we can actually use these inside of our function and what we want to do is this query we're going to pass in here as our query property for our json stringify we also know that it's always going to be json so we can copy this dot venn which converts our object to json and now if we remove all of this code we can just call that function we just created which is query fetch and all we want to do is pass it this query right here that we just created close it off and then we can put our dot then back up here and if we save and check over here you can see our list is still loading this will allow us to call this same function for our second query which is this query to get all of our different countries and we won't have to copy all this code every single time so now that we have that helper function created for us we can actually set up a selector for our change event so we can say continent to select dot add event listener and we want to listen for a change essentially this will be called every single time that we change our selector inside of here whenever we select a consonant this function is going to be called and it's going to take an event argument for what is actually being called and we can get the value is selected by just calling here e target dot value this is going to be the value of whatever we select inside of here so let's set that equal to whoops our constant is going to be called country or I'm sorry continent code and we're just going to set that equal to this value this is essentially the code that we set here on our option dot value so if we select Africa as we know if this is going to be AF as the code inside this value now with that out of the way let's create another variable which is going to be for our countries and we're actually going to create a new function to get these countries and this function here is just going to be called the get continent countries and it's going to take in our country our continent code just like that and this is where we're going to call our query to get our fetch so we can just come in here say query fetch and we know that we need to pass it in the query that we used over here so let's expand this out so we can see this copy this entire query inside of our fetch here and make sure it's indented properly and as you can see we're now getting all of our countries but we need to pass it there's a variable of code and the way that this works is we can just pass in another property to our body which is called variables and we can just create a variable here to hold those and we can actually pass that in to our query fetch oops just like this so now we can actually pass in a second property of variables to our query fetch so let's just do that now we know that it's just going to be an object and we know that the first thing is going to be our code so we can say that we have a code and we want to do with our code is we actually want to pass in whatever code is selected in our cases continent code just like that and now this query fetch is going to be making this exact query over here we can even test this by just saying dot then and what we want to do this is going to be our data and inside of here we can just do a simple console dot log of our data and now let's just call this over here and we're gonna pass in our continent code just like that and since this is going to be a asynchronous function because we have dot then going on what we're gonna do is we're going to make this an asynchronous function and we're just going to await the results of this and right now this actually isn't returning to us the country's but it is going to be logging out this information we just want to make sure we return this for now and if we save that come over here make sure we inspect our page go to the console and as soon as we click on one of these for example Africa we're going to be getting a list here with our continent and instead of that continent we have all of our different countries so we know that we want to get our data data continent countries and this is going to be our actual countries so let's just return this from our dot ven here and now what we can do is say console log of our countries and if we save that select Africa we just have an array here with all of our different countries by name the next thing that we need to do is we can just close out of this and we want to actually populate our list down here with all these different countries we don't want to just log them so the first thing we need to do is get a variable which we're just going to call our country list and of course we can just get an element by ID and if we remember we passed to this countries list ID so let's copy that into here just like that make sure the T's on the end and now we can use this country list inside this function the first thing I want to do is just set the innerhtml to an empty string essentially if we have countries in the list I want to completely remove them so we can add the new countries to the list now we can loop over all of our countries so just say for each country and what we want to do for each one of these countries is create a new div for them so we can come in here and create an element whoops element which is going to be equal to document dot create element and we just want to create a simple div and then for that element we want to set the inner text and we want to set that equal whoops equal to our country dot name and then we want to add this to our country list so we can say country list dot append of our element and now if we select Africa you can see we get all the different countries in Africa we can select edit Africa we get all the countries in Antarctica and so on and this is going to work for all of our different countries and that's all it takes to consume a graph QL API if you enjoyed this video check out my other videos linked over here and subscribe to the channel for more videos just like this one then very much for watching and have a good day