GraphQL Tutorial #1 - Introduction to GraphQL

Key Takeaways

hey ninjas and welcome to the graph QL dojo all right then so quite a few people have been asking me to do a graph QL series and my friends I am finally answering the call so in this series we're going to be going for an absolute novice to complete black belts in graph QL both on the server side using node.js and also will be getting a front and perspective on the client side using react too so ideally before you start to train yourselves in the art of graph QL and recommend that you have at least a basic grasp of node.js and possibly even a familiarity with react to now that is not essential my friends because I will walk step-by-step through everything we do in this playlist both on the server side and on the client side too but if you do find yourself scratching your head then I would recommend you check out either my node or react series the links to both of those are gonna be down builder so what exactly is graph QL anyway well basically it's a very powerful query language used to communicate data between a client the browser and a server and it allows us to structure data-driven applications in a much more flexible and efficient way than a restful approach would so imagine that we created some kind of restful api for a website which displays books and authors now to retrieve information about a particular book and display that information on a web page we would probably make an AJAX request to an endpoint which looks something like this forward slash books then forward slash the ID and whatever the book we want to retrieve is now this would bring back some information presumably about that book such as the title genre reviews and the author ID so we could display that information on the page but then if we wanted to display author information about this book as well then typically what we do is grab this author ID and then make another request to a different end points such as forward slash author x' /id to get information about that author such as the name the age biography and a list of book IDs and they correspond to the different books that this author has written okay so already we've made two requests from this page to show book information and author information so this is already getting a little bit inefficient then imagine we also want to display information about each or the book that this author has written now we've already got a list of book IDs right here so what we could do I guess is make subsequent requests to this end point right here for each different book now at this point we could be making three four five or more requests to this end point just to get information about each different book so this is when the chinks in the armor of restful design starts to show now I want you to contrast this to a graphic you our query for the same information which looks something like this so here we have a graph QL query this is what they look like and what we're doing is asking for a book with a particular ID one two three then we want the title genre reviews of that book as well as the author and from the author we want the name the bio and the list of books and from each book we just want the name of that book so all of this right here is just one request in graph QL and we're getting back all of that information and all of that related nested information from this one single HTTP request rather than sending four five six or several requests to get that information using restful design now this my friends is freaking awesome and is one of the many reasons that I love graph QL so much that's not all what's more if you don't want all of this information and you just want some of that information from each different thing then you can be selective as to what you want returned to you for example we could say we just want the title of the book the name of the author and the name of the books that that author has written and we don't need to block the return of this request with all these different information such as the genre the reviews the bio that we don't really want so this is another great thing about Kewell and will see all of this in action as we go along through this series alright then guys so in this series what we'll be doing is creating from scratch a graph QL server using node J s and we'll be querying that graph QL server from the front end so to do that we'll be creating a react app to run in the browser which is then going to query that graph QL server and retrieve information from it so if we click on a book over here we're gonna see information about the book the author and the different books by the author as well so this is using graticule behind the scenes to query that information from the graph QL server and retrieve it back here we can also add data by filling out this form down below so the book name the genre and the author if we click Add it's gonna pop it on the screen we could click on this and we can see information about that book and all the different books by that author as well so this is pretty cool we're adding information and we're also retrieving information from the graph QL server so in essence here what we're doing is creating a mini full stack application centered around this whole idea of graph QL with react on the front end and node on the back end now before we get started creating that I just want to make sure that you have node.js installed on your computer either of these versions will do right here and you can find it at no js' dodd the link is gonna be down below secondly i'm using a text editor called atom a lot of people always ask me which one musing it is this because it's freaking awesome and free so download that if you wish I implore you to do so I'm also going to be using a tool called CMD R or Commander I still don't know how to pronounce this but it is just a console emulator for Windows you don't have to use this you can use command line or whatever console you wish this is the one I'm using and you can find it at a commander or CMD a dotnet the link is also going to be down below now finally I am as always going to be giving you access to all of the course files in this playlist you can find them at this repo right here graph QL playlists on github I'll leave the link down below and if you want to get the hold for lesson 10 for example you need to select it from this branch drop-down go to lesson 10 and you're gonna see a lesson 10 code appear right here so there we go my friends that is your will win introduction to graph you well I really really hope you enjoy this series I've really enjoyed creating it and if you do like the videos please my friends do not forget to share subscribe and like and I'm gonna see you in the very next one