GraphQL Tutorial Beginner - Learn GraphQL in NodeJS / ExpressJS

hey guys how's it going i'm back here with another video and today i'm going to be talking about fql and also show you guys how exactly how to implement a graphql api exactly everything you need to do using node and express and we're going to be talking about mutations queries everything related to that and i'm going to explain everything in about like 30 to 40 minutes but yeah before we get into the implementation i just want to give a really quick overview of what graphql is and before i actually get into that if you guys could leave a like and subscribe i would really appreciate it so yeah let's start talking about what exactly is graphql so as you can see right here graphql is basically a query language and what do i mean by that is it's just a way to organize your api so that you are always making queries or making uh requests for mute for mutating the data changing the data receiving the data and it has some very clear differences to a rest api which is probably what most people code and i laid out here two of the main differences in my opinion and i'll show you guys exactly what they mean the first is imagine you have this project where you're getting data from uh users in reddit you can see clearly right here i got this from google but you can see clearly right here uh you're getting data from users in a rest api you would make an api request to reddit and pass over here for example you want to get the user k and k nothing this is a username you want to get the data for them so reddit obviously contains a bunch of data about the user so they might have the username the common karma the i don't know the the number of like the the total number of upvotes the the data user was created that kind of stuff the email that kind of stuff a bunch of data but with graphql you can specify specifically what you want to receive so i'm making an api call to the reddit api and maybe their their api is returning a bunch of stuff but if you are you making a graphql request we can pass i just want to get the username the command karma and the created iso which i don't i think is the date the user was created and you can see that this is the data that is returned it is returned in a very structured way and only the information that we requested for it to be returned from our client is returned so this is the client this is the response right so this is exactly the idea of structuring your query your queries using graphql and it will become a lot clearer as we go into the implementation but finally the the other difference is that i think it's most like noticeable in the beginning is that normally with rest apis you would for example create if you're working with a user you would create an endpoint for slash api slash users right if you're working with com like creating a an endpoint for i don't know friends or comments or likes in the project then you have a slash likes slash comments slash friends that kind of stuff right but with graphql there's only one route it's called slash graphql and all of your stuff works around this route and it will become again clearer as we go to the implementation and why we actually do this but it is really awesome i love graphql and i'm really excited to show you guys how to create your first graphql server hey guys how's it going i'm back here with another video and today i decided to bring a much awaited by my subscribers tutorial where i'm going to be teaching you guys how to build a graphql api from scratch using node and express and basically we're going to be using like building a whole application around this fake data that i have over here you can see it's called mockdata.json it's a bunch of like it's a thousand different entries for different information about a user you can see that each user has a first name an id a last name a password and an email and by the way like these are all fake if you want to check out how to get fake data you can go to a website called mockeroo.com it is really awesome i always download fake data from there and i use it to test my applications so you can see right here we have a very simple api um actually it's not an api yet it's just us express server that is running i can come over here i can go to my local host i can run everything and that's fine right so what can we do now we need to start implementing our api so in order to start creating our graphql server we need to install two packages the two packages we need to install are um npm install graphql just simply graphql so we can get all the types involved in graphql and you'll understand about that later in the video and also express graphql which is where the lab we're going to be using to create our express graphql server i already installed both of them so i i won't not install them again but you can just press enter and it will install everything so after we installed both of those packages we need to start by importing those packages and you can see that i have the data over here imagine that every time i'm dealing with this piece of data over here it could be like somewhere in application where we would be making a query to a database or we would be inserting stuff into a database like i'm just replacing a database with this fake data but in normal applications everywhere i do something with this data you would be doing something with your database so now that we have installed both packages we need to actually import those packages so let's come over here and say const graphql equals to require and then let's import graphql and then let's come over here and say const and we want to import um a variable called graphql http let me already import this this is just to create a graphql server um graphql http equals to require um express graphql by the way uh in the like first i'll show you guys how to create the server like everything in this single file over here the reason for that is because i don't want to complicate stuff i just want to go straight to the point and then at the end i'll show you guys how to actually organize a graphql server like a graphical application i'm going to divide it into different folders and you guys will see exactly what i mean but initially we're going to do everything in this file just so you guys can have a picture of what each thing does so now that we imported both of these packages you can see we imported graphql we imported the graphql http we need to actually create our server so how do we create our graphql server well we have to come here to the bottom like it has to be at the bottom of your application or after you created all the schemas and all the mutations and queries which again i'm going to be talking about that later in the video but basically we have to come right here at the bottom and say app.use so we're applying this and then we're going to put our endpoint right just like we were if we were creating a route uh in the beginning of the video i explained to you guys that graphql actually has only one route a single route called slash graph ql this is the single route that it has you can only access stuff through this route so we have to apply it over here and the route we're applying is the graphql http and over here we can pass two pieces of information first of all is the schema and then it is a graphical variable that we can ask what this means is basically there's a graphical user interest interface uh or a gui that comes with graphql with this package that we installed it is really awesome it allows you to visualize um all your queries and be able to test them so graphical is basically that if you want if you don't want that then set it equal to false but i always use it i think most people always use it because it's really handy and you'll be able to see everything happening and schema we obviously haven't created our schema yet so how how are we going to create that schema well that's going to come much later but basically after we did this we can start building our graphql server so this should be fine we just need to do something to create this schema object over here and what exactly is a schema well a scheme is just a combination between mutations and queries and what do i mean by mutations in queries well if you if you're interested in learning graphql you probably heard those words before queries is just like in a database it means getting information getting data right so when i when i write a graphql query i'm trying to get information receive that data and when i have a mutation i'm trying to update create or delete data so mutations are basically create statements delete statements and updates and queries are basically get statements so we have to have a combination of both of them so to create a graphql schema we can just come here at the bottom and right right before this app.use and let's create a variable called schema which is going to be equal to new graph l um not like this actually like graphql schema and by the way i'm going to the reason why it's putting it like this because we're gonna import some stuff from graphql with graphql schema and inside of here we have to pass two variables one of them is query which we currently don't have and the other one is mutation which again we don't have so this is the variable we're going to pass over here and as i mentioned it needs to be a combination between queries and mutations so we have to create those two variables somewhere in our application so for now let's just create both of those variables so over here let's just create um something like usually when you create the first query like the major query the the variable representing all queries you usually call it root query so let's just call it root query and it's equal to a for now let's not set it equal to anything let's just set it equal to a word called query a string called query i just want to complicate stuff but then let's also create a mutation variable mutation equals to a mutation obviously they aren't strings they're objects but i just want to show you guys exactly what i mean by that well you can see right here that we can now just grab root query put it over here and mutation and put it over here so this is the basic idea of our schema it would just be two variables united like this and we can pass the schema over here but now we've got to start working directly with what graphql is actually about well graphql we we need to define a predefined schema and what we mean by that is that when we come here to our mockdata.json where we have the users we have to define a graphql schema which includes the data that like the the properties that a user might have right so we need to create a schema for the user or a type definition for the user and you've probably heard that word before if you're interested in graphql type definition is basically we need to define a type for the user a user type might might have an id a first name a last name a email and a password just like our our json object there has so in order to create one we have to come over here and before anything actually import stuff from graphql so i'm going to do it like this i'm going just to put a comma over there and import some stuff from graphql the first thing i want to import is graphql object type which is used to it's not actually i wrote it wrong object type this actually is used to create the types so create a user for example then we want to create a schema if you remember we we over here use the variable called graphql schema so we have to import that from graphql then we also want to import some types right so if you want to use if you want to create a type for user the user might have an id so an id is an integer so we have to define it as a graphql int and also a first name email password last name they are all strings so you have to actually import a graphql string there's obviously many different types and if you're interested you can like definitely in your applications you would use them you can also create specific types and that's something for another video but basically these are the basic types that we want to use in our application so now that we have all of that we can start creating our query so to create to create a query as i mentioned before we're going to be using the graphql object type variable and we're going to come over here and say root query equals to new graph ql object type and inside of it we can pass um basically the type of the of the like of what we're doing right so what exactly are we doing we just this is a is a object type that represents the queries so we can give it a name a name and usually we'll call it root query type and then also it will have some fields so fields is something that is very it's standard the fields basically represent what are the different queries that we might want to have and this will become clearer but basically for example imagine we want to create a graphql statement that just returns everything from a from a from the like all the users everything from a database then we might want to create a field called get all users i'm not going to create it right now because i still need to define the user type but basically get all users that might be a field and if i want to get just a user like based on on their id i can create a field called get user by id this is like in conversion to a restful api this is like creating two routes one for getting all the users and one for getting the users by id so here are all the fields related to queries so all the queries that we might want to have an application however something is extremely important over here we have to create our user type and what do i mean by that is we need to create our type definition for user so let's come over here at the top and create a variable called user type it's just almost like you're creating you're defining that users have to be this will this way so to create a user type you need to say new graphql object type like like we did it before and just pass an object and over here we have to pass a name just like we also did before so the name for this will be probably just user i i usually recommend just putting the name of the database table you have for this but let's just call it user and then just like before we have to add the fields but the field is a bit different here we have to the standard for this is you have to put a call a column and pass an a function inside of here and this function will just contain an object i know this is weird but will contain an object and here is where we define the columns for our user type so we want to have an id and this id will be of type graphql int this is why we imported this variables right here because of this we need to define exactly what we want then let me just copy this over here so that we we can add more like we have id we have first name last name email and password so let me just change this to first name let me change this to um last name let me just do this like this last name and then finally email and then password okay and obviously they aren't all graphql ins actually they are most of them are graphql strings because they're just strings right so this is how you define a string and now we have actually created and finished our user type the type definition for our user so that's perfect that's perfect what we have to do now is we have to use this user so that we can manipulate it and get information from it through our root query so here is where we start creating our queries so in order to create our query let's come over here and let's just say um well the first thing the first query that we want to have is just get all users it's just a query where if we try to run this query it's going to return all the users in our database or in this case all the users in that mockdata.json file so let's just say get all users and pass an object over here so get all users will be of type and this is something that a lot of people get confused what exactly is the type that is going to be returned type here is what is going to be returned right so if we go to our data is it actually user are we going to return a user no we're going to return a list of users because we want to get all of this data right here so instead of saying we're going to return a user for this case we can say that we're going to return a graph graph ql um list and we have to import this um oh it already imported automatically well you have to import graphql list we're gonna import a graphql list of user types so we can say over here user type this just means that it is a list of users and then we have to pass the arguments for this function and what we mean by arguments is well we'll we'll like do we accept any arguments for this um maybe not like we maybe we do maybe not so for example just for demonstration purposes let's imagine that we wanted to have a way so that like this query we had to pass an argument we had to pass something to the query like an id or a name then we'd have to come over here and say um we want our argument to be for example an id and the type of the id is um i don't know like graphqlint as i mentioned right our ids are graphql ins so this is just an example right this is how you would actually pass an argument but but in this case we don't actually need to we just want to receive all the users in our database and finally we have to pass the resolver so resolve is just a simple function which contains two arguments parent and args i don't want to go much in depth about parent but args is actually just accessing whichever argument you put for example if we want to get users by id and our argument is just an id so we have to get have access to the id over here we can access that id by saying args.id so that that's basically the idea it's an object containing all the arguments that you passed in the function and this is actually a function right as i mentioned over here we can write every single piece of logic that we want to to have in order to return this query in our case we just want to return all users so very simply we can just say return the data so over here if you had a database this is where you would make the the like if you have a mysql database you would make the select all statement or if you have a database you would make the i don't know like the the find um command just to get the data from the database but in our case we just want to return user data because that's the fake data and i just want to see all the data in my in my my project right so this is actually how you create your query if you want to create more queries you can just copy this put a comma over here and add more i'm not going to create more right now but i just want to show you guys that this is how you actually do it and now that we have our query done let's start working with our mutations so mutations as i mentioned before it's just a fancy way to say that you want to create update and delete stuff or delete stuff right it's just a way to change to mutate the data so let's do the same thing we did with um the queries let's create a graph ql object type and again let's pass an object inside of here but the name for this let's just call it mutation so that we it's it's pretty clear that it is a mutation and then we have to pass as always fields but the fields it's very similar to what we do with queries so each field will be a different mutation so if we wanted to create a mutation like create user we would come in at a field called create user for updating is update user for deleting will be a field called delete user that's the idea right similar to queries so let's just create create user right now and for create user we would have to pass some types of information for example we have to pass the type and the type for this would be user type right we're trying to create a user and we have a type definition for user called user type and then this is the most important part about mutations the part that a lot of people get confused we have to pass arguments just like we did with the query we have to pass arguments here and why do we actually have to pass it because imagine we are creating a user so we have to pass the first name the last name the email the password right we have to do that so let's come over here to pass arguments you just pass an object and inside of it we can define all the things that we want to add for example i want to when i make this mutation i want to receive the first name and as i mentioned before it is of type graphql string i wrote this completely wrong but yeah graphql string then i also want to create a last name i'll just copy all of this and by the way you notice that we're not asking for the id right normally when you have a database you don't ask for the id um it just creates automatically um but yeah that's just something that i wanted to say because i'll actually have to create the idea individually because we have we're using fake data so password is also a field so now that we have put our arguments we have to similar to queries pass resolver and the resolver is always gets parent and args and now args is more important than ever because orgs now have access to this right here so [Music] just so so arguments will be like if we say args the first name we'll grab the first name that the person passed in the mutation our last name is the the last name email similar to like if you're an express and you say wrecked up buddy or wrecked um headers this is where you pass that kind of information right so what the only thing we have to we want to do actually is imagine we have this array right over here we have this not not this we have this mock data array in my case and to add data to this database we just have to push a new element to the array so i'll just say userdata.push right however you can see that each element has an id that is increasing by one so we have to actually handle that we have to individually add plus one to the id so in our resolver what i want to do is i want to access the user data array and this is different for you if you have a database if you're using a database you can just come over here and say something like um db.query i'm not like if you're using mysql you can say db.query uh insert um into you know what i mean right so this is where you put the database logic to insert and create the user but in our case we have an array so i'll just say user data dot push and i want to push uh a new user to the user data uh array right the the user data object but the thing is that um as i mentioned before the id has to be managed individually so i'm just going to create a field called id and the id will always be the length of the array plus one so currently the length is a thousand so the next element will have id a thousand and one right so let me just do that i'm just gonna say userdata.length plus one so i'm just saying that the id that we're pushing the user that we're pushing has the idea of the length of the the array plus one then we want to pass a first name and the first name will be of args dot first name right because we're just grabbing the the argument being passed um then as i as we know will be last name and will be args dot last name then email and again rx.email and finally password which will be our x dot password right our exhaust password and i think that's it that's we're just pushing the new l into the to the array and after we did this i just want to return something so what i want to return is actually let me just see i just want to see if we actually inserted the correct information so let's return args and you'll understand what i mean by return it basically just like when you're using graphical or when you're using it's almost like you're saying rest.send if you've used an a restful api before you're saying res dot send you're you're sending the information back obviously usually when we create a user we don't actually need that information maybe we need the the username or the id or the email so i'm just sending back the data that we passed so we're sure that it actually works and honestly this is basically it right so we created our query our mutation and previously we already put those together in our new graphql schema over here we created the schema object and we used it in our graphql http to create the server and this everything related to all the queries and mutations are exist in this schema object right here so if we save this and we run this so i'm just going to say no index.js um okay let me see what happened it said missing initializer and const declaration okay you know what i'm gonna do actually um i'm gonna do it i'm gonna separate it i don't know if that was kind of confusing for you guys but yeah this is definitely not not what i wanted to do but i'll just delete this over here i'll import graphql from here and then what i'm gonna do is i'm just gonna say const i'm gonna import this again from graphql so like this graph ql so what i'm doing is i'm first importing the graphql variable then i'm importing each of this from the graphql variable i don't want this to be confusing but this i just changed it a bit because it was given some errors so this is basically it i'll just save it right now let's open this again and let's run it now you see it says server running because here at the bottom we have a server running when it's listening to the port and let's just open this up so you guys can see you can see that the server is running if i go to localhost 6969 it says cannot get meaning that it is actually working however how do we actually access our api well with graphql as i mentioned in the beginning of the video it is very simple there's only one route called graph ql so let's run this and you'll see that automatically this gui appears and it's beautiful right this is graphical the thing that i mentioned and why is it like why is it cool because it's almost like a way to test your api like when you're using postman or you're using i don't know um insomnia or other like api testers graphql already comes with one built in into your localhost so that's perfect right so the first thing that we can test is we can test to see if our query is running and to test if a query is running you very simply just write here for example um query and then you put uh the curly braces and over here you put the name of the query so the query that we created the only query that we created is called get all users it just returns all users so let's say get all users and let's put another curly braces over here and now we can put over here simply what information we want from each user which is perfect we don't actually need to get all the users automatically we can just put here like we will get all the users but we don't need to get all the information i don't need the id right i really don't need the id i need only the name let's say i want the first name i want the last name and i want the email right so i'm just putting here first name this i'll get for each user i'll get each of this information let's run this and you'll see that when i run it it says data it returns a json called data get all users with an array containing all the users and each user contains only the first name last name and email if i put here password and i run this again you'll see that now all the users also include the password which is perfect it's one of the main benefits of graphql and you can see clearly it goes to the bottom and keep in mind the last user it's called adrians the reason why i'm saying this is because now we're going to mutate we're going to add a user we're going to create a user and edit this and we'll see if the user actually appears here at the bottom so to run a mutation it's kind of a little bit more complicated but it's not that hard to run a mutation you just write here mutation and you put like this open and close curly braces as we did before and you put the name of the mutation so what exactly was the name of the mutation we had well it was called create user right so we can just put create user and we can pass the arguments over here like we would do with a normal function so the first argument we want is first name so let's pass pedro for example that's my first name and then the second argument's last name let's pass machado which is my last name and email let's pass i don't know um like and at subscribe that's a recommendation and then let me come over here and just pass a password my password will be not my actual password okay so we just passed all this information for create user and at the like after it we have to pass like this we have to put a curly braces again at the end and over here very simply this is almost like a function called create user we're passing all the arguments over here we can now pass just like we did with the query the information that we actually want from each user it will return each user but we just want to we just want to see what we want to return we don't actually need to put anything but let's just see right i want to grab the first name i want to see if the first name is right the last name and maybe the email as well okay email let's run this you'll see that it says create user it run perfectly it also returned the first name for the user we created the last name for the user we created and the email for the user we created but the most important thing is checking to see if the user was actually created how do we check we run a query again so query get all users and we want to see the first name i also want to see the id this time because i want to check to see if we actually made the id work um first name last name email i don't know i'm just putting whatever here and password let's see this let's run it you'll see every single user appears but if we go right at the bottom you can see that the last element is not adrian's anymore it's actually pedro which has an idea of a thousand one an email of like and subscribe and a password of not actually my password meaning that we actually added the mutation worked and this is extremely important so this is the basic idea of a graphql project right so you you have mutations you have queries mutations are just ways to make to mutate stuff and queries are just ways to receive stuff however normally if you would structure your project you wouldn't put everything ever like everything in the same file so i'm just going to show you guys quickly how i would actually do it so the what i would do is i will create here a folder called um let me just come over here and say [Music] schema schemas and in schemas would have a index.js and then i would have a type definition type devs so typedef is actually just the user type like it's a definition for the user and we would have to define this and the index.js in the schemas would be the file that would export everything so exactly what i mean by that is let's come over here and let's create copy all of our logic from our index.js and let's put all of them inside of our schema folder so in order to do that we're going to copy first the user type and this over here and we're going to put it inside of the type definitions folder let's create a file called usertype.js and let's just paste this at the bottom and what we want to do is we want to module.exports user type by the way this is just so you can organize your project well um if you're if you're confused by this don't worry then try working the other way first but this is just a way to organize your project better right and as we mentioned before we want to import all this kind of stuff together at our that we have over here so let's import graphql and this at the top here and now we have access to all of them and we don't actually need the schema we don't need the graphql list only this ones so we now have a folder just for type definitions if you want to create a new type definition we can put it over here so let's close this and now let's come here to our index.js on this one on the schemas part what do we actually put here well in this one we put all of our queries and mutations and we actually create our schema so let's copy this and let's put it over here and as i mentioned before we need to import all of this and just paste them at the top here because we have we need to have access to all of them and what is important is we have to create our queries we have to create our mutations and at the bottom instead of creating a schema like this we're just going to export this so what i'm going to say is i'm going to say module dot exports equals to new graphql schema so we're just exporting this this is again just a way to organize your your project i'm just creating everything inside of here and the most important thing is we need to actually import the user type because we can see we're using user type over here but it doesn't exist so to import user type what i do is i just say user type from require and we're going to go back to type definitions slash user type so we're just importing the user type and using it in this application so now that we close this we don't actually need any of this if i recall yeah we don't need any of this so that's perfect we don't need to use this and um the only thing we actually need is let me just delete this the only thing we actually need is oh i also need to get the user data and paste it over here so i need to import the user data in our in our schema because we're obviously using it in our project so the only thing we actually need in our index.js is the the schema right so let's say const schema because we're using the schema inside of here we're going to import the schema from this index.js file over here equals to require dot slash um schemas and if i recall i think this works because this is an index.js instead of a schemas we don't actually need to say slash index we can just leave it like this and he knows because it's an index.js and we're passing the schema over here let's check to see if this works this is just a lot more organized as you can see let's check no it didn't work let me check why um not found okay yeah i'll just say schemas slash index.js let's see if that works let me clear this let me run again no it's giving me some errors um i'm gonna check this errors and i'll come back in a second okay so the error actually is that i was importing the mock data.json incorrectly um from our from somewhere in our index.js it's not this one the the schemas one it's just that you can see i'm importing mock data from like assuming it's inside of the schemas folder but it's actually not so we need to go back twice and i think this is right now let me see mock yeah i think it's right now we just need to get out of schemas and mockdata.json is over here let's run again and server is running now let's try the same things let's just run this query again and you'll see that it shows everything again meaning it's everything is working our query is working our mutations is working and our project is a lot more organized you can see our index.js is very small not the schemas one the the the project one you can call this app.js server.js whatever you want but you can see it's very small our project is organized we have the type definitions we might want to have a folder just for mutations a folder just for queries whatever you want just know that it's great to organize your project in a in a organized manner right so that's basically it i really hope you guys enjoyed this video i'm gonna make more videos about graphql in the future especially making graphql videos with like react which is i know it's a very complicated topic i remember studying it started starting to learn it and i remember i was just super confused so i just wanted to make this introduction video talking about how to create an api with graphql and futurely i can make more videos integrating it with a front end like react and yeah i really hope you guys enjoyed this video if you enjoyed it please leave a like down below what you want to see next subscribe because i'm posting every single day and i really appreciate it and yeah i see you guys next time [Music]

Channel: PedroTech

Views: 19,696

Rating: 4.9223881 out of 5

Keywords: crud, databases, javascript, learn reactjs, mysql, nodejs, reactjs tutorial, typescript, node js, express js, sequelize node js, sequelize, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, graphql, graphql tutorial, graphql vs rest, graphql tutorial for beginners, graphql nodejs, learn graphql, fireship, nodejs graphql, graphq javascript, graphql tutorial beginner, express graphql, graphql expressjs, graphql for beginners

Id: Dr2dDWzThK8

Length: 37min 13sec (2233 seconds)

Published: Tue Dec 15 2020