React With GraphQL (Apollo Client) Crash Course

hello everybody welcome back to the channel in this video what we're going to be doing is talking about how we can interact with a graphql server through our client-side application and specifically for this crash course our client-side application is going to be a react application but these same concepts are going to be applicable whether it is a view application or an angular application or any other application so let's just first talk about how we typically interact with our server if we had a typical rest api so let's say we had a client and we had a server that uh is responsible for you know getting all of our foods adding food and uh you know sending food to the client so what would we have to do in order to uh get this kind of information from our server well our client is gonna have to make some sort of http request so over here we have an http request over here it says my api so whatever this api is called each api is going to have a unique url and then over here we are pending slash foods meaning that hey i want an array of old food so the server is going to get this route and it's going to execute some logic and then at the end of the day what it's going to do is going to retrieve all of the uh food and it's going to go ahead and send it to the client so it could look something like this it could look like an array of objects where the object has a name which which is the food itself hotdog category lunch image some sort of url and then an invented by maybe we want that type of information and it sends that array to the client and then the client is going to go ahead and just well do whatever it is that is going to do with it maybe it's going to iterate over the array and render it now one thing that i want to note about this approach is the client really has no control about the data that it's going to get back it has some control it's saying that hey i want to get back an array of foods because we're hitting specifically this route over here but it really has no control as to well what properties it wants that's really up to the server in this case the server is just going to get the data and return the data so this isn't a great approach for our client because maybe there's different aspects of our application that need to perform this query and get this data but they need different pieces of well information for example maybe a piece of our client all it needs to do is just render the image of the food as well as the name of the food well in this case it would be great if i can query the server and just get back an array of objects where i just have the name and i also just have the image but i don't have the category and i don't have the invented by but then maybe there is another aspect of our application where i just need the image as well as the category so you know you guys can kind of see what i mean here with this what we could possibly do is just create hundreds and hundreds of different routes that kind of accommodate for this or we can just build a graphql server a graphql server is going to allow us to query for exactly what we want and there's a lot of different benefits but for this simple crash course that is all i'm going to leave it at and instead of showing you guys through a presentation let's actually go ahead and let's look at how this works so there's a really cool graphql server that was created for us already called the rick and morty api dot com slash graphql and what i'm going to do is i'm going to link this in the description below so over here what this is is a graphql playground so really all this is doing is simulating how we would query for data inside of our real client side application so remember if i wanted to get a list of characters maybe i wanted to get all of the lists of characters from rick and morty in a typical rest application i would probably make a request like this so i'd have the api itself and then i would make slash characters so slash characters and what this would probably do is to go ahead and give me a list of all the characters now in graphql you don't do it this way actually what you do is you define exactly what it is that you want so let's go ahead here and i encourage you to do this with me first of all that we have to do is specify that we want to query our data so we want to do a query there's different things that we could do we could do a query we could also do a mutation mutation is changing updating adding you know changing our data in some way we can also do a subscription that we won't get into that's kind of a more advanced and and niche concept so over here let me just get rid of this if i can over here the first thing that we want to say is we want to query data okay and now over here now what we have to do is define okay what do we want to query and what's great about graphql is that it's self documented you can actually go to the docs here and you can see all of the different queries that we can perform if this is too much for you do not worry we will we will you guys will understand this is just kind of a quick introduction so uh you can see here all of the different queries that you can perform so let's say we want to get a list of all characters over here we're going to say characters so we're going to say characters and then we have to define exactly what properties we want so if you actually click on the characters you can see here that uh this has two uh different fields info and results so we're gonna say here that we want the results so to do that we're gonna have to put curly braces and then here we're going to say that we want the results and now going into the results we can here specify okay well we want the name we want the image we want the type because you can specify whatever it is that we want so over here what we can say is i want the name maybe i want the image as well as the id and if i were to make this query you can see here that i get back some data so you can see here that right here i get an array where each object has an id a name and an image similar over here i get an id name and an image so really it's kind of i'm getting back the same kind of data i'm getting back a json object however the way that i'm interacting with my server is very different and it's a lot more flexible so right now you can see here that i have an id a name and an image well i can also query if i wanted to maybe later on maybe i can also query for their type whatever or maybe their gender because i don't really understand what type is so i can go ahead and query for this and now i get id name image as well as gender and that right there is the power of graph ql and we're going to learn exactly not how to implement a graphql server i already have a crash course on this and i am thinking about making a udemy course a very in-depth udemy course about graphql so i might link that in the description below as well but right now we're going to assume that the graphql server is already created and it is already created we're going to be using this rick and morty api all we're going to do in this crash course is learn how we can perform these types of queries and get data from our react application so let us get right into it in this section what we're going to be doing is learning how we can connect our react application to our graphql server so to do this of course what we're going to need to do is create a react application and i do expect you to well know how to do this if you don't just open up your terminal and run this command right over here npx create react app and then give your react app a name then go ahead and open your react app in your favorite code editor mine is well vs code and over here we have just a very boilerplate and simple react application again i do expect you to know react if you want to learn how to connect a react app to a graphql server so i'm not going to be learning i'm not going to be teaching you react i'm going to be teaching you how we can do the connection all right so over here we have our react application and what we want to eventually do is is connect it to that rick and morty api so you know let's actually go over here we want to connect it to this api over here so this is the route that we want to connect it to let me just comment that this is the route that we want to connect it to and what's great about graphql is there's only one route and one route only no matter what the data it is that we want we only have this one route that we connect to there's only one single endpoint so how do we connect to this well there's multiple different frameworks that we can use in order to use graphql in the client side there's so many out there but the premise of them really is the same and for this crash course we're going to use apollo client because i think it is by far one of the more popular ones and the more widely used so what we're going to do here is we're going to go to our terminal and inside of our react app we need to do some installations so we can do npm install and what we want to do is we want to install at apollo and then client and this is a tool that we're going to utilize to connect to our graphql server or well in this case somebody else's graphql server which is their rick and morty uh server so we're gonna install this and then we're also gonna install another package called graphql which is needed for well interpreting graphql queries and mutations so let's go ahead and let's just install this in our local machine or not our local machine inside of our react application hopefully this doesn't take take too long but now once this has finished downloading what we need to do is again we we've done the installation but now we need to connect our react application to our rick and morty graphql server so how do we do this well we're gonna do this by going over here to our index.js file remember this is the file that contains the root of our application and we're going to import some things so we're going to go ahead and we're going to import and we're going to import something from at apollo client now what is this thing well we're going to import apollo client and in memory cache so we're going to go ahead and import these two very very important things and now what we're going to do is we want to go ahead and create our application our client so our client is going to be const client and then we're going to do a new apollo client and then over here we're gonna have to supply it with two parameters the uri and the uri in this case is this over here so we're gonna go ahead and supply it with that and then we're gonna also have to supply it with a cache and this is why we had the in memory cache so what's actually great about graphql and apollo is that if we were to query once what it's going to do is it's going to memorize that query and if we were to make that same query again instead of hitting the graphql server it's going to hit the cache and this is where the in-memory cache comes into place so over here this is the client which is going to have all the information about our graphql server but now we need to connect it to our react application to do this we will use another uh very important uh very important uh component called the apollo provider and this is going to be a react component that we're going to wrap our whole application in so we're going to wrap our application in this and we're going to supply it with a prop called client and that is going to be the client that we have created over here so remember the client is is is telling us let me put a comma here the client is telling us that this is the graphql endpoint and thus we want to make queries to this graphql endpoint the the apollo provider which is wrapping our whole application is taking that client and thus making that interpretation and that's really all you need to do in order to connect your react application to your graphql server in this section what we want to do is create our very first query and so let's actually talk about what the query is so what i want to do is i want to display all of the characters inside of rick and morty and so what i want to display is just the image of the character as well as their name so how is the query going to look like well it's going to look very similar to this except maybe well definitely i do not want the gender i'll probably still want the id and the name and the image so i'm going to go ahead and query for this and i'm going to get this data back inside of our client application and then what we're going to be doing is well iterating over this array and rendering each card so let's go ahead and do this right now and i actually noticed something and hopefully this isn't uh hopefully you didn't try to run your application this over here should actually be new in memory cache apologies for that so let's go ahead and let's just try to run our application and what i'm going to do is i'm going to do a yarn start you can do mpm start i'm going to do yarn start so i'm going to go here and sure whatever let's go here and it seems like it's running the application on localhost 3000 so let's go to locals thirty thousand and we should see our wonderful application let me just minimize this over here okay cool so we have our wonderful application and i wonder if you would have gotten an error if this wasn't new i guess not or i guess you would have so hopefully you guys didn't try to run it apologies for that hopefully you guys caught it all right so now what we want to do is well we have ran our application now we want to do is we want to make a query so let's go ahead here and let's uh create a directory and this is going to be the pages directory and in here i'm going to have a characters list uh component so i'm gonna have a character list.jsx i'm gonna do rfc for getting a uh just a quick component up and running and what i'm going to do is i'm going to go to the index.css and i'm going to completely remove all the styles and i'm going to go to the app.css so i'm inside of the app.css i'm going to remove everything except i'm going to give the app a max width of 70 rams and then we're going to have a margin of 10 rams and then auto we're not going to be doing a lot of styling this isn't going to be the prettiest application and so over here what we're going to be doing is we're going to go into our app.js and then we are going to be removing many of the uh uh boilerplate that we have over here so let's actually go ahead and let's do that right now so we're gonna go here and we're going to remove all of this and we're going to go ahead and save this let's save that as well and now if i were to make a nice little refresh you can see we have a very very empty and boilerplate application okay very very cool so now let's go to our character list component from where is that let's actually get rid of this this is kind of getting annoying so now what i want to do is that inside of this character list application i want to query for those characters and then what i want to do is we'll render those characters so how do we query for characters let me zoom in here well how do we query for anything inside of graphql well to do this what we're going to do is we're going to import a very special hook that we get from apollo client and this is the use query hook the use query hook a very very special and important hook that we need to utilize in order to query our data you're going to realize how amazing this hook is and it's going to make your life so much easier so the way that this hook works is we do const and then we get back some things that we can destructure so we get back something for now i'm just going to say something and then we're going to say that this is equal to the use query hook and then in here in here we have to specify that graphql query so right in here we have to specify the graphql query that we want to create so or we want to execute so in this case the great this the graphql query is this one over here so you might be thinking well i can just have a string in here and i can add this graphql query or how do i add this graphql queries you're probably what you might be thinking well the way we can add graphql queries is by utilizing something called gql so gql and we also get this from at apollo client so outside of the component what we do is we give our graphql query a name and typically it's all in capital letters and it's a snake case as well so we can say get characters so this is the name of our graphql query and then we can say this is equal to gql and then we have the template literals so we have two template literals so this is gonna be in the far left uh right above the tab bar if you're on mac i'm not really sure what it is on windows but it's it's it's the uh it's uh there's also a tilde sign right next to it so over here these are the template literals and then in here you can actually paste in your query now i get this really cool syntax highlighting because i have installed a graphql extension on um on my mac that does the syntax highlighting but if but if you don't have it it might just be like a regular string for you so i highly suggest to install this so right now this is our query and what we can do now is paste that query inside of the use query hook and now actually what we end up getting is well okay what is this something that we get well the something that we get is an object and so we get this object so let's actually just change this to object and we get three main properties we get object dot error we get object dot loading and then we get object dot data so you might be thinking volume this might make some sense so right now object.error is going to be well just an error so if an error happens it's going to be populated inside of object.error so we can actually catch this and do something with our application object.loading is a boolean value is our application loading at the moment meaning is it fetching the data and you know when we fetch data there's a there's a period of time where it's not instant there's there's a period of time where the application is loading to get our data so is that true or not so this can be very useful if you want to display some sort of spinner or whatever then object.data is our actual data so let's actually log all of these and to kind of simplify it and this is how it's typically done let's just destructure out everything so we want error we want data and we want loading and what i want to do is i want to console.log this and when you use use query this is going to be called as soon as the component is rendered so we're going to go here we're going to say we're going to console.log the error the data and then the loading status let's actually put the data let's actually put the data here at the very end and so let's go ahead and let's see let's see the logs so let's inspect this and of course we're not going to see anything because uh for one it's very small for you guys and for two we haven't rendered this component anywhere so let's go back into our app.js file and then in here we're gonna do characters list i'm going to auto import it so go ahead and auto import that and now let's refresh you can see here well we get some data so you can see here error at the moment is undefined because there's no errors loading is true okay so this is this is really great so it's it's in the process of fetching our data so it's telling us loading is true this might take some time maybe you should display some sort of spinner at the moment and then data is undefined and then after a while so after it was able to fetch it now error is undefined loading is false and hopefully this is big enough for you guys so error is undefined loading is false and then we get back some data so you can see here the data is characters and then results and we have this array of results so now what we can do here is we can actually account for all of this so let's go here we're going to say well if it's loading then let's return some sort of spinner i'm not going to actually return a spinner i'm just going to be very lazy and just say spinner inside of a dip that's how lazy i am so now what we can do if i were to refresh this you can very faintly see that we have a spinner let's actually zoom in here a little bit very faintly you can see here that we have a loading state now obviously this loading state is very ugly you can make it as pretty as you want so over here we have error or loading but result we should also account for error so let's over here say maybe an error happened in case an error happened i want to say something went wrong you can have a great error response here or nice ui um but for here who cares so right now well no error is happening but let's say we messed up our query so if you mess up our query and we ask for something that doesn't exist in the schema like let's say instead of saying name we say n-a-m because we're not very smart and we don't know how to spell you can see here if i were to refresh we have a quick little loading state and then we have something went wrong so over here we can actually display an error state now an error state doesn't always have to occur because we made some sort of schema sometimes we want to actually throw an error inside of our client if maybe um the user did something that they're not really supposed to be doing or we weren't able to do something inside of our client so over here we have this error state let's actually fix the query and now what we want to do is let's go ahead and let's actually render our component so let's give this a quick class name and we're going to give this a class name of character list and in here we're going to go ahead and we're gonna say data dot characters dot results dot map and then we're gonna say for each character what i wanna do is i want to return some sort of card component so we want to return some sort of card component so over here uh let me uh i'm wondering should we create a separate component or should we just slowly rely on you know what let's just just not create a component i feel like that would kind of take away from what we're trying to do here so what i want to do here is let's just create a div so what we're going to do is we're going to return a div and then inside of this div inside of this div we're going to have an image and then this image is going to have a source value of character dot image and we're also going to have an h2 h2 of character dot name and so now you can see here that we're getting back all of our characters which is really cool i i i really do enjoy this now we gave this a class so let's just quickly fix the styling over here uh so let's go here let's create a character list dot css file and then in here we're simply just going to display flex lists if you don't know flex i do have a flexbox crash course and then what we're going to do is we're going to do is do flex wrap and we're going to say wrap wrap it all please wrap it all and then in here what we're going to need to do is import character list dot css so now we have this we can also do something like justify content so yeah justify content we can do space let's do space evenly so we have nice even spacing wonderful so you can see here we have we are able to actually query this data from our client-side application which is amazing you can see here we can have a nice spinner state and we can fetch our data so again i am pretty happy about this uh but there's kind of a problem here what if in our uh in in another part of our application we need to make this exact same query uh so it seems kind of redundant the way that we're doing this we're going to have to create this over here and then we're going to have to do this and then we will and then we're going to have to of course do well this is we're going to have to do this regardless but it's redundant that i have to always create this query and then have this use query hook and import all these things so how can we fix this well we can actually fix this by putting all this logic inside of its own custom hook and that is what we will be doing in this section what we're going to be doing is creating that query hook that i was talking about so let's actually do that by creating a hooks directory inside of the source directory and then in here we're going to create a use characters dot js file and this is going to be a very simple function so over here we're going to have a very simple function called use characters and we're going to go ahead and export this function out now inside of this function what we want to do is execute the query that we want and what is the query that we want well we want this query over here so let's actually go ahead and let's paste that in there and let's paste in these imports as well because we're going to need gql from apollo server and so what this is going to do is we have this query over here now what this function is going to do anytime that we call this function it is going to make this exact same call over here the use query call and then what we're going to do is we're just going to very simply return the error the data as well as the loading state and so now what we can do and you can see here this is a very simple thing that we did now what we can do is we can just go over here completely get rid of all of this stuff and simply just import the use characters uh hook that we have created and you can see here auto imported and we can just call this hook so now what we can do is we can say you can say we want the error the loading state as well as the data from the use characters hook and we want to invoke this use characters hook and so over here very very simple and if i were to go back to my application it still works the exact same way and what's great about this is now we can reuse this hook anywhere we want so anywhere we want to reuse this hook we can just go ahead and reuse it so this is a very common way of fetching data in graphql in this section what we're going to be doing is figuring out how we can deal with queries that have variables within them for example let's say what i want to do is when i click on a specific card over here i want to be redirected to a new page that shows the image the name the gender as well as all of the episodes that that character has been in how do we do that well to do that well we're not we're not going to do the characters query rather we're going to do the character query that you see here we're going to supply it with an id and so if we were to execute this we get the character with the id of 4. if i were to change this to 2 you can see here that this changes to the id of two so how do we do this well let's actually go here and what i want to do is let's let's create the functionality where when we click on a card it redirects them to a brand new page so to do this what we're going to need to do is we're going to need to install react router dom so let's do yarn add reactor or dom you can do mpm install reactor error dom same thing so let's wait here okay cool and now what we want to do is we want to get that browser router and wrap it inside of our application so we can do browser router you can see here i got it from browser router we're gonna wrap this this is just basic react i do expect you to know this sorry if you don't uh but yeah so now we have wrapped our application in browser router so in here what we can do is we can have a switch that we get also from react router and then inside of this switch we're gonna have our routes so over here we're gonna have our routes so we can go ahead and you may also have to install react router i'm not sure if reactor order dom comes with this or not because i already actually pre-installed this so if you if you can't get the switch statement just do npm install react router so now we want our route let's auto import that in as well we're going to say strict exact and we're going to say that the path so if we are in the root path which is just a slash we want to render the uh the characters list component so that's the that's the component that we want to render and so this shouldn't change anything inside of our application and it doesn't let's also add another route here and we're gonna have this is going to be anything that is slash and then id so this is what we're saying here any any sort of id and over here we're going to render another page and we're going to call this page what should we call this page well let's just call this page character dot js very very simple page let's create a component here and in this uh in this page well what we're going to do is we're going to render the character and we're going to call out that query so in here let's go and let's just say character auto import that in save that now if you were to go to slash whatever you should get that page and just to prove it to you if i were to say this we get that you get this text all right awesome so now what we want to do is we want to make that query now we could again make this query inside of this file but let's actually create a hook for this we're going to say use character dot js and so let's just copy everything that we have inside actually you know what let's just do it from scratch so the first thing that we need to do is the query so this is the query that we want to execute so let's go here and we're going to call this query get character so we're just getting one character and we're going to say that this is equal to and remember how we have it over in the other hook is equal to graphql so gql so auto import that in and this is getting it from tag so i'll i want to get it from apollo client so let's specify that gql from apollo client and we want to run this query over here but right now we're hard coding the id of two so how do we dynamically generate the id well to do this inside or right after the query so right after we have specified that we want to do a query let's give the query a name so we're going to call this get characters or get character and then in here we're going to specify that this query is going to take in an id and to do this we're going to say dollar sign id that's the name of the variable and then we have to define the type of it is it a number is it a string is it a boolean in this case this is a very special type known as the id type we're going to specify it with a bank saying that you absolutely need to provide it in order to run this query and then this id we can inject it right over here into this query and so now let's actually create the use character hook and this used character hook is going to take in an id and then over here we're going to get data error and then loading and then we're going to get that from the use query hook we're going to say here that we want to run the get characters but now how do we get this id inside of this query over here well as the second parameter this takes in an object of options and one of the options is the variables object so over here we can specify all of the variables inside of an object in this case we have the id so we can specify this id and put it in there and then so lastly now what we can do is simply just return data error and loading very very simple and easy so now let's go ahead and let's export this out and now what we want to do is let's go to our character components and so over here all we're gonna have to do is just simply execute this component so in here what we're going to do is very simply we're going to do const data loading error and that's equal to the use character hook that we have created again notice that i auto imported it now of course you have to provide it with an id for now let's just hard code the id of four we're just gonna hard code that in because why not so let's go ahead and as usual it's just console.log the error the loading and the the the data save that so now let's go here and so okay so you can see here we have oh we got our we got our data right away it seems let's just refresh this here so okay so right now undefined true the data is undefined but now we get our data and you can see that our data is uh the character with an id of four that's because we have four here if i were to change this to five you can see here that now our character is the character with an id of five which is jerry smith all right cool so now what we can do is we can actually render everything inside of this uh component so let's uh this is just going to be a little bit of react this isn't really going to be anything special let's actually give this a class name of character and let's also create a character.css file character.css file and ideally you have these in your own directory but i kind of forgot about that so apologies for that and so in here we're going to do just a little bit of styling and so um what we're going to do is we're going to have let me just check my notes here i actually do not remember what we have here so we're going to have the character and we're going to display flex here and we're also going to have another uh uh class over here called character content we're going to have this have a margin left of two rams and then lastly we're gonna also have a character episode and this is gonna have a margin top of two rams so that's really all we're gonna have and then in here we're gonna go ahead and import that css file in so let's have character.css so we can have the styles and so in here what we're going to do is let's do the whole you know if error then return something went wrong because we have to do that of course so something went wrong of course you can have better better elements in here if loading you can have some sort of spinner and then over here well we're gonna have our actual component so over here we're gonna have an image so we're gonna have our image and then the image is going to be data dot character dot image let's also give this image a width of 750 pixels as well as a height of 750 pixels as well and then we're going to also have a div and then inside of this div we're going to give it that class of character content character content and then in here we're going to have an h1 that's going to display the character's name so we can say data dot character dot name let's also display their gender in a p tag so we can say data dot character dot gender okay very very cool and then we want to display the episodes and so this is actually a div and so we're going to say or this is a list so what we're going to have to do is just create a container that's going to contain all this stuff so we're gonna say character and then we're gonna say episode episode and then what we're gonna do is we're going to iterate over the character dot episode dot map and then for each episode what we're gonna do is return let's just return to div we're gonna return a div and i did this all wrong no i did this all wrong let's go here there we go what we're going to do is we're going to return a div you can add a key here you should add a key here but i'm too lazy uh so uh we're gonna have episode dot name and then we're gonna do in bold so let's use a b tag for bold we're gonna have the episode episode episode dot episode so this is just simple react and there we go let me just zoom out here you can see that we have jerry and then we have well all of these episodes here that he has been in so now if i were to change this to maybe two you can see here we have now morty and all the episodes that he has been in now one thing is um we want to dynamically generate it so ideally what we can do actually is we can go to our character list component and we can change this from being a div to being a link tag so you can say link and what this can do is it can link to so this can say two and it's gonna link to whatever the id is that we get back from the character so we can say character dot id so if i were to save this now in here in the actual character what we need to do is find a way to actually get that id and very very conveniently there's something called use param so we can say over here const and we can get the id from the use params hook that we can get from react router and then in here we can inject the id so in here we can inject the id let's get rid of that console.log and so now something went wrong well the thing that went wrong is right now i was trying to find an id with this thing and actually let's this is actually kind of a good example let's let's so something went wrong here and and clearly what went wrong is there's no uh a character with this particular id if i were to change this to three then it works but let's actually go back here and let's let's add let's add a crazy id and let's think about how we can actually debug this to debug this the best thing to do is to go to your networks tab over here so go to your networks tab and then refresh this and then look for the graphql queries so click on the graphql query go to the header and then over here you can look at the response okay this one's not that useful okay this one's definitely more useful so you can see here that okay so this is the query that we tried to execute this is the variable that we have specified why is this not working well you can go to preview and you can actually preview the error over here so you can see here we're getting a 404 not found which means well the character is not being found so it's just throwing an error because the the the character is not found because there is no character without particular id but yeah that's pretty much it so that is incredible in this section what we're going to be doing is covering lazy queries now what do i mean by that well right now inside of our application we are running our query each time our component renders so we're running running it over here and over here if we go to the root application we're going to be running it as soon as it renders sometimes what we want to do is run our query after we perform some sort of action so maybe we want to run a query to fetch some data once we click on a button hey felix how's it going buddy let me just uh calm him down a little bit excuse this is meowing too much are you done me knowing all right cool i'm gonna come back uh so sometimes what we want to do is again run our query right after we perform some sort of action for example what we might want to do is run our query if we want to search for a specific name and figure out the location where that individual lives and we want to run that query when we go ahead and press search so to do that we're going to have to use something different than use query because use query always runs at the very beginning of a component render so let's actually talk about well use lazy query and that's exactly what we're going to be doing so what we're going to be doing is we're going to want to run a query where we get the characters but this time what we want to do is we want to filter them by their name so we want to filter them by their name so for now what we want to do is let's say i picked morty morty smith i want to be able to get all of the locations those results and then locations that a morty smith lives in if if this doesn't make much sense to you uh rick and morty there's multiple dimensions and so earth is like one dimension and then there's multiple dimensions we can have multiple morty smith is living in multiple dimensions so if we were to execute this you can see here we get three more or four morties one that is in earth replacement dimension one is in earth evil rick target dimension one in this dimension and then one in this dimension so what i want to do is i want to be able to search for a specific character by name and then get all of these locations and render them so again we're going to have to use a lazy query for this because this is a query that we want to do once we execute some code or once we perform some sort of action not when we go ahead and render it all right so let's go ahead and let's uh let's actually do this so in here in the pages directory let's just create a very simple search component so we're going to say search and in this very very simple search component all we're going to do is we're going to do rfc to create our component and all this is going to have is an input so we're going to have an input but that is going to take in the name so over here let's actually add a use state here and we're going to say name we're going to say set name we're going to say that's equal to the use state and initially we're going to have that equal to nothing so we're going to set the value equal to the name and we'll also go to on change and then on change we're going to get the e value and we're going to say set name equal to e dot target dot value very simple here and we're also gonna get a button so in here we're gonna have a nice little button and inside of this button we're gonna say search very very simple so let's go into our app.js file let's find that in here and then in here what i want to do is right after this one but before this what i want to have is another route i'm going to do strict exact we're going to say path is equal to slash search i'm going to say the component is the search component so let's do search auto import that in awesome so if we were to go here and then we were to go to slash search we should see this very ugly input and we're not going to style it because you know what who cares so what i want to do is i want to be able to type in morty smith and query and get a list of all of his locations how do we do that well let's first get the query because this is the query and for something like use lazy query we're actually not going to create a hook for this and there's a very good reason for this let me show you why so we're going to go here and like usual we're going to have we're going to create a query when i name it we're going to get character locations we're going to say gql unfortunately this always imports from graphql tags and i want it from apollo client so let's just do add apollo client gql and we're going to have our query in here now over here we're going to need a name so over here we can just say something like get character name or target character uh locations that's the name of the query uh locations and then we're gonna have here dollar sign name and then this is gonna be of type string we're going to have that in here okay so we have our query which is terrific so now what we want to do is we want to get use lazy query so use lazy query and what this does is it doesn't return an object it returns an array so over here we're going to get back an array we're going to say use lazy query other than getting back an array all this is going to be the same we're going to have to have our query in here we're going to have to supply it with the variable and so the variable in this case is the name which is in our state the first element that we get back is a function that we can call when we want to invoke and execute this query and so we can call this whatever it is that we want so we can call this whatever it is that we want i'm going to call this get um i'm going to call this get uh uh um elements or sorry not get elements get character or get locations that's what i'll call it get locations so get locations and then the second element in this array is that object that has the loading the error and the data so initially this is not going to exist anywhere because we have to call this so now what we can do is inside of our on on inside of our button we can execute an on click so we can go ahead and execute an on click and what this can do is it can execute the get locations and they can just go ahead and just call that get locations function over here and what that is going to do is well execute this right over here it's going to execute this query and it's going to get back the loading the error as well as the data and also another thing that we actually get back here is called so we actually get back something called called so let's actually go ahead and let's just log everything and you can probably imagine what this called is doing it's basically checking is hey did this thing ever get called so let's go here into the search and now if i were to log or to inspect the logs you can see called is false uh undefined data undefined errors and then the the loading is false so this is kind of the default behavior so now let me just go and copy morty morty smith here i'm going to go ahead and copy morty smith and then if i were to execute this you can see here we get true we get a loading state that is true and then over here and then in the other call now this is true because we called it when we get back our data so you can see here we have gotten back our data after performing some sort of action so that's pretty much it that's that's really all we have to do and and and this this way of doing things is actually i identical when you want to also perform a mutation i'll talk about mutations very briefly a little bit later because unfortunately the rick and morty api only has queries and not mutations but i will talk about mutations uh very briefly but really if you understand how to do this you will understand how to do mutations as well okay so now that we got that let's go over here and let's just do some rendering so you know what if if something is loading let's just say spinner we're just gonna render a spinner apologies for that we're just going to render our spinner and then [Music] then if we have some data what we're gonna do is uh what we're gonna do is we're gonna have a list so a list of of all the things so if you actually have data we're going to render a ul tag and we could also catch the error state might as well let's go ahead and catch that error state over here so let's say error so if error just say something went wrong so we're going to say something went wrong and then over here if we actually get back of our data let's just iterate over the uh let's just iterate over all of the characters so we're going to say character and then what we're going to do is for each character we want to [Music] have a li to list their location so we're going to say character dot location dot name so let's go ahead and save that and now what we can do and this is kind of weird and wonky but now if we go back and let's uh cut this guy out let's refresh right now we have nothing if we were to search this we have a spinner and then we get all of that data isn't that incredible i just find that incredible it's not that incredible but whatever uh uh i i don't know what rick's name is is it rick smith no i honestly don't even watch rick and morty so see jeff smith i do not know any of these characters names you know what best way to do it is well i built an application for this so let's go here oh rick santos sanchez apologies to all the rick and morty enthusiasts so if i were to do this maybe let's actually get somebody that gets us some different data because rick gets us the same data let's get now this is this rick too i want somebody that gives me let's get this random girl i don't even know who this girl is okay so now let's go to our search and then in here you can see here that now we get her data isn't that terrific now if i were to go back to morty rick sanchez let's go back to rick and if we were to search him again you can see that that works as well okay that's awesome that is cool in the next section we're going to quickly very quickly talk about mutations uh but then we're done all right everybody in this section what we're going to be doing is quickly covering mutations so mutations are ways that we can update our data or change our data in some way in graphql queries is for viewing our data mutations is for updating our data unfortunately the graphql uh or sorry the rick and morty uh the rick and morty uh graphql server does not have any mutations it's all queries but there's this other open source like open server that it has created that has queries as well as mutations so you can see here we have this create product mutation we have create order mutation so this seems like it's dealing with food and so what we can do here is let's say we want to create a product what we first have to do is specify not that we're doing a query but we're doing a mutation so that's the first thing that we have to do and then we have to specify what we want to do well we want to create a product and in terms of this one over here what we have to supply it with is a record so we have to supply it with a record so over here you can see what it needs so it needs a name it needs a supplier id a category id all these different things so let me quickly try to zoom out of here a little bit and so let's just do that uh let's just do that right now so i'm assuming it's gonna auto generate the uh the id so let's just give it a name and i'm just gonna give it a name of hot dog hot dog we're gonna give it a supplier id of one i really do not know how this works category id of one we're also going to give it a quantity of uh so this is a string we're going to give it three let's see if this actually works so if i were to execute this it's going to load for a little bit load load load and oh it's not going to work because we also have to specify exactly the data that we want to get back so now we're going to say that we want to get back the record and we want to get back the name so that's how the schema works so over here you can see that we have created this we don't really create it this api doesn't actually create it but this is how we would do something that would allow us to mutate our data so how would we actually handle this in reacts now unfortunately what we cannot do is connect to our rick and morty graphql server and this graphql server at the same time because it's uh it's just one url there's one uh endpoint so let's just simulate creating this just just for practice sake but we won't be able to actually create it for real so over here what we're going to have to do is we're going to need to let's just create a mutation dot js component so that's the first thing we're going to do we're going to create a mutation component that's going to handle this fake mutation that we want to do just for you know practice sake so let's go ahead and let's do this and this is again this is going to be very very similar to how we did it inside of use lazy query so the first thing that we want to do is specify our mutation so let's go here let's get gql from this we're going to say import or we're going to say const you know create product we're going to say gql and we're going to paste in that and just for simplicity's sake let's just have these two quantities over here let's actually have just the the name as well as the quantity per unit and we're gonna make this a number so over here because we have some params let's give this a name so we're gonna say mutation we're to say create product and we're going to say dollar sign name is going to be of type string as well as now we have another parameter called quantity per unit so we can say dollar sign quantity per unit and this is going to be of type int and so over here we're going to supply it over here over here supply that and then that's our uh that well that's our mutation so now the hook that we're gonna use is the use mutation hook and this hook is gonna work very very similarly to the way that we have the use lazy query hook it's going to give us an array and then we're going to say use mutation and then we're going to supply it with the actual mutation so this is the create product then in here we're going to supply it with the variables and obviously the variables are going to be dynamically generated but for now let's just hard code them because this mutation is not even going to work we're going to say also quantity per unit let's say four and so here we're going to get back a function that we can call so we can call this whatever it is that we want you can call it create product and then we're gonna get back data uh we're gonna get back loading as well as error that's pretty much it that's that's really it's very simple now we can have i don't know some sort of button inside of this and we can have an on click and on click what we can do is execute this mutation so apologies that we i couldn't actually give you a real example but you guys probably get the point now we can execute the mutation we get back some data that we have specified over here we have specified that we wanted this data back and we also have a loading and error state so that's pretty much it uh i hope you guys enjoyed this i am strongly strongly thinking about making a very very thorough and intense graphql course in udemy so if i do have one i'll link it in the description but uh if you guys enjoyed this crash course let me know because it'll definitely motivate me to do that i'll see you guys later

Channel: Laith Harb

Views: 6,021

Keywords:

Id: gAbIQx26wSI

Length: 66min 28sec (3988 seconds)

Published: Sat Sep 25 2021