GraphQL Tutorial For Beginners - Apollo Server Express Tutorial

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this tutorial where i'm going to be going over how you can create your first application using apollo server express as your kind of your graphql package when you're trying to build a graphql api using node.js and express so i have made videos in the past where i teach you guys how to use express graphql which is a really good library i really enjoy it i'm trying to branch out to other technologies as i mentioned in a previous video and a couple months ago i i learned about apollo server express and i've been enjoying it a lot lately so i wanted to bring this tutorial because i know it's a bit hard in the beginning and i just wanted to make it as easy as possible for those who are beginning so before we actually get into the video if you guys could leave a like that would massively help the channel grow um we're almost hitting um 7k which i would really appreciate if we can do that every like massively helps the algorithm push out my video to more people so i would really enjoy if you guys give a like and subscribe if you're not subscribed so let's get into the tutorial first of all you can see i have a very empty application um i just have a package.json which i got from running yarn init and i have this file called fake data so we're going to be using fake data as an example um we're not going to be using any databases because um like this is a graphical tutorial and if i use the database some people might not understand that database so i'm just using a simple array as you can see over here which is called users and there's like a bunch of different users inside of here there's actually four and each user has a name an age and a variable called married which is like a true or false statement and yeah that's this is our fake data so i just wanted to pre-make this because i'm gonna use this in our application and at the bottom we're just exporting um this array so that we can have access to it later on so what do we do when we wanna start our application you can see i have no packages installed so let's start by installing our packages so the first thing i want to install is i want to add over here and i want to zoom in as well into my application i want to add the package apollo server express and this is a really well known package which helps us create our graphql api and then i also want to add express right so both of those are going to be our packages we don't need to install graphical because that already comes with apollo server express so as it is installing let's start by setting up our server so the first thing i want to do is i'm going to create a file over here called index dot js um i accidentally did this okay index dot js as you can see right here and in this file this is going to be the entry point of our api it's going to be where we set up our express server where we tell our server to listen to a port and where we apply the graphql middleware so for those who don't know um graphical is actually think about it as a middleware that will run before ever request and it has been pre-made for us to facilitate how we deal with um receiving and dealing with data and it's a bit different from rest and i have a complete video if you want to check it out about the difference between rest and graphql however just think about it this way um we don't it's it's completely different from what you usually do you don't make those um common http requests you just have mutations and queries and think about queries as the the kind of like the get request from rest and mutations as the as anything you you do to change data so like the delete the update or the create right so think about it that way in order to actually start using apollo server in our application we have to first import um the library from the apollo server express library over here right so i'm just going to import apollo server which is one of the things that they have and inside of here i'm also going to import express so const express equals to require express and finally i also want to create an app variable which is going to be equal to express which we're going to use later on so what we do is over here at the bottom we can do we can write const server equal to new apollo server and this is how we actually instantiate our um like our our graphql server inside of here we have to pass two things which i'm going to go over later we have to pass a variable called typedefs like this and a variable called resolvers we haven't actually created it yet um but we're going to do it in a bit however to just to make our server start we have to pass those two variables and right here at the bottom we need to tell our server which is this variable we created to apply the middleware called app over here so we're basically just saying actually the middleware will be this and we're just applying it to the app which is our instance of our express server right and right here at the bottom we can just say as always app.listen and pass a port which is the port 3001 and we can pass a function over here that runs whenever we our server is listening so i just want to console log something saying server running on port 301 something like this right so this is literally it for our configuration we have here we we just imported apollo server we wrote the basic configurations for an express server then we created this variable called server and set it equal to a new instance of the apollo server and instead of it we have to pass two things which is the type definitions and the resolvers and then we just have to apply on this middleware over here and finally we just need to listen to this port this is basically the configuration for how you create this api using apollo server express however you might be thinking okay so what is type definitions and what are re resolvers so what happens is we're going to be using in this case an example um and the example would be a list of users which i explained before we have here um each user has a name and age and a variable called married right so we could imagine a type definition to be there might be a type called user and a user will have a name an age and a merit so imagine it almost like defining in a database the fields and the columns that you want to have right so we have to determine that before we actually um run our server and we also need to determine which kind of queries we want to make to that um database or to that set of data which in our case is just an array containing objects um and that queries also come inside of the type definitions and finally instead of definitions we also need to put all the mutations we want to make and those mutations are like all the different functions that we're going to run or different quests that we want to execute to make some change in our data maybe in our database or as we're doing right here in our array right so that's basically what happens in type definitions and resolvers are just functions that are called um when we make a request to those type definitions it might seem a bit confusing in the beginning but you guys will will understand as we go through so just wanted to let you guys know because what we like to do is we like to organize our project by separating it um into a folder over here and i like to call this um schema like this and um inside of here i'm going to create two different files one called typedefs and one called resolvers so both of them will be exported like whatever right inside of the resolvers and whatever write it to the type definitions they will be exported and we'll we'll import them over here in our index.js and pass them as this two variables over here so let's start by first of all closing on both of these because we're not going to deal with them for now and let's think about the type definitions right so over here um is where we actually need to define the types that we're going to have in our application we need to define our queries and we need to define our mutations so to do that we have to first import this variable called graphql from um apollo server express so we can just say apollo server express and this variable over here is just used to determine to like initiate a type definition right so right here we can just create this variable called type devs similar to how we wrote over there and we set it equal to graphql and this is one of the bad parts about graphql is that we need to use this syntax which is we open and close backticks as you can see right here and everything we need to we want to write every query every type definition needs to go in between this this is there is actually an extension and i'm gonna try to show it to you guys there's an extension that is really cool um i don't i don't think i have it right now but i've used it a couple of times which um allows like makes this look better so um i can't find it right now but i'll write it in the description and you guys can see it it will be there will be the name of the extension over there which will make this look a little bit better but for now let's just write it like this we have to write um almost like we're writing a string inside of here right so what we have to do is we need to define all of our types and in our case with our fake data we have one type which is the type user right we have a list of users and each user has a type user so what do we put inside of here well we can put all the fields that we have and you can see that to create a type you have to write the name the the the variable type and over the name of the type and then open and close curly braces and inside of here we can basically just pass all the fields that we want to have so for example we might want to have a name which is what we did and this name will be of type string so you might be wondering okay but what does that this mean because this doesn't look like the types used in javascript or in typescript because as for those who are used to typescript this is not how you define a string especially because there's a capital s and there's a acceleration mark at the end well what happens is graphql has their own types if you want to check it out i can put a link in the description with all the basic types for graphql there's like string and boolean all that kind of stuff um it's very simple to to get it it's really quick it's similar to every other language and basically this is how you define whatever type this column is and the question mark just means that we have to this is like a required type so this is something that um i wanted to get out of the way and what else do we have to put here well we said that each user has an h so what do we put here we put in as a type so it's an integer because age is an integer right and then we also said that it has to be married so the type for married is a boolean because it is either true or false and we also put this like this so basically we just defined our first type which is a user but um if you want to create other types like imagine um we have like a list of books as well and each book has like a user owns a book right we can create here a type of book and just define whatever like a book name whatever so we're not going to do this because this is not the example we're going to use but you can create several types and how many you want but here at the bottom we also want to structure our type definitions to have um queries and i'm going to write it like this and by the way this hashtag over here um this is basically a comment right it's how you write comments inside of graphql and we also want to have uh our mutations and i'm just writing it like this so that we know what are our queries what are our mutations and what are our actual types so with queries we basically need to write all the queries that we want to make to this piece of data so our data is just a list of users so what might we want to do right we might want to have a query where when we run it we receive a list of all users so something called like get all users right so to define a query we actually have to write type query and put all the queries that we want to have in our application inside of this type so basically we if we want to get have a query to get a specific user based on an id or get a specific user based on i don't know if it's married or not we can write a query over here like get user by id something like that right but in our case we just want to get a list of all users so let's create a query called get all users and what is important is you need to define what it returns so let's let's think about this we want to get a list of all users so we want to return a user so you can basically incorporate types that are not from like strategically from graphql but types that you actually created so we created this user type and we could say that get all users return a user right but there's still more that we have to write um we also put the exclamation mark but that's not what i wanted to say basically let's think about this get all users returns a list of users so how do we determine that we want to receive a list of users because currently user is just one single user um to do that we can just put um square brackets around it and at the end put another exclamation mark so basically we're just saying here that we get all users is a query that when we execute it we want it to return a list of users so this is basically the only query that we want to have since i want to keep the video short but if you want to add more you can play around with it because it's really awesome and now we can actually for now let's not create the mutations for now i'm just going to show you guys how the query is working um so you can get a visual like how can i say a visual representation of the like our application running right and for what we have to do now is we have our type definitions we just need to export this to um whichever file we want to import this from right so to export this we just say module dot exports equal to type defs like this and if we want to import this in our index.js we can just come here at the top and i'm just going to say something like const equal to require and i want to import from schema slash type devs like this and instead of here i just want to import the typedesk variable and it automatically puts it inside of here so now we're actually putting type definitions that we created into our apollo server but we still have to create the resolvers right because we told it to we said that there's a query called get all users which when we execute it it returns a list of users but this is not how graphql works like you still have to write code that that tells it to do that right because we can't just write a query like this and expect it to work directly we have to run a function which comes from the resolvers which here is where we actually make the database calls or where we deal with our data so basically a resolver is just a function that is called and executed when you call a query or a mutation so with the resolvers we basically just come over here and um create a variable called resolvers like this and inside of here we can basically define um it into two parts we can call we can create the resolvers for the queries like this and the resolver for the mutations but right now i'm actually not going to write the mutations because we haven't created any mutations yet let's just write the query so for the query we can write all the queries that we have in our application currently we only have one which is get all users so what we can do is we can right over here get all users and get all users will be a function so like this you just write it like this and it will deal with it as a function and inside of it we have to write all the logic the javascript logic behind this function so let's think about this we want to return a list of all the users so how do we do this since our example is pretty simple we just want to return the list that we have over here so the fake data right but if you had a database like a mysql database you can make the select statement here or if you have like a mongodb database you can write something like db.find or schema.find you know basically here's where you return the data where you tell it to return and the data that you get you basically pass it on the return statement like this so what we want to do is we want to import at the top the fake data first so um cost require dot dot slash fake data like this and instead of here we're going to grab the users which is the array that we created of fake data and basically we just want to return the users list so this is all we're doing because we're not actually dealing with anything we just want to return a list of users so what do we do now we have this resolver we have our query and this is basically working because it's a function that returns a list of users how do we check well we come here at the bottom and we first of all export um this resolver so resolvers like this and we import this in our index.js similar to what we did with our type definitions and i'm going to change this to resolvers and i'm going to change this to resolvers like this and now it automatically connects to this and it should be working um we actually um we're going to test this right now however i also want to install um node 1 which for those who don't know it's just a package which allows you to constantly be working through an application and debugging it while restoring the server every time you save your application so that we don't need to keep restoring your server right so i'm just gonna come over here and i'm just gonna create a script in our package.json very simply i'm just gonna say scripts pass a start script and say nodemon index.js and this will make node one run whenever we run the the command yarn start or if you're using npm you run npm start it should run node one so let's see if our server is actually working let's say yarn start and if it's working you should see server running on port 3001 and as you can see it's perfectly working over here so what we want to do now is we want to open up our google chrome or whatever you're using and go to the localhost 2001 which is the port we created you can see it says cannot get slash which is okay right we're thinking um is this working is this not working well the only way to check is to go to the only endpoint that exists in graphql so for those who don't know graphql only works only runs on one endpoint which is the slash graphql endpoint and when we go to this you can see a beautiful ui appears in our screen so you might think what is this well many of the graphql packages that exist in ojs they come with this kind of like api tester built into it which is really nice apollo server uses um a playground which is um really good i know that xbox graphql uses graphical which is another one which is also really good but basically over here you can test your api very simply um and as you can see on the left because i obviously tested um this code or this project that we're building before i got into the video um you can see that this is how we're actually going to run our query so basically um to run a query and i'm going to delete this just so you i can go over with you guys as well um we want to run a query that gets all user right we want to we just want to run it so that we can get the data how do we do it so when you're testing your api and when you make this api call in the front end all you have to do is write the following syntax you determine that this is a query and you open and close curly braces and then you put the name of the query so for example get all users then you open and close curly braces and over here you pass all the fields that you want to get from the get all users which we determined that all users should return a list of users so it automatically knows all the fields existing in users so you can see name appears and if i write age it automatically shows age and it also shows the type which is really good and we also want to see married so in this case what we can do is we can run this query and you should see the list of users being displayed in our screen which is beautiful right we can see each user but the beauty about graphql is we didn't need to specify exactly what fields it returned when creating the query when we make a query in the front end or wherever you want to make the query you can specify what you want to be returned so for example if i don't want to receive the married field because maybe i want to make her query go faster and i don't need the merit field i can just run it like this and you can see that it only returns the name and the age which is perfect for us now that we have our query done um you can see that it is perfectly working and this is how you actually structure your query but we want to deal with this better right we want to maybe um change this data a bit to see if it's actually working because currently we're just returning and displaying an array that's not that big of a deal right um so what do we do now well we're going to write our mutations so that maybe we can um i don't know add a user a new user to the to the list then see if that works so that will basically help you guys understand how mutations work so let's get into it let's create a mutation so how do we do it well we're going to come here to our type definitions and we need to create a type definition for a mutation so so for that it's actually pretty similar to the one for queries however there is some slight mute slide slight differences right so i'm going to come over here create a type called mutations or mutation and inside of it we can write similar to what what we did with query what mutations we want to create so i want to create a mutation and let's call it create user so basically we just add a new user to the database but the difference is that um over here we can tell what we want to return right similar to what we did with query and what do we want to return when we run this query well maybe in theory we don't need to return anything because we're just this is just meant to be a function that when we run it adds a user to the database or adds a user to our list however it's nice to have a visual confirmation that the user that we're trying to return to create is correct right so the data that we put in is correct so let's say that this will return a user right when we run this function we can see the user that we're trying to add however how do we tell like how do we pass variables to a mutation right because in the front end we might want to get the user information from a form so the user put their age their name their if they're married or not and then send it to our graphql api to add it to our list so how do we do that well it's it's like a function we take arguments so what you do is you put a parentheses over here and inside of here you determine all the fields that you want this function to take and what are the fields that we want well we want the fields that user has right we want them to pass a name and age and if they're married so we're just going to say name which is of type string then comma and you can pass an age which is of type int then we also want to pass in um the married right which is of type boolean and this is basically how you structure it you pass the name of the function for the mutation you're passing the parentheses which are the arguments inside of it and their types and also you pass whatever you want this mutation to return which is great but now we want to write um the resolver for this mutation so let's come over here to resolvers and as i mentioned before let's create a mutation um resolver over here and instead of here we can put all the resolvers are the mutations that we have so currently we only have a mutation called create user so that's how you write it over here however there's a difference previously we didn't put anything for the for the arguments of this function however now we need to put something because we need to get um the arguments that the user sent um in this request right because when we make this mutation we're going to send a value for name a value for age and a value for married right so with graphql and when you have a resolver there are actually four different arguments that there are built in and you can get from the request there's parent there's um args um there's context there's many right however i want you guys to just ignore them for now because they're not important at all for beginners um the only one that is really important is args which represents the arguments that um is sent in the request however to get to args args is actually the second one we have to also call parent but just ignore this for now you won't use it we just have to put it because rx is the second argument in the function so to get the data we need to actually do it like this and over here we want to um determine where who is the user right so we want to create a new user so let's create a variable called new user like this and set it equal to args args is an object containing the data that we passed over here so it would be an object containing the new name um the age the married information for the new user so we're just creating a variable called new user and set it equal to args so what we can do now is we can grab the array users and push the new user into this array almost like we're just inserting into our database this is what where you would write the insert statement into your database and at the end we also told our mutation to return a user so we can have a visual confirmation of if the user is actually correct if we put the correct information so let's do that let's let's just return at the end um the new user so that we can see if they are actually correct um and this is all the logic we have to do we're just pushing a new user to the array so what do we do now well we can just check to see if this is working let's come to our google chrome and open up our our our our playground i'm just going to refresh it so that it updates and i want to delete all of this and let's start writing the syntax for a mutation so what what is the syntax right well to create a mutation again pretty similar to query you just write mutation then inside of here you write the name of the mutation which is create user and inside of here it already knows the arguments that you've had you need to pass you can see it's already suggesting us to pass a name and agent married right so let's pass name and let's create a user called um michael and let's pass an age which is going to be of like something like 56 and let's pass them married and say that michael is married like this and oh accidentally erased it and at the end we also we are returning a user remember we should be returning a user with michael as the name 56 as the age and true as married so we might want to return here what we want to get from this request let's just return for now the age and married everything so when we run this what should happen is automatically we should return over here the right um the user called michael but at the same time it should be adding to our list a new user called michael let's see if this works when i run this you can see it shows us the data that we just created which it which works perfectly but at the same time let's run a query let's rerun the query get all users and see if now the list includes michael so let's run get all users grab name grab age and grab mary right so when we run this it should include michael so let's see what happens and as you can see here at the bottom michael beautifully appears here which means our mutation is working right we're adding stuff and if you want to run other mutations if you want to create mutations for like i'm changing the data uh maybe like deleting a user you can just come over here and create one called like delete user which i'm not going to show in this video because i wanted to keep this video short however this is the basic idea on how to set up an apollo graphql server um using express in your nodejs api so this is the basic idea and i really hope you guys enjoyed this video if you have any comments any suggestions or any doubts just leave a comment down below and i answer every single comment if you liked the video please leave a like and comment down below um subscribe if you're not subscribed because um it's been a lot of work posting three times a week i would really appreciate if you guys could help me grow the channel and yeah that's basically it i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 10,072

Rating: 4.9797468 out of 5

Keywords: crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, deved, pedro tech, graphql, learn graphql, apollo-server-express, apollo server, graphql tutorial, graphql beginner tutorial, apollo server express tutorial, apollo tutorial

Id: xCzm1bbOpfw

Length: 28min 0sec (1680 seconds)

Published: Tue Mar 23 2021