What is GraphQL? A Beginner's Guide to Query Languages

[00:00:00]hey there gang and welcome to your very first graphql tutorial [Music] okay then so although I do already have a graphql course it's about five years old now and I wanted to make a fresh up-to-date one with less bloat so that anyone wanting to get up and running with graphql quickly can do here before diving into more advanced tutorials and projects using it so in this series we'll be learning what graphql is and why we'd use it and then we'll build a graphql server from scratch using node.js and the Apollo server package we'll also look at how to make queries to that server using Apollo Explorer which is a free tool for testing different kinds of queries now before you start I would already expect you to have a basic understanding of node.js because we'll be using that to make our graphql server so if you want to learn that a little bit more first of all which I highly recommend then you can check out my node.js crash course on net Ninja Pro and also on YouTube so I'm going to leave a link to that course down below the video you're also going to need a recent version of node installed on your computer which you can get from nodejs.org just click on this download button and then go through the installation steps that easy and then finally before we start I've made course files for this entire series you can get them from this repo on GitHub graphql crash course the link to that is also going to be down below the video now each lesson has its own Branch so if you want the code for a specific lesson you can head to the branch drop down and select that branch that corresponds to that lesson then to download the code just hit the green code button and download a zip folder or if you prefer you can clone the entire repo to your machine so then let's get started by talking about exactly what graphql is and why we'd want to use it so graphql is what's known as a query language which is what the ql in the name stands for query language and by query language we mean a specific syntax that we can use to query a server to request or mutate data so it's kind of like an alternative to the more traditional approach of sending standard requests to a rest API using endpoints but whereas using a rest API is more of an architectural style an approach to serve and fetching data graphql differs in that it's an actual query language with its own syntax and rules and it still uses HTTP requests under the HUD like we'd normally send to a rest API it's just that we have this nice query language sitting on top of that to give us more flexibility and control about how we make them and what data we want to fetch or mutate and also the way a graphql server handles those requests is very different to how a typical rest API would handle them as well so let's take a quick look at those differences and see why in some cases graphql has the edge so when we use a rest API we typically send HTTP requests to specific endpoints like this to interact with a certain type of data right for example we might send a get request to this endpoint to fetch a list of Pokemon and we could also send a post request to that endpoint to add a new Pokemon to the data set we might send a get request to an endpoint like this with an ID on the end of it to fetch a single Pokemon with the ID and we might also send a delete or put request to this endpoint to delete the data or update it and the server would handle requests to those endpoints by connecting to a database probably where the data was stored and either fetching the data and sending it back to the client the browser or updating or deleting the data from the database instead so this is your traditional rest API and for the most part it's really effective and a good way to expose data to clients but there are sometimes some drawbacks when it comes to using a rest API when your application scales and your data gets a little bit more complex now the first drawback is something called over fetching Nova fetching is when we request some data from an end point and the server sends back too much data so much more data than we actually need for example I might have an endpoint which is forward slash courses and that gets all the courses so that request goes to the server the server gets the courses from the database and sends the whole list of them back to us in Json format now each course object might have a ton of different properties like an ID the title the author property which contains author name and the author ID Maybe the price a thumbnail URL a description a video URL and so forth and it might actually be that in this case we only need the ID the title and the thumbnail for each one because that's all we're going to be showing on this particular page and so the rest of this data for each course is pretty much Obsolete and we don't need it for anything which means that we've over fetched what we do need so that's the first drawback all for fetching the second drawback is the polar opposite under fetching and under fetching is when we don't get back all the data that we need from a single request and it could lead to making multiple requests to different endpoints to collate everything that we need together for example we might send a get request for a single course the server handles that request by getting the course from a database and sending it back in Json format and it might look something like this with an ID title thumbnail URL description the author property which contains the author name and the author ID price a video URL Etc and in this case we need all of those things that's great so we show all of those on our course page on our website but we also want to show additional stuff on the page about the author of that course as well for example the other course is that this author has made and information about those courses such as the title the thumbnail the ID the price and so forth and we don't have all of that deeply nested data here in the course object that we got back so we've actually under fetched what we need in that single request and that could mean we now need to make additional requests to the server to different endpoints to get back that additional data so these are two potential drawbacks of using a rest API when your data layer gets a little bit more complex and these are two things that can easily be solved by using graphql instead so now let's look at how graphql works and how it combats both over fetching and under fetching so first of all when we send a request using graphql to a server we typically do that to a single endpoint which might be forward slash graphql and this is totally different to when we used a rest API where each resource typically has its own set of endpoints for get post delete and put requests Etc so whenever we send a query using graphql to the server it's always going to be sent to probably that single end point and then the server can handle it now the way that we send a query to the server is by using a special graphql syntax that looks something like this and we're going to talk more about this syntax later on in the course but essentially this syntax allows us to specify exactly what data and what fields we need back from the server so in the example from before if we want maybe the call courses data then we can send a query that looks something like this so we'd specify that we want the courses resource and for each course we can also specify which properties we want back as well so in this case that would be the ID the title and the thumbnail URL so it's send that query and the server would respond with a Json array of courses where each one of those courses would only have those properties that we need so there's absolutely no fetching going on there whatsoever which is really good the other thing graphql allows us to do is fetch nested related data within a single query so again for the example before where we needed a single course we'd send a query like this one and specify whatever properties we need from that course but we also said that we wanted extra information about the author of that course along with any related data or any related courses rather that author made and we can do that in graphql by nesting those properties inside the query so I can say get the author Name ID and then also get the courses of the author where for each course I want to get like the ID the title and the thumbnail URL and all this is done in a single request or query so we're no longer under fetching the data that we need which is really cool and this right here is one of the really good things about using graphql the ability to Nest any related data we need into a single query instead of making multiple queries as you might do when you're using a rest API so that's the basics of why graphql might be beneficial to you and your application especially as like I said before you scale up the app and the data layer becomes a bit more complex now at the moment you've only seen how to retrieve data here and we'll look at this more closely later on but you can also perform something called mutations to do things like ask the graphql server to add new data or update it or delete it much in the same way a post request might ask a rest API to add new data or a delete request would ask the server to delete some data so we're going to talk much more about that later on in the course as well so in this course then we'll be making a graphql server from scratch using node.js and a package called Apollo server and that server is going to be responsible for handling all the queries and mutations that we send to it now to send the queries we'll be using Apollo Explorer which is a graphql client that we can run in the browser you can kind of think of this as a bit like Postman but it's the graphql equivalent and postman by the way is a free tool to test out rest apis so you're going to learn how to set up a graphql server and also how to make queries and mutations from the front end using this kind of graphql syntax so my friends that's the introduction out of the way now in the next lesson we're going to go over the basic syntax of making queries by the way if you want to watch this entire course now without YouTube adverts you can do it's all up on the net ninja website netninja.dev you can buy the course for two dollars to get instant access to all of it or you can sign up to net into Pro and get instant access to all of my courses without adverts as well as premium courses not found on YouTube including my udemy ones that's nine dollars a month and you can get your first month half price when you use this promo code right here so I'm going to leave this link Down Below in the video description for you to sign up and I really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and I'm going to see you in the very next lesson