Hey guys , how's it going ?
I'm back here with another video .
And today I decided to basically create a beginner's video introducing how to work with graph QL for a front end using React .
And we're gonna be using a Polo client which is uh a way to interact with a graph two API and it is a really good library .
So uh in my opinion , it is probably the most the easiest one to start with .
And I'm gonna show you guys exactly how to do that .
So if you didn't see my last video , basically , I went over how to create a graphical API .
It is totally not , not necessary .
If you , if you already have a graphical API , you just want to know how to connect it with the front end .
But just to show you guys , this is what I created .
Not this over here , this over here , very simple API .
We have um the schemas , the only schema that we have is um a user which contains an ID , a first name , a last name , an email and a password and all of this data since I wanted to make this video fit for everyone not uh like a specific group of people using a specific group of like a specific database .
I'm using just a Jason like data you can see right here .
It's just a , a random data uh like data set containing a bunch of users .
You can see that each user has a first name , a last name and email and a password .
So that's basically what we're gonna be using as our fake database , right ?
So currently we have only 22 things that we can do in our application .
The first one , if you go here to your , to my schemas , the first one is a query and the query just returns to all the users very simple query .
Uh It's called get all users .
It just returns to every , every user and we have a mutation and this mutation specifically is just to create a user .
So you basically can see that it adds to the user data , a new user containing the information that we pass in .
And if you're not getting what I'm saying , like if you , if you don't understand uh what I'm showing , uh I'm gonna link up here the first video which basically I go over how to create the graphical API and you can watch that and then come back to this because this over here is really important as well .
So what we're gonna be doing now is we're gonna be implementing everything into a client using react because a lot of people will ask me and it's not , it's not similar to what people are used to do when you're working with the API , where you just make a , like an user request , an API call , a fetch request to , to your API , you need to use a little uh a library .
And in this case , we're gonna be using a Polo client .
So to do that , we're gonna come over here and we're going to basically just install our , our libraries , right ?
I'm going to CD into my , my client folder as you can see .
And in my client folder , I already have a React application .
There's nothing in it .
There's only the app dot S and you can see that the app dot S has nothing inside of it .
Uh Just a , just an empty tag and what you wanna do is you want to install two libraries .
So you're an ad .
Um The first one is a Polo slash client like this .
And the other one is Graph QL , just these two libraries .
And if you're using N PM , it is N PM , install Apollo client and N PM , install graph QL .
But uh I'm using yarn .
So it's literally just this , this right here .
Um I already installed it .
Um I'm gonna show you guys in my package dot Jason , it's over here .
Um Let me come here .
Yeah , Apollo client over here .
This is the version I'm using .
So if it's like for in the future .
And for some reason , the Apolo client , it's above uh version three .
So it's a bit different for versions two to less .
So that's important .
But if Apolo client changed in the future , I don't know , this is the version I'm using and you can see graphical is also installed over here .
So what do we actually want to do ?
Well , first of all , let's start creating our application , right ?
So in our app dot GS , what we wanna do is we wanna initially just uh set up our project so that it accepts graph QL .
So the first thing we have to do is we need to import some packages .
So I'm gonna import from Apollo client .
So from , at Apollo client , I wanna import some stuff .
So the first one is Apollo client .
Because we're gonna be using that to create our provider and then we're gonna be importing as well in memory cache because we wanna have cash in our , in our application .
We wanna import a Polo provider .
And obviously , if you're a beginner , don't worry about knowing what all of this do do does .
We're just going to be using those to set up our application .
And we're also gonna import something called from .
Uh you'll see why we need to build a link to connect to our API .
So from is just a um it's , it's a method from the Apollo client library which allows us to do that .
And finally , after we do this , we , we may be , we need to import a method of determining if there was any errors in our API uh we're gonna import it called on error from the packages uh at Apollo client slash um client .
No , it's not , it's not client , it's slash link , right ?
Um slash link .
Yeah , and slash error .
So a polo client contains an error library inside of it which contains ways to determine if to catch errors , right ?
So on error is in my opinion , the easiest way of doing this and I'll show you guys how to build this .
So basically , the fundamental idea of how to make your API work and react using a Polo client is you gotta come over here above your app dot Js in your parent , like your initial component , you have to create something that is the client .
The client will be just a way it , it will be um an instance of the Apollo client .
And this is how we're gonna determine if , if we have a correct connection or not .
So let's create a variable called the client and it's gonna be a new Apolo not a Polo provider , apolo client .
And inside of it , we have to pass an object containing two things .
First of all , it's a cache and we're gonna , as I mentioned before , we're gonna have um in memory cash .
Um This is not important in the beginning , but you can worry about that later .
And we're gonna have a link and the link will be basically the link to our back end to our server .
And obviously , we , we can't just put here local , not , not obviously , but we can just put the , the , the actual URL for the local host .
We have to make it a diff in a bit like AAA bit of a different way .
And this is why we actually imported the from thing over here .
And the HTTP link , we have to build an HTTP link over here .
And let's do that .
Let's create a link equals to and we're gonna use the from library .
And as I mentioned before , don't worry if you're a beginner and you're confused about this .
I was super confused and it's not very useful to understand everything uh in the beginning and just know that this is a good way to build your , your , basically , you start your graphical API .
So we're gonna use from the the from method and we're gonna pass an error link which we're gonna create , right , right .
Like right after this and then we're gonna pass a new HTTP link and Paz here .
Um The , basically the UR I , which is the URL for our API , which in my case , it is running on , you can see right here it's running on local host 6969 slash FQL .
So let's come over here and say local http , actually two slashes local host .
Let me close this local host , um 6969 slash graph QL .
And this is the link for my uh API , right ?
And why do we actually need an error link ?
Is because if there is any error , if graph QL catches any errors , we need to tell it what , what , like how we wanted it to respond .
I'm gonna show you guys a very simple way to catch errors and very simple way to like build this error catching system .
But this is definitely gonna be more use like in the future .
Uh If you wanna uh uh optimize this , then definitely do it .
This is just a way to not like car carry that much in the beginning .
But we're gonna create an error link .
It's just a link that that tells us like a uh a function that tells us what we want to do if there is any error .
So this is why we're gonna use on error and on error .
We just want to um come over here and grab two things , graph QL errors and network killers .
I wanna emphasize that if you're , if you're confused right now um to stick around because this , I honestly recommend just copy and paste this because it is definitely not important in the beginning , but it , it is necessary to start your API work , right .
So then we're gonna basically just ask if graphical errors .
And by the way , this is this sample , I'm I'm getting over here for the arrow link .
Actually , I believe I got this from the graph QL documentation .
So I didn't create this error catching system .
It's the simplest way that they demonstrate it to us .
So graph Q errors , um we're just gonna ask if there was any errors , then we wanna map through all the errors .
And then for every error , we're gonna grab the message , the error message also , maybe we want the location for the error and the path .
So those are the ones we might want .
And then what we wanna do is we wanna just uh for , well , since we're mapping , we want to do something for each of those errors .
And for now , let's just alert a message saying something like graph QL error and we wanna show it like this .
Let's let's just show the message right now .
So this is the basic idea of our error handling right here .
We're just showing uh any errors , right ?
And for now , I think that that's it .
This should be OK .
Um We can even ask if there was any network errors if you want .
Um I don't think that's totally necessary , but let me just check .
Um Maybe the if statement shouldn't be here .
No , that's correct .
Yeah , that's correct .
I think so .
Actually let's just leave it like this .
I think it's fine .
Um Let's come over here and now we have an error link for our link and we actually started our client .
So this right now , it's done for the setting up the graph uh connection and honestly just skip around after this because it's gonna get a lot more easier .
So now that we have this , we can basically wrap our whole application with an Apollo provider .
And what will this do basically between this Apollo provider tags is where you can reach all the like your , your , your graph API .
So it's gonna be served through these two components .
And we obviously need to pass a client and the client we're gonna pass is the client variable that we created over here .
And now we know that anywhere inside of it , we can easily just make , make requests to our API server .
And now that we have set up all of this , by the way , I need to put error here , I accidentally wrote it wrong now that we did all of this .
Let's create an example , right ?
Let me create a components folder .
I just wanna have two components .
One of them is going to demonstrate how to create a user , how to run a mutation on react .
And the other one is how to run a query on react , right ?
So the first one is gonna be a query .
So let me create a component called get users dot GS .
And I'm gonna use this snippet that I showed you guys in the last video .
Uh basically just to create everything , just a simple functional component which we just want to use it to render all the users in our application and to do this in and react , you gotta follow a simple recipe .
The recipe basically is that we need to create a folder in our application .
Actually , this isn't the recipe , but you need to create a file for your mutations and a file for a query .
So I like to create a folder called graph QL like this .
And instead of here , I put two files , one for mutations where I'm going to store all of my mutations and one for all my queries .
So this is what I'm gonna do queries dot GS .
And for the queries I wanna put over here , the query that I wanna make .
And what exactly is the query ?
So if you watched my last video , you know that this is a query .
This is the query we're making in our graphical um to , to basically get information from our API .
This is exactly what we got to put in our uh queries folder and qu Quri file .
And over here , the only thing we need to do is we need to import graph QL from Apollo client .
I like to call it GQL from an Apollo client .
And this variable right here will allow us to make a query and to make this query , we can just say I want to export this query .
So I wanna act so that I can access this query in whichever file I want to and let's call it , load users .
It's just gonna return all the users and it's gonna be equal to GQL and this GQL query .
Now we can now put inside of here , the whole query that we want .
By the way , I know it's weird to put this to like uh back quotes .
I don't know if you guys can see it clearly .
I'll try to zoom in for just a second .
It's you , you have to put all your query inside of these two quotes right here , which are like , I always forget the name , but they're like back quotes and I don't know why they did it like this .
Uh Honestly , it looks weird in my opinion , but it , this is what we have to do , right ?
And what do we actually put inside of here ?
Well , we put a query that we , that we have , right ?
That I taught you guys in the last video .
So let me put here a query .
Um This query basically says I wanna get all users and uh for each user that I get in my , like my , my data , I just wanna show the ID , the first name and the email and the password .
So this is basic idea of our query and this is fine now that we have our query done .
What do we wanna do is we gonna like actually use that query for something , right ?
So let's come here to our get users and let's start importing some stuff .
So the first thing I wanna import is the use query hook from um Apollo client .
So let's say import um from a Po a Polo client .
And we're gonna have some , some different um hooks that we wanna use , right ?
So the first one is use uh it's gonna allow us to get uh information from a query and we also need the graph QL to , to use it in order to actually get the data right .
So after we did that , after we did this , um we can simply come into our function , get users and we can come over here and say , and we can pass all the different information that we want to get from that query .
So if I say use query and I don't wanna get confusing , I don't want it to get confusing right now .
But the idea is you're gonna say constant use use query pass here , the query that you actually want .
So let's import the load users query that we just created .
Um And let's put a link to our graph QL slash queries file .
And over here we're gonna import load query , load users .
And what we wanna pass is load users inside of this use query .
So the use query hook is very simple .
You pass the the query that you wanna uh basically fetch , right , you wanna run , you wanna execute and over here you can get some sort of information , the information that you can get can range from any errors that occur to like if the data is actually just loading .
So it's a state basically , you can get loading to represent like if it's if the data is being fetched , but it hasn't been fetched yet .
And that could be useful sometimes .
But the most useful thing is the actual data .
So data right here will return the data from our query .
So now that we have this , what we have to do is I like to simply create a use effect , which is going to wait for this data to be done to , to be received .
And it's gonna be constantly obviously checking to see if we actually have received the data .
So I'm gonna pass here a news effect and the use effect will run infinitely until we actually there like as as long as there is a change in the data .
This basically if you've never , if you don't get this , I have a video for a full on video on news effect .
Basically , we're gonna wait for this data to change .
It's gonna run once before it actually loads and then when this variable changes , it's gonna run again so that it basically knows that we have new data coming in and now that we have this for now , let's just console dot log data just to see how our data looks like .
Um Let's actually try to , to make this work to do this , we're gonna come here to our Apollo provider .
I'm gonna import the um get users um component and let's make this run right .
So this isn't running .
Let me run your start .
It's gonna run .
Something is already running on port 3000 .
Um What exactly is running on 3000 ?
Oh my , my actual project is already running .
Ok , let me close this .
Um Oh , ok .
I I had a different terminal .
Sorry but yeah , this is the terminal you can see that for now .
We have to not only run our our react .
So it's running right now over here on local 3000 , but we also need to run our server .
So I'm running here , node index dot GS .
It says server running .
Let me run that coming in again and now it's running again .
So let's check here .
Um The way we build it , it's , it's , it's supposed to , whenever I run this over here , it's gonna return some data as you can see right here .
So we're returning , get all users .
It's an array of 1000 elements .
And you can see that it's actually an object containing a property called get all users and that contains an array of 1000 objects .
I'm not gonna actually get all the , all the , all the elements .
Should I get them ?
Um No , it's , it's too many , it's , it's too much data to just display it in my screen .
But you can see that we actually got the data from our um API which is awesome , right ?
So what I actually wanna do is I just wanna display like the first .
So let me come over here and I want to create a state and the state will just be a list of users , right ?
Constant um list .
I , I'll just call it users and set users .
It's just a a list of users , it's gonna be equal to use state and it's gonna be an array .
And in order to make our , our actually users appear in our screen , we're just gonna say set users equal to um the data dot get , let , let me look at the console log again , it's an object containing um get all users .
So this is what we need to put dot Get all users and then get all users is an array containing a bunch of arrays and actually just want to get the first one .
So let me just say zero .
And now we can come here to our uh div and we can just say something like um users dot map and I wanna map through every user and let's just grab the value and for each value right here , let me just close this and this .
So you guys can clearly see it for each user .
I just wanna return the name of the user for now .
So let me just return V dot First name because that's something that we have in our application .
So let's see if that works .
Let's refresh our page , um cannot read , get all users of undefined .
That's because we actually haven't received our data yet .
So let's ask if , if data .
So that's something important .
We're gonna ask if data only if the data has been received , we wanna set all users to be equal to this .
So we gotta wait for the data to actually be received .
So let's check this and users dot map is not a function .
Why is it not a function ?
This should actually be a function .
Um Let me see what exactly would be console dot log .
Um Get uh data dot get all users zero .
Let me just check to see what exactly is is this ?
So let's see .
Apparently it is .
Yeah , it's an array , right ?
Oh No , it's not actually an array .
It's just a , it's just AAA person which is weird .
Let me look and get all users .
Um Oh OK .
It's uh it's not an array of arrays .
It's like it's just that the console log divides it this way .
So what I'm gonna do is I'm just gonna instead of saying console uh get all user zero , I'm gonna just set users to every single user and it's gonna be huge .
But yeah , you can see we have all of our users being displayed here .
We got that from our API .
The API is over here .
You can see that if I run this , we get all the users .
So it's the same users .
And obviously this is 1000 different users being displayed in our screen , which is , yeah , it's , it's OK .
So now that we have this , I'm actually not gonna not gonna be displaying this , I just wanted to show you guys how to do this .
Um I'm gonna show you guys exactly how to actually work with mutations .
So if I were to have a form where I want to create a new user , how would I actually send that data to our graph QL API ?
And I actually make the run the mutation , right ?
So insert the data into our database or into whatever you can see that the last element here and all the users is called Adrians .
And this is something that I emphasized in the last video because we're gonna be adding and currently the last element is ID 1000 because we have 1000 users .
I'm gonna be adding another user through this mutation and it's gonna be called Pedro , which is my name and it's gonna be of ID 1001 .
If you want to see the , the , the behind the scenes of creating this API mutation on the back end again , watch my last video because I showed exactly how to do that .
But what I'm gonna do right now is I'm actually going to build a component here , not a , not a folder , a component called form dot GS it's just gonna be a uh uh a simple form um that is going to contain like a way of different inputs , like first name , last name , email , password and a button to send that data .
And I'm gonna come back after I just created the simple form because it , it isn't useful to know how to create a form for this .
The , the , the important information is actually making the form be submitted to our API so I'll be back in a second .
OK , guys .
So I'm back right here .
And you can see that I created a very simple form as you can see nothing to fancy or anything .
I just created a form called that has like inputs , first name , last name , email and password .
I created four states .
Um Over here , one for each input , I also need to import the state and I created one for each input .
And basically what I do is whenever you write on the input , it just sets the value for the state to be the value for the input .
Very simple stuff over here , just making the form work , right ?
And at the bottom I have a button which when you click on it , it says add users .
So let's actually import in our app dot GS .
Let's remove , get users because we don't actually want to use that right now .
We just want to use form .
And by the way , when I write form , it's being automatically imported over here .
So you can see get users in form are being imported .
So if you go here to our app react like the the react tab , you can see that the form appears here .
I don't care about it , how it looks .
I just want to make it work .
I'm gonna zoom in .
As you can see , it's a very ugly form , but obviously , uh it's very simple as I mentioned before .
So what do we actually want to do here in our form dot GS to send this data to our graph QL ?
Well , the first thing we actually wanna do is not even inside of the form dot We wanna come to our graph UL folder and write our whole mutation .
So , so what exact I showed you guys what a mutation looks like in graph QL before it's a bit different from a query , it's a little bit more complicated .
But um instead of just copying and pasting from what I did before , I'm , I'm gonna show you guys how to create it from here because we , I , I didn't save what the last mutation that I showed you guys .
So basically to create a mutation , we're gonna do it very si very similar to what we did with a quri .
We're gonna in export a variable called , let's call it , create um create user mutation , something like this and it's gonna be equal to GQL .
And just like before we're gonna put the back quotes to , to write the mutation inside of here .
And now with the mutation , we gotta write the word mutation like this mu mutation , then the name of the function of our mutation .
So if you recall in our API over here , I'm gonna open up the server folder in our API in uh where , where we defined our mutation .
Um There's the name of the function , right ?
Create user just like the name of the query has to be the same .
So ghetto users , we used get our users for a query .
We need to put create users similar to this .
So let me just copy , create user over here .
And the format for a mutation is very simple .
It's very simple .
Basically , it's almost like a function .
You put create user and instead of your , you have to call create user again , but it's a bit different and I'll show you guys why .
And then after the create user again , you need to put again .
Um the the breezes , what happens is at the top here , you have to define the arguments that are gonna receive , right ?
And also the type of the arguments you're gonna receive .
So for example , for a create user , we want to receive a first name .
And for each variable , you have to put a dollar sign or a a money sign and you gotta put first name and you're gonna define that it is a stream like this uh similar to what we did in their back end , we're gonna do it this way .
Then we're gonna put the next element uh which is last name , right ?
So I'm gonna come over here and say last name .
It's also a string .
Then email is also a string , um string .
And then let me see .
Oh I forgot to put the , the money sign over here , money sign , then password .
It's also a string .
So this is basically the idea we're just uh defining the types of the variables and the variables itself .
And on the other create user , the one down here , we have to just grab uh the arguments .
So put first name and actually , now we're saying the first name is off type first name and I know this looks super weird .
Um I literally don't know why they do this this way , but this is how it , they actually do it .
So I would just recommend doing it this way and honestly , I would do it .
I , I would actually put a like a , a space between stuff um Just so that we have a better view of it .
So like this just put a uh an just press enter for each one of them .
And here for the create user , we're gonna do the same thing .
So for first name , uh it's gonna be like this and then for last name , it's gonna be at last name .
This is quite boring .
But basically this is what you gotta do and email is email and then password is password .
So I have those variables that we wanna actually insert into our database .
And then down here is what happens after the mutation .
So after this right here , right ?
So in instead of these two braces is what happens after the mutation is done .
So we can actually return something , for example , if I just created this user , but I actually want to keep track of their first name , for example .
So let me , let me write first name .
I wanna just receive the first name as a return from the mutation , right ?
Or I can put an ID , I can put whatever I want .
I'm gonna put an ID actually .
So this is the basic idea , this is how you create a mutation in your graph QL uh application in your react , right ?
So after we are done with this mutation , we gotta start working in our form dot GS component by basically start importing this actual mutation .
So let's come over here and say import and again from our graph QL folder .
But this time it's from the mutations file .
We wanna import create user mutation .
And we also need to import the use mutation hook which is different from the use query hook that we had before .
So use mutation from um a Polo client .
It's a hook from a Polo client and we're gonna be using that to actually make the mutation .
So in order to make that mutation .
We're gonna come here somewhere in application before we actually want to insert the data .
So up here , I wanna insert the data in this add user function that we created .
So up here , what I wanna do is I just wanna create um call the user mutation hook like this and pass the create user mutation similar to what we did with the query again .
But the arguments that we get from the query from , from the mutation is a bit different .
So the first argument we can get is the actual function that we're gonna be using to create the user called create user .
It has to be the same as the one you put down here uh on your , no , not down here on your um index dot GS .
So create user .
So over here we're gonna say create user and then we can maybe grab some error that occurred in the while creating the mutation .
And this is the actual standard .
So you can see clearly , I don't wanna confuse any of you guys .
It's different from the query .
So it's actually you're using square brackets and to get the error , you would need to put a curly braces .
When with the query , if I come here to get users , it's not square brackets , it's curly braces and then you just put the variables like this .
I have no idea why they made it different .
Um But I'm not gonna like it's just , I don't know why they did it this way .
But now that we have the create user function , create user is a function that we can just use and pass in arguments and it's automatically going to make the API call .
So let's come over here instead of our add user , we wanna call create user and create user .
Very simply , you just gotta pass the object containing the variables that you wanna insert .
But it also needs to first grab a , it needs to have an argument called variables .
And then the variables that we want to insert needs to be inside of this variables argument .
So it's an object containing 11 property called variables .
And this variables property contains an object containing all the data that we wanna send .
I know that seems a bit confusing .
But as you work on it , you'll definitely get it .
So the variables we wanna send is first name and we want to give it the value for our input , called first name .
And then we wanna send last name , which is going to be last name , then email , which is going to be email and password , which is going to be password .
So we're just passing exactly the format of our create user variables and we're passing the values for our inputs , which are our states over here that I create it outside of the video because it's not important for this video .
So now that we have this we might also want to check to see if there was any errors .
So to check error , very simple , you can just say if error , right ?
If error , if there was any errors , I wanna pronounce console dot log error .
I don't think there's gonna be any errors , but this is the idea , right ?
And now that we have this done , we can actually test to see if our mutation is working .
So let's come over here .
Um I'm gonna open my inspect , I'm gonna refresh this .
I don't know if there's gonna Yeah , there's no console log , but I just want to open up .
If there is any errors , we can check it immediately .
But you can see clearly that when I run the get users query , uh a bunch of users appear here to the right and the last user is called Adrian's of ID 1000 .
Now let's try to run and create a user here .
So I'm gonna create this right here .
Um My shadow and I'm actually gonna put a random email at gmail dot com and the password is gonna be um subscribe .
This is the information we put right when I click create user , we don't get anything like immediately because you can obviously do that uh later like what you want , what you want it to happen when you create a user .
But if we come here to our network tab , you can see that there was a graph Q request made , as you can see , it says graph QL and it was actually a mutation which basically just sends the data and it says that the status was 200 .
So let's check if that worked .
Let's come here to our graphical and , and get all users again and see if we actually have a new user in our data .
Let's refresh this .
If I go to the last element , you can see clearly that now there's a AAA user of idea 1000 and one called Pedro .
Uh His email is AD D whatever we put and the password is subscribed .
So this is the idea we can add how many users we want .
Uh we're making the request , we didn't get any errors .
And this is the basic idea of making a mutation work .
So that's basically it .
I really hope you guys enjoyed this video because it's a , it was actually a hassle to make this video because I know it's pretty long uh teaching a Polo client and teaching how to work with is really hard in the beginning .
And I'm currently in the midst of like so much work .
That's why I actually didn't post yesterday .
But I really hope you guys enjoyed this video .
Uh If you enjoyed it , please leave a like comment down below .
Uh comment down below and you ask questions you guys ask because if you look at my channel , I answer every single comment .
I try to help everyone have a discord where I help a lot of people .
So if you're interested in that , the link is in the description , subscribe because I'm posting every single day and I see you guys next time .