GraphQL Crash course | easy way

graphql is like the kryptonite in the batman's belt in most days it is a useless stone good for nothing but when the time comes only kryptonite can save the day this is a brief overview of graphql hey there everyone hitesh here and welcome to the crash course on graphql and for all those people who are in a super hurry there is a timestamp in the description section so that you can jump directly onto the code part but don't bother if you are not gonna listen to this whole conversation here the code part is not gonna make much sense so have patience and listen to me out first who is this video targeted for this video is not targeted if you are still struggling with for loops and functions and that's totally okay but this video is not gonna make much sense for you you can still watch it grab some of the things here but it's not gonna serve you well this video is targeted for those people who have at least seen once how the api calls are being made especially the rest api things like get request post requests delete requests if you have taken them down at least once in any web or mobile application then this video is going to make so much more sense to you graphql in a short if i want to explain is like a query language for api in our regular api calls especially the rest api calls where we do all the update delete read create all the crud stuff graphql can make a life a little bit more easier but it also comes with its cons as well so i'm gonna try to explain a little bit on detail that what are the situation where graphql can be handful for you and in what situation you should avoid it okay first let's make sure that whenever i say one request in your mind you multiply it by something a big number like 50 million or maybe 80 million and that's only when the graphql is going to make sense for example let's just say we have a web page and on the web page i have all the information about the courses maybe the course name its pricing and bunch of other information and on that same page i have some of the teaching assistant information where i put first name last name and experience and in the usual scenario you don't want to put everything in a single table in the database you would like to split that off so in the course there would be a reference to the teaching assistant and then the teaching assistant table can be accessed and you can grab maybe let's just say experience from that now how we're gonna do that in the rest api call it's gonna be a little bit tricky we're gonna first fetch all the courses then we'll grab the reference of the teaching id then we'll again make a call on that teaching assistant and will grab the experience and this is not too much if your application is of decent size maybe serving let's just say 400 000 people or 500 000 people so there's just two extra requests that we have made but in the case of when i multiply these numbers by 80 million or 50 million these two requests puts so much of extra load on the server and the traffic is also going to be a concern and this is exactly why the graphql was designed by facebook they were handling and they are still handling insane amount of traffic and this traffic needs as much as low load as it can possibly do so graphql helps you to nitpick the data that you only want from something not to dump down the entire data and then network but rather the traffic don't get congested and you select the data that you want and graphql returns you only that data and that's the whole power of graphql so if your application is struggling and is facing huge amount of traffic then graphql can save the day okay so we can nitpick the data but what about the cons of the graphql now the cons is not something that you can look at the very first if somebody is doing all the back end work graphql actually makes everything so much smooth and so much good looking at the front end side but on the behind the scene on the back end it makes everything so much messy there are so much of the configuration needed and so much of the things like resolvers and whole bunch of other things that needs to be done and when it comes to the debugging part it's not really the greatest of the thing to debug the messages are not very prompt and it's a whole lot another nightmare to debug the application that are using graphql but if your application is facing so much of traffic it's worth investing the time and the effort so now that you know the brief overview about the graphql i would highly recommend to stick around and let me design a simple application of exactly what we have discussed here we're going to design a simple application where we have a lot of courses that we can add into fictitious database or just a variable and then we're going to fetch some of the experience of the teaching assistants and this whole scenario is designed in such a way that everybody can understand the power of graphql can see the underlying complexity as well as can explore these things further on their own and now before we move on to the computer there's one more important thing make sure you have hit that subscribe button if you haven't hit that yet no worries we are not going anywhere neither me neither you are you can hit that whenever you like so now let's move on to the computer and try to see that how we're gonna code this simple example and try to get more about what graphql is and how it looks like and how it feels to code a graphql application from the scratch oh sorry one more thing if you want more such crash courses and maybe a version two of this graphql let me know in the comment section based on your comments i pick up what's going what's going to be the next crash course that we're gonna put up so make sure you hit that comment section and let me know what more you want and i'll pick up definitely your request on the priority and now finally let's move on to computer hey there everyone welcome to the computer and i hope you got the basic idea of what we are trying to do at least basic overview of that so in this video we're going to get started with that yes i have created a very very teeny tiny uh some of the text that you should know about graphql first the important word is pick specific data that's the whole idea of the graphql that instead of putting out a request through the rest api and grabbing all the data we're going to be picking up some specific data and we'll be doing it everything from the scratch i will be using the core node npm express for dealing up with this entire situation surely it can be done through graph apollo graphql and bunch of other things we'll be going bare minimum basics but before that i would like to put out a simple kind of a disclaimer note that there are many ways of how you implement graphql variety of tools and if you're even if you're using same tools there are lots of syntax that graphql support this is one of the many ways and i have tried to focus on the keyword easy way so that everybody can understand what's happening here so make sure we are cutting corners here things like in detail like pagination and stuff we are not going there but i'll cover enough that you get a brief idea in the world of graphql we cannot actually talk about graphql without touching on these two topics which are schema and resolvers i'm not saying these are the only ones yes there are pagination and bunch of others which i will tell you but these are the basic heart of the entire graphql if you want to design or develop a server for that the goal is really simple we want to create a new entry and we want to read that entry and specifically we want to create a new course fictitiously of course and in the course we want to have a few entries that we want to have and selectively we want to pick up only some information from that entry not to dump down all of the entries that are stored in the database so that's the whole idea of it i will be talking about schemas simply means the structures of the data types that are being supported by the graphql i'll be picking up the easy syntax not the lengthy and the longer one so that things can be easy and sanity can be remained up here and then we're going to talk about resolvers which is really confusing term but when we code it actually it becomes much more easier and that's all that's all i have got for the theory for you so let's go ahead and move on so this is officially the website graphql.org learn where you can spend your more time can learn more about this query language and specifically a query language for api it sounds very exciting i will be using the same syntax that is mentioned up here don't you worry i'll walk you through easy way that but there is another syntax which is also being supported it's much more lengthier it looks more like a javascriptish but this is much more cleaner and that's why i prefer it this one also the documentation mentioned that at the top so they also recommend it but we're not going into things like authorization pagination as you can see caching and a whole bunch of other things is also there which are really amazing but we cannot go too much in depth we will be going things like available some of uh the type schemas some of the scalar ones enumerations and bunch of interfaces and basic stuff we will be definitely going into some of the stuff which are i'll not mention here but they are very important one so spend more time in case you are looking for okay so how we're going to get started now usually i always get started from the bare minimum basic but since we are into a bit more advanced ish kind of a level here i have already prepared a simple url for you it is hosted on github.com lco-graphql there is nothing inside this package but it is just there so that it make sure we all are standing on the same ground so go ahead and click on the download and i'll be downloading a zip on my desktop uh for this one so go ahead and save this one and let's go ahead and unzip this one and once you unzip it's going to say lco graphql dash main make sure you rename it to just lco graphql now fire up your vs code here is my vs code so once you rename it just make sure you drag and drop this lco-graphql up here and that's all you're going to see now why we are using this special zip file here or a repository here it's just simply to make sure that we all are standing on the same page when we write something related to es6 it doesn't give us any error because some of you might be on different system so we wanted to just make sure everybody is on the same page as you can see in the index.js it's just empty there is nothing but at the package.json i have got some of the es6 and babel configuration being done here so nothing to be worried all you got to do up here is just say npm install and just hit enter it's going to install some of the repo some of the dependencies on here and now all you got to do is in case you want to run it there is just one simple command for doing everything which is npm start and regardless of what configuration you have done or not after running the npm install npm start is going to just run everything fine here but that's not it we want to work on the graphql so there's going to be a few dependencies on which we want to work so we're going to install these dependencies all together so let's go ahead and work on with that so i'm going to simply say npm install and then first thing that we need is express which will help us to set up our server but since we'll be working with the graphql so make sure the graphql also gets installed but also there is another one which is express dash graphql this will help us to connect the graphql and express together so that we can have a route in the browser we can visit that and can turn on all the graphql tools that are given to us by basic apart from this i will be using a nano id which is like a simpler version of uuid feel free to use uuid as well it's not really compulsory to use it in case you want to wish you can use directly a crypto all i want is just a unique id which will be used later on so these are the only things that we need for this entirety of the crash course it's not going to take much of the time pretty simple one and just to verify it again we can go up into package.json and can see our dependencies so express express graphql graphql nano id nodemon was already there so any version is gonna work absolutely fine it's not going to do any kind of breakage to our application so we are all good and all fine okay now let's go ahead and obviously set up some of the stuff for us so let's go into index.js and we can just remove everything here so first thing we always do is let's go ahead and grab express and that will be coming up from express once the express is available we are going to go ahead and create an app from express there we go nice and easy and this app is going to be showing some route to us so let's just say we are going to have a get method and thus this will be on the slash means home route and we will be sending some response on that so request response go ahead and use your es6 methods and then we're going to say res.send and we're going to simply send up a simple message that will say up and running with graphql crash course sounds good and now we need to make sure that our server is listening to any port which feels very favorite to you so app dot listen and let's just say we are going to run it on maybe 80 81 82 whatever okay and we're gonna go ahead and fire this up so console.log will say running at let's just say 8082 yeah that seems good okay now let's go ahead and run this up here so all we got to do is npm start in case we haven't done any typo things should be good and we are running at 80 t2 so all we got to do is now let's go on to localhost so localhost and this time we are on ad82 so whatever feels good to you so it says up and running with graphql crash course okay that is fine now let's go ahead and move on to creating couple of files which will help us to make sure that our graphql is up and running there are majorly three parts in the graphql if you want to go at the verb masic very bare minimum basic the first is schema the second is resolver and the third is tiny bit configuration which can be done in the index file or wherever you like so let's go ahead and work on with that so first thing that we are going to do is we are going to create a new file just right in this directory we're going to call this one as a schema so let's go ahead and work on schema.js now this schema is going to be coming up from the graphql so don't you worry on that part let's go ahead and hit enter on this one the first thing that we do up here is we are going to import something from graphql this is a core graphql thing the first thing that we want to have and the only thing that we are going to have is going to be the build schema there are a couple of other types of variations of schema here but the bare minimum that you need is going to be build schema now we're going to build kind of a very elaborate schema to understand it like a whole lot of it so have patience here so let's call this one as a schema schema there we go and this one is going to be build schema it goes like this and make sure you use the backticks this is not the single quotes these are backticks just below your escape key and we're gonna hit and enter and this is where we write entirety of our schema but that's not it we need to export that so let's go ahead and export it first here export default schema okay so coming about to the point that how a schema works and what is the syntax of it in case you noticed it up here this is exactly the syntax that we are using things like type query and type user now the query is a very specific type i will discuss on that in a second but right now let's follow along up here so all i'm going to do here is first the keyword type comes up and then i'm going to simply say it as course now you don't need to call it specifically course this is not a reserve keyword this is a schema for my object that i want to do so i want to build a course structure here so i'm going to say type of course now inside this you mentioned that what type of values are going to come up and what's the name of that value so in this case i'm going to say id which is a specific type of id then you don't put a comma in this one this is a very common mistake you don't put and separate the values with the comma i'm going to say i have a course name as well which is of type string so yes strings are supported no surprise in there then we are going to have a category and again let's call it as a string as well i have a little bit change up here so we are going to have a price and without any doubt in teachers are supported floats are also supported uh a couple of bunch of arrays and stuff also are being supported so let's just say in what language this course is being created maybe in the english maybe some regional local french language or marathi whatever the language and the email associated with this course whoever is designing you guessed it there is a lot that we can do up here interestingly the whole goal of this course is to have teaching assistant so i'm going to say that teaching assists are there and this one is an array so if you want to support an array you can just go ahead and say that this is going to be area of strings but in case you want to have inside in here further a custom type you can actually go ahead and do that i'm going to simply say teaching assist is its own data type which is like a again a kind of a data type so how we're going to work on with that just like we have created this type course we can actually go ahead and create another one so i'm going to simply say type in case i don't make a mess i'll copy and paste there we go so teaching assist is again going to be of type it has a property of first name which is a string we are going to have last name which is going to be a type of string then we are going to have an experience if i can write that command experience which is going to be of type of hint so as you can see that we have a lot of flexibility of whether to use inbuilt data type like strings or something or if you want to have a custom data type you can actually just define it and can make a dependency based on that but not only that what is the most interesting is that it supports some of my favorite type as well things like enum is also being supported so instead of calling it as type we go ahead and call it as enum so let's just say in the enum i want to use something like stack so let's just say that inside in here after the email there is a stack which is of type of a stack now why enum is my favorite type so notice here i have used a stack here so i'm going to define an enumeration of stack what it's going to do in the enum you don't mention this kind of a syntax like first name colon and stuff you only provided that you only provide the choices here like for example the course can be on a web stack uh maybe a mobile stack i'm not using more than mean but i'm just you get the point other and stuff like that so in case you are designing an application for maybe airplane so aisle middle or window seat so i want the user only to select something from this drop down you can actually go ahead and do that and you will notice that this stack and this mention of the rules are actually very well being governed by this graphql and you're going to notice that when we are going to launch the graphql okay so this is the basic type that you can create for any of your objects in the graphql this is the basic schema but this is the schema that we have given like how my structure will look like in a kind of a database would be wrong word here but how it is actually being structured somewhere now coming on to the point now we have another thing which is the most famous one is the query type query and there are so many ways how you can query the data so what happens is whenever we get a query the query is being resolved by someone and that someone is known as resolver resolver will be responsible for accepting a query and sending the response based on whatever is your logic we will do that so let's go ahead and create a method let's call it as a get course kind of a getters and setters but you can call this anyone and you can respond to a hard-coded response as well but i don't recommend that so this ex accepts that expect that you're going to be sending some id and the id will be provided here the mentioning of data type is very very essential and what we'll be returning him is going to be a course so what i'm saying here is there will be a method in my resolvers which i haven't talked yet and this will be responsible or first let's just say that this is going to be a method which accepts id and it will return you a course data type if it would be returning a string data type surely we can write a string here no problem in that and this is basically what you do in the query if here also you see that if somebody says me if somebody sends a query of me then we return him a user we are almost doing exactly same somebody asked us that get me a course with this course id we're going to return him and course just like that okay so this is the part where we actually sets up a schema or we set some of the query that how we're going to return that that is usually defined in the resolver but there is one more thing i want to set some data inside using this graphql as well because remember we have got two goals read the data as well as set some data as well so for this we have to study another type of schema here which is known as input so just like we have been using this type this enum this type there is another very very important type in the graphql which is known as input and the usual standard is that we say course input so whatever is your schema is being defined we just say input and the name of that again this is just a standard good coding practice feel free to use it feel free to skip it so we're going to say input course input teaching assist and stuff like that okay so i call it as teaching assist here here i call it as teach assist i think we should be a little bit more consistent we should call it as teaching assist and here also it should be teaching assist yeah just for the sake of consistency okay moving further let's see how we're going to take input from the user we just say input first just like we say type we say input here and then whatever the name suits to you have this curly braces hit enter and now the good way is actually here to copy and paste this is the one case where i say copying and pasting is much much better because obviously if you have a field which expects you to have some data all the fields should be available in the input field obviously it makes sense but there's a little bit more to it if you want that certain fields should be very compulsory without that i cannot create an entry for that we're going to go ahead and put an exclamation sign on that exclamation sign simply means this is a compulsory field you cannot avoid it if you want to create an entry you have to provide that and you can put it up anywhere let's just say we put it on price we just say put it on teaching assistant so these are now all the fields which are compulsory we have to provide them id is not compulsory because we will be generating it based on the nano id or the uuid whatever you're having but the point is yeah that's how it works so told you it's really simple in the schema syntax so we're going to simply say input and we are going to use teaching assist copy that paste that and we just kind of pre prefix it with input so or we can say we are going to post fix that so we are following a standard here so course input and whatever the name of your schema input so this is how the basics is going to go we're going to go ahead and hit and enter and again as i told you it's a good idea to have this one here so copy this and paste this up here okay i know this is a little bit more uh but this is like the basics of the input now there is just one last thing before we go further we have taken the input but just like here the type query and there was a method of which was responsible of getting the data there is one more thing which is of type let me go ahead up here type and we call this as mutation now this is again a keyword we don't actually change this one this is a mutation and this will be responsible for filling the data in the database is not really the right word but whatever you are throwing the data inside whether it's a data database or in-memory database or a variable that you have created whatever that is inside that filling up the data is the job of mutation mutation simply means a change so whenever you want to change any data it usually goes through with the mutation so we're going to call this one as simply create course that was a get course this one is set course or create course however you like to go with that now in that we actually say there will be input coming up this input will be of type i hope you guessed it yep exactly this type so input will be of course type and once this is done we are going to get back the entire course object yeah loosely calling it as object but yeah so we will be returning this object now we actually throw the entire object back but it's the graphql's job to nitpick that data and show us only what is expected there you'll get more onto that but this is whole okay so quickly summarizing the schema is a place where you define the structure of your objects or whatever your you are creating i have got this course and i have a few fields here like id string integers there can be more there can be dependent field as well like teaching assistant we are having this teaching assist and then we are defining some of the types like first name last name experience you can have more i've also tried to demonstrate you a little bit on the enum because this is my favorite i don't usually avoid that enum is really the most powerful and error-prone thing to have in the database and then we are having two important types one is query that is responsible for getting some data and then there is a type mutation which is responsible for setting some of the data now if you're setting some data obviously the input is going to be responsible for that and as many fields you are setting there is going to be input for them okay so that's the basic of schema and now we can close this up okay nice and easy now next thing up we are going to need a little bit a talk on the resolver now resolver is something which is going to get some work to be done so all the methods that we have kind of designed in our this schema methods uh this get course as well as create course these are gonna be all filled up in the resolver okay let's go ahead and close this one and let's create a new file we're going to call this one as simply resolvers dot js now once we are in the resolvers first thing that i'm going to be doing is i will be importing something from nano id because i'll be using that in a second then the id okay now one thing that i would like to mention here that to make this course a little bit easier to understand and follow through i'm not using graphql tools graphql tools are the way how we actually persist the data in mongodb or postgres or whatever the database you are using i will not be doing that i will be just storing them inside available and that's it so we obviously got to have some variable up here let's go ahead and work on with that so let's go ahead and create a simple fictitious class here so let's just go ahead and call this one as course inside the course i will expect a constructor here so inside the constructor we are going to separate an id just like that and rest of the things are going to be an object so we have a course course name and then we have a category i would like to borrow some of the things from here because i don't want to miss any of that okay so these are the fields let's go ahead and copy them for a minute and paste them up here so we got course name category price we got a language email and a stack and teaching assist so these are all the fields that are gonna be there okay let's go ahead and remove that so we have created a simple constructor and constructor expects that you are going to be filling up all these values and once this is being done we have to set them up so we're going to simply say this dot and id is gonna be id and similarly this dot course name is gonna be course name this dot category is gonna be category yes i have to do it all for all of them okay so now that we have a class which is like a very dummy class basically what we are doing is we are trying to create an object a placeholder through which we can actually set some data and what we're going to call this one here as let's create a variable let's call this one as simply uh course holder that's a good name and this is going to be an empty object so what we're going to be creating or how we will be doing in this object we'll be having a key value pairs so the key is going to be the id of that particular course and the value is going to be all the data that we are sending it up and that's what we'll be holding in this course holder surely we can push this exact value into the database as well pretty standard stuff but we won't be going too much in that now this is all the basic work this has nothing to do with the graphql this is all a simple kind of a boilerplate code that we absolutely need the most important thing that we need is this resolver so this resolvers is going to be the whole part of how we actually do this stuff now it's not really compulsory to call it resolver but please stick to resolver in this case also it's going to make much more sense later on okay we're going to be going and directly like this now it is very important that whatever the methods you have defined in your schema you actually name them exactly same first is the get course so how it's going to get course is we're going to have this one this resolver here and how this resolver works this actually is going to be a simple method just like that and what do you expect it expects that somebody is going to give us an id there we go that's it once the id is being given we're going to go ahead and simply return a course so let's go ahead and say new course based on the id that you are providing me and since we are storing the key value pair then i can simply say that course holder return the value which is having this id so there we go we have got this one covered pretty simple pretty easy now another thing which is there in my schema is how we're going to insert the data which is create course so in this case uh notice here we are not doing much we are just storing them inside an object and then we are throwing them out so another one here put up a comma and there is another resolver here so again this is a simple method just like that and here what do you expect that somebody if you noticed up here is providing you this input so what do we do is we just take this input just like that and once this input is up here first we need to create id i told you we are going to be using a unique id and that's why this nano id is here so let's just say this is my id created by then id that's it id is now holding a unique value then we're going to use this course holder and on this particular id we are going to be setting up all the values that input is giving to us and once this is being done we are going to go ahead and return something as well so return is pretty simple very standard we are going to say return the course the id and the input so this is all what we are returning back now how you handle your data is going to be totally dependent on you that how you are messing around with that result with the whole idea is are the brain part that how you actually read the entire data and how you actually write the data here we don't actually usually don't mention that nitpicking of the stuff networking of the stuff is actually automatically done by the graphql interface which we are gonna move on to next so this part is all done now we can close the resolver and the schema and moving on to the final part which is index.js now the all preparation work is all done now it's time that we actually go ahead and bring up everything up here so first is that we are going to need couple of things we're going to need this resolver so it's not coming up automatically let's go ahead and say i need this we didn't exported the resolvers did we nope i don't think so nope we never exported that so let's go ahead and say export default come on export default resolvers so now it should be coming up automatically save that let's try this out resolvers there we go so notice here the resolvers is now being imported we also need schema as well so schema let's bring it up so now schema there we go schema is also being important and last but not the least thing that we are going to grab up is going to be graphql http let me show you that so we're going to be saying import something from and this is the only thing which comes up from this express graphql and this one is pretty simple graphql http now this graphql http can make a little bit of the confusion because of the too much support that express gives us which is a good thing but sometimes it can be confusing so what actually uh this entire express allows us to do is we can you say app.use which is a pretty standard one but it also allows us to use app.get and app.post which is a point of confusion again because most of the programs you're going to see use this app.use this is how the graphql is configured but it supports other one as well okay so let me go get up here and how to work on with that okay so first we're gonna simply say app.use and then we're gonna simply say that on the slash graphql we are going to be running a server here which is going to be uh be governed by this graphql http this requires you to pass on a couple of parameters the first and the most important parameter is schema since we are bringing the schema from the schema file that we have designed so we are just putting it up i know you know es6 this is not really necessary but i'm gonna still keep it it makes things more visually good and then the next thing is this graph vql graphy come on no suggestion so it says graphql and you have to turn this flag on what this does is actually gives you a nice interface on the web so that you can use it i'll show you that in a second the last but not the least is actually this root value and we're going to call this one as root which we haven't yet defined so we're going to go up here and we're going to define this root so we're going to simply say const root and this root is actually where you use your resolvers but i'll use that in a second but first what i want to do is i want to show you the basics of it and i forgot a comma here there we go so in this root object what we're going to do is we're going to simply say that let's just say there is a lco value and that should be resolved by a method and this method doesn't do much anything it just says sc console.log and it just says a full form of it i want to show you that how easy it is to have resolvers and just treat them as a functions at the starting level and this will help you a lot okay so quite a lot of work we have done here and now it says running at 8080 it has been crashing for a couple of times but no big deal now i can go back up here on my localhost hit a reload this is running fine on 8082 and we're going to simply say give me a graph ql and this is the basic interface and it looks like there are a couple of issues here the type of course input teaching assist must be input type but card teaching assist yeah looks like there is a couple of issues in my schema let me quickly see that found the bug it was not a bug is actually pretty simple notice here we are taking all the input so this one is not teaching assist it should be input so let's go ahead and give it this one as input as well so teaching assist input copy that and just paste it there so that's pretty much it standard stuff we do a lot of bugs in mistake we can hit a reload and there we go now it's all easy so this is the whole graphic ql so notice i told you that there is a flag that we turns on so this graphic ql is actually the visualization web version of how things are going on so make sure you turn this on true the schema is necessary the root value is coming up from here so that's how it goes on okay so now the query has been uh the the issue is being resolved up here as we can see now the good thing that i like about this graphical interface is that there are so many options that comes up here that makes your life easier for example the docs can read the entirety of your documentation can give you things like what this root types are like you can fire up a query you can fire up a mutation mutation like you can have this create course kind of a method and it takes an input of course input and you can see that what all data you can pass on even the teaching assistants has all this of data so we can provide a whole lot of this here in the query it can it can show you that you can get a course id and the courses and a whole bunch of other things that it can be done but i wanted to mention this here because if you noticed up here it says root types and that's what this whole route is all about this route is actually loosely saying is all about the methods that you can pass on here here we have used kind of a lambda methods or whatever you call this uh this is basically up here but if you remember we can just now remove it and can use this resolvers here so let's go ahead and say that we have this uh resolvers there we go and now what it will do is it will go into the resolvers and we'll see that there are all the resolvers available to all of us in case you have more methods you can actually go ahead and say that now if i save this all we got to do is hit a reload one more time and there we go this is all it looks hopefully good now we can fire up some of the queries and can do a little bit more stuff on that okay so now that we are back on to the seat uh let's go ahead and move on further into the course so this is our basic graphql and as you can see there are a lot that we can do up here so you're going to notice that most of the time we use this for querying the stuff but right now in our variable the course holder that we have created there is nothing inside that so we cannot perform any query there are lots of things you can do one of them is query another one is mutation so we're going to see that how we can do mutation whenever we're going to do mutation it's going to again look for into the index that who is responsible for handling all these methods and doing the mutation so we're going to go into resolvers and again based on the schema we're going to go on to resolver and it's going to see that hey if you want to change the data in the schema you have mentioned that this mutation is handled by the create course okay so we're going to go up here and we'll use this method and we'll pass on all the values let's go ahead and see how to do that in action so in the mutation you are going to go like this okay pretty simple then we have just one mutation to be done here which is create course now in the create course we have to provide all the input values so we're going to put up a colon and just like that we are going to provide all the values but there is one more thing even though you are going to provide some values this red squiggly line on the create course is not going to go away that easily because we told it that once we are doing this create course we are returning this course again so when you're returning this course again which is a standard practice you have to put up a curly braces up again here and then have to return at least something maybe an id maybe a course name you don't have to return the entire object and that's the whole power of the graphql that you don't have to deal with the entirety of the data which travels in your network you can just say i want this specific thing not the entirety of the thing now moving on in this create course you can definitely say that i want to provide a course name which is going to be js boot camp and stuff like that boot camp but we're going to see an error here let's go ahead and run this so notice here there are a couple of errors that says hey while defining your schema you told me that whenever i'll give an input this course name is compulsory but this price and teaching assist is also compulsory using that exclamation but you're not providing me that so that actually uh helps us a lot in that case okay so moving on we have a price so let's go ahead and set 199 and then we have uh i forgot to mention the stack as well so if i just say stack notice here i try to write something and it gives this quickly line because in the stack if you remember in the schema we said that we can only choose between the web between the mobile or the others so i'm going to go ahead and choose mobile so that's also being supported and then we have got course rest of the fields are not compulsory so we're going to avoid them then we have this teaching assist which if you remember we marked that as an array and this array is an object again so it has few properties we decided first name is going to be that and then we have last name which is going to be command there we go and then experience which is going to be let's just say one year of experience separated by comma another object so let's go ahead and get some first name which is gonna be raul or rahul depends on what country you are talking in and then we are going to be saying last name let's give it an indian last name and then we are going to have experience let's just say four years maybe okay now notice here that we have got the entire mutation being set up now i can run this and it says i have created a course with this unique id from the nano id and the course name is jsbootcam it's giving me the course name because i only asked it to give me the course name i could have done the entire course object or more specific information if i wanted to but this is all i need now moving on i'll copy this course id and now it's time to learn about another querying procedure on the graphql this was mutation and another one is actually firing up a query now this is much more fun way in every query just like there needs a resolver to resolve this query just like the mutation need a resolver to add the data into the variable that we have created if you notice up here we have got just one here which is a get core so this is my method and this method expects you to pass on an id so let's go ahead and pass on an id just like that and we can go ahead and grab the entirety of the object but that's not fun this is graphql so we're going to hit enter i need id so provide me that and i need teaching assist as well but i don't need everything from the teaching assist i just need the experience out of it so i can just go ahead and run this one now notice here i'm not dumping down the entirety of the data i can even avoid the id if i want and i can just have all the experience of all the teaching assistants that are available to me is it overkill it depends it heavily depends on what kind of application you are building so this much of work of just having reduction in the traffic in the network as well as a load on the server if that makes sense then definitely graphql is for you if all of this work doesn't make sense for you for your small application definitely graphql doesn't make sense for you so quite a lot of stuff quite a lot of work it's not really tough is it involved yes a little bit involved but is it fun definitely yes it is too much fun this is just scratching the surface of what the graphql is if you want me to cover it in more depth let me know in the comment section i would love to create some more resources for this one let's catch up in the next one that's it mr batman we're done for the graphql right now and we both are gonna catch up in another video

Channel: Hitesh Choudhary

Views: 52,490

Rating: 4.9281435 out of 5

Keywords: Programming, LearnCodeOnline, graphql, graphql crash course, learn graphql, what is graphql

Id: _Zss2Mbz4Bs

Length: 45min 56sec (2756 seconds)

Published: Tue Nov 17 2020