NextJS GraphQL Crash Course

hey guys and welcome back to the channel in this video we're going to make a searchable rick and morty database where you'll be able to see images using graphql now before we get started with this video a couple of things make sure you're following me on social media because i tweet out previews of the things we're going to be building next secondly we also have a discord which means that you can come and join and chat with me and fellow developers and finally i'm now on you can buy me a coffee so if you want to drop a couple of bucks in for all these crash courses i've been creating the link is in the description okay let's get started so here we are in our next js application just the standard one i use for every video and you can just use the create next app mpx command to do this so we need to install a few things to make this work the way that we want and most importantly we need to do the graphql and we're also going to be using apollo so we can do an npm install apollo slash client and also just graph ql and that'll be it for now now we also do need to install uh shakru ui or at least that's what i'm going to be using for this video and obviously you can use tailwind or just standard css but it just makes it easier for me to be able to explain the graphql parts and everything that goes into that without having to worry about too much styling so i'm just going to go ahead and install all of that and then when we come back we can start talking about how it works hello client so to do that you're just going to use the word const we'll call it client and we'll do new apollo client and inside of these parentheses you're going to do uri and that's going to be the uri that we're using and for this we're going to be using the rick and morty api so i'm going to type in here and it's quite simple it's just brick and morty api dot com slash graphql and then one more slash then we can tell it that we're going to use in memory cash and the in memory cache means that if there is a request that happens really quickly it won't just go out and make uh another request out to the ql it will check to see when the last time it was updated so now we have that we're actually going to create some graphql and so the way that we're going to do this is i'm going to flip back to this graphql here and we're going to build it together and then we can copy and paste it into here so i'll meet you on the other side so here we are in the rick and morty api graphql gui so this is a great feature that a lot of graphql products will use essentially it allows you to build the query in the gui and then use that somewhere else so what we're going to build here is a way to grab all the characters from the first page so to do that type the word query and then open set of girly braces and type the word characters and as you can see as we go along it will show you um intellisense so it'll tell you what you need so we're going to use characters and the reason we're using characters is because this is a way to get all of the characters so essentially it's like putting a slash at the end of this and typing the word characters then i'm going to type the word page and then a colon and a number one so that will get us the first page so then i'm gonna include the words info count and pages and this gives us the info of how many characters have been returned and how many pages are available and i'm going to use this for a challenge at the end of the video so stick around to the end build your application and then try and finish my challenges so now we have this info we can now do results so just go ahead and do results and then in here is everything that you want returned from the characters so we're going to need the name we're going to need the id we're going to need the location and inside is uh the id as well as the name and then we also are going to need the origin which is where they came from and we'll do id and name and then from there we can take the episode and also just grab the id episode and air date and then the final piece of the puzzle is image which will be the image of the character so now we've done this you can actually just hit this big old play button and as long as you've typed in your data correctly you'll see the results on the right and as you can see there is a bunch of different results here but essentially when they're all said and done we have rick sanchez here his location his origin his episode and every episode he's ever been in so now we have that data let's go back into the code and start using it so now we're back in the code underneath the client just go ahead and write const and then destructure the data and say equals awaits client dot query and then inside of these braces is where we're going to put the query that we just wrote in graphql and the way we do this is to query and then g q l for graphql and then you want to do a set of backticks and then inside of here is where we're going to paste our query so now we have the query and this data is going to contain the results of this query what we can do now is if we scroll down through the query get to here we can actually tell it that we want to return something so at this point this is what we're going to return to our page so that we can access it so just use the word return and then do props and we're going to call this characters and then we're going to do data dot characters dot results just like that so now this is complete but let's just talk about a few things first this data character's results is because i called this characters the results and then everything inside of it is what we're looking for so that's how we got this prop here and then on top of that i just want to talk through this whole query one more time just to make sure you understand so what we're doing is we're telling it that we want to query the characters part of the graphql up that is available we also want the first page of results we then want you to return back to us the info which concludes the count and how many pages are available and then we want the results part to contain the name id the location object an image the origin object also the episode object so we want to return every single character with those results so now we have that we can actually start using it so now we have this props down here called characters we can actually pass that in to our page and use that so go ahead and scroll up to the top of the home page here and what we're going to do is we're going to pass in results and then we're going to need a few states here to manage our states so first let's do an initial state and let's just call that results so we're going to make this the initial state then we also will need uh the characters and we'll use the state for that so what we can do here is do cons and then do characters and then set characters and we can use equal to use state then open a set of parentheses and then put initial state dot and then characters so what we're doing is we're setting this to the initial state now right now it probably doesn't make any sense like why wouldn't i just put this results in here and it would be all set well in the future we want to be able to reset the search that comes back from the user and so if we have an initial state it makes it easy for us to just re-render the page with the first state that we had so if we want to use this use date we need to import it so just go ahead and open a here and type the word use date and then from react and we also need to import the uh apollo client in memory cache and graphql from the apollo client so to do that just do import and then apollo client in memory cache and gql and that comes directly from apollo client so now we have all of those in here we can hit save and then we can start actually working with this data so what we want to do is to show essentially a grid of characters and then inside of that grid they can scroll through and they can see sort of details about the character so i'm going to use a bit of uh chakra ui to handle the css and obviously you can do whatever you want based upon what kind of css you prefer so i'm going to import a heading here i'm going to import box flex and we'll also import input for later as well as icon button and we'll also use toast because i want to be able to show an error message if an error happens so we have all that and we can just do from checker ui react and we can hit save and now we're ready to start working with our code so what i'm going to do is i'm actually going to create a component here and the component is going to handle mapping through each character so inside of here we're going to do a new folder and we're just going to write the word components and inside of these components we're just going to create a new file called characters dot js so inside of here we're going to essentially use next image as well as a simple grid to sort of align all of the items but before we go too far into that let's actually make sure that this works so what i'm going to do is inside of this function right here we have our initial state and i accidentally did the import in the wrong spot so let's just move that up here so inside of here we can just do console.log and then we'll do initial state and just make sure that's the same and hit save and let's go ahead and run our mpm server here and make sure that it works correctly so the server did start so that's a good sign so let's go ahead and open up the localhost 3000 and make sure that this is being logged out to our page okay so we're in the code and all you can see is my powered by any strings and youtube subscribers i'm going to hit f12 and there is an object in our console here and inside of that object is characters and inside of that is a bunch of different characters and as you can see rick sanchez molly smith summer smith beth smith jerry alien rick etc so we know that this graphql function is working so now we can actually handle mapping over this data and providing a component to handle the ui so let's flip back to the code and start writing out how we imagine this is going to work and then how we're going to create this component so first things first let me just create a flex box around here that's going to have a direction of column and then we can use justify equal to center and then we'll also align this all in the center so we have that and let's just wrap everything in this flexbox so we can take that and replace it with this right here hit save and then we have this now so let's create a box that is essentially a div underneath our head that's going to take care of our displaying of the data as well as a header so i'm just going to put a margin on this and i'm also going to give it flex direction so that it knows there should be a column and i'll also align this in the center and finally i'll justify it in the center and then we'll add some padding on the y-axis of eight so now we have this box that's wrapping everything up let's add a heading and this heading is just going to say rick and morty and obviously you can change it to rick and morty searcher or whatever you prefer so we'll do an h1 and we'll make the size equal to 2xl and we'll do an mb equal to eight and we'll do rick and morty so we have that part now so we have a heading and if we flip back to our code we should see see that uh presented and as you can see rick and morty is now being shown up and it's in the center and aligned so now what we can do is actually use the um the data that we have to create characters so let's go ahead and do that so what i'm going to do is i'm going to flip to this character's component and we're going to work on that because all we're going to pass in is the characters and then we're going to handle everything else here so let's import react from react uh let's import image and that's coming from next image and then we just need to import a few things from chakra ui to handle this so if you're not using it you can go ahead and skip over this part but if you haven't checked it out it's definitely worth a shot as it's super quick to style your components so now i'm going to do a const called character and inside of that we're going to pass in characters and these characters are going to be what fills our page up and so inside of these braces here we're going to do a return and inside of that return we're going to do a simple grid now what a simple crit does is it takes the guessing game out of making responsive grids so all you have to do is tell it what kind of columns you're going to want for each size and from left to right is the sizing so it's small medium and large so you can just do one two and three for this example and then we're going to put some spacing of 40 pixels around our grid then what we're going to do is map over the characters so to do that you're going to do characters dot map then open uh two sets of parentheses and type the word character in the middle set and then you're going to do arrows and then you curly braces and then you can do a return and say just a basic div here and say key equals character character.id so we know that each of them are going to have their own id and then we can do inside of that div we'll do an image and the way the images work is you're going to do source character dot image so that's going to pass in the source which is going to be character image and then you need to set a width here so we're going to set the width to 300 and we'll also set the height to 300 and then we can just go ahead and close that out now one thing that you will have to do here is create a new file and you're going to call it next.config.js and inside of here to make this uh next image work the way that we want we need to tell it where these images are coming from so to do that just go ahead and do manual.exports and then do images and then open up another set parentheses and then you're going to do domains and this is where you're going to tell the images are allowed to come from so in here we can do rick and morty api.com and hit save and now it knows that anytime an image comes from here it's okay to handle them through this image so now we have an image we also need to do a heading and that will be the character name so underneath here do a heading and we'll do an h4 and we'll just align this in the center and then we'll set the size equal to medium so that the text is not too big and then we can do character dot name and then just make sure you surround them in a set of curly braces and now we have a heading and we also have the image so now we need to text a line equal to center and then we'll do origin which is where they originated from and inside of here we'll do origin space and then character dot origin dot name and then underneath that we'll do another text in fact we'll just copy and paste this one and say copy paste and we'll change the word origin to location and we'll change this to location so now we have basically a component here that will function the way that we want so now we can just do an export default character and now we can export this out and use it here so let's just explain what we're doing so we're taking in the characters from our index.js file that's what we're passing in then we make a grid and then we map over our characters so each character is going to return a div with the id then an image with their image then a heading then their origin and location so we're going to return all of that back so now in your index.js file we can just import this at the top so you can just say import character from components slash characters let's just make sure i called it character i did and then what we can do is take this character here and underneath our heading instead of having to to do anything else we can just open here and say character and then say characters which is the name of the prop equal to open and then characters so now we've done that we're going to need to restart the server launch it up and i'll meet you on the website okay so here we are on the website and as you can see we now have rick sanchez morty smith summersmith jerry smith etc so we're now showing all of our images and they're being lazy loaded on the screen by default thanks to next js amazing new image so now we have that it's all great but we need to be able to search for a particular character so let's flip into our code and actually create a way to have a form that you can submit and return a different set of characters so now we want the ability to search for a character so what we're going to use is the pages api so i'm going to create something here called search characters dot js and inside of here we're going to create a api response that will go out and search for the new character and then drop it back to us so at the top you're going to import all of the apollo stuff again so it's apollo client in memory cache and gql and those come from apollo client and that's all we're going to need then we can create the client at the top just as we did previously so just do apollo client open a set of parentheses here and type the uri again which is https slash rick and morty api dot com slash graphql then underneath that we also need to tell it to use cache so you can just do cache and then new in memory cache and then hit save so now we have a client again and the way that apis work you can just do export default async and then request and response and then do an arrow and then that's it so inside of here we're going to basically take something from this request body use that to search through the graphql and we're going to explain how you can do that and then we're going to respond in three different ways the first is a successful find of a character so we found say for example rick and we've returned all of the bricks the other option is you've typed in something in that search box that is not found so let's say you just typed t-e-t-e-t-e and that did not return a character we're gonna respond back and say no characters found and finally if something catastrophic happens we want to also respond with just a 500 error and ask them to try again so so inside of here you're going to do a const you know search sequel to request body then inside of here we're going to do a try statement and say try and fairly similar to the one we had before so a destructive data is equal to await client.query and then inside of here is where we do our query and that query is going to be gql and then a set of backticks and then we're going to put something in here and inside of here is how we're going to search for them so let's go back into the rick and morty api graphql and create a query that will return the same data structure but just with the ability to search for a particular character okay so we're back in here and what i've done is i have removed just the filter section here so what we're going to do is type the word filter and then inside of here we can open up a set of curly braces and say i want to filter on the name and then whatever the name might be so let's just try this out by using the word rick and we want everything else to be the same and i've zoomed in really far here so we want this to be rick and then everything else to be the same so if i run this query as you can see there's 84 different types of ricks in the rickenball universe so they're being returned so we're going to use this kind of filter to do our work for us now if we type something in here that doesn't exist you get this errors and message 404 not found so we know if there's a 404 not foul message that there are no available characters so we also need to bear that in mind so let's take this query copy it drop it into our code and make a slight change so that we can dynamically pass in our search parameters so i've pasted that in and as you can see the name is still as rick but we have this const up here that we could use so inside of these quotes you're going to do a dollar and then a set of parentheses and then the word search so now we can pass in anything that somebody searches for and use this so now we have that we need to actually handle what happens so underneath here but before the end of our try we're going to do res.200 and then say dot json and then the json is going to contain characters and those characters are going to have data dot characters dot results and then a comma here and i'm gonna write error null so that means that we can do a error check and see if there is an error then we need to show an error otherwise we can just go through the same process that we had before so now we have that we can actually do the catch part of a try so inside of this catch we're gonna do error and inside of this catch we're gonna say if the error dot message which is what we saw in our graphql we can do equals equals equals 404 not found and then say res dot status 404 dot json and then say character null and then error no character mount now actually we want to make this a 400 because technically it is found it's set from the characters up so now we have a way of handling if nothing is returned and then finally we can do an else statement inside of here and say else res dot status 500 dot json characters null error we can say internal error please try again so now we have the ability to return data through this and also catch and handle errors and we can use the error as a way of checking to see if there is an error so that you don't have a problem of like oh there's no data here like how do i handle this you can handle all of this in the results so i'm going to hit save here i'm going to flip back into the index.js and now we're going to start building in our search functionality so the search functionality we're going to have to add a few more things so inside of our states here we're going to need a search so we can do const search and then set search and we're going to equal those to another use date here and the use date's just going to be an empty stream so i'm also going to use toast here and the toast is just going to be to handle error messages and obviously you can handle them however you want but i want to be able to visually show them to you and this is the easiest way so now we have a way to have an initial state update our characters and also search for them so we have everything that we need to be able to do this so now we can actually start creating the form that we want them to use so underneath our rick and morty header that we have here but before our characters let's go ahead and create a form and the form is going to be an on submit but for now we can just say um equals nothing until we get there and so inside of our form what we do need to do is essentially take our uh a stack which is a way of like creating an inline form using chakra ui so let's just set a max width here of say 350 pixels and we'll set the width equal to 100 and we'll say is inline so that it's in line with everything else and we'll just add a margin at the bottom and the bottom margin will just handle having space underneath before we show the characters so now what we can do is use an input and say placeholder is equal to search and we want this value equal to our search that we just created at the top as our state will have no border around it and then we'll say on change so every time someone types something in we're going to pass something in so on change is equal to e and then an arrow and say set search e target dot value so every time this changes we're going to set the search which is our state equal to this target value which is obviously the input so now we have an input here underneath that input we're going to just create a couple of buttons one button is going to be our search button click it searches or if they hit enter searches and then one button is going to be our reset button that resets it back to its initial state so we're going to use icon button here and the icon button is going to be color scheme of just say blue and then we'll just add a label here for anyone using screen readers that's equal to search database and then we'll just add an icon here which we will need to import at the top but it will be search icon and then we're going to disable this button if the search state is equal to an empty string and then the type is obviously submit so now we have that and then we need another icon button here and this one's going to be our reset button that's going to reset it so let's make the color screen red and it's going to be red so that people know that that's a button that you'd never want to press unless you really mean it and we'll just call it reset button and the icon for this one will be i think we'll just use the uh close icon because that's just an x and just a close icon like that and close it out and so now we have that we just need to disable it and the way that we're just going to disable it is the same way so search is equal to nothing because we don't need to reset the state if it's there then we can do the on click handler here for this one because we're actually not going to do anything really we're just going to set this to on sync and then the async function we're just going to set the search back to nothing so that will empty the search out and disable all the buttons and then we can use this set characters and if you remember correctly i set the initial state at the top so you can just do initial state dot characters and that will set it back and reset it and we'll get the original characters from the beginning so now we have that we should make sure that everything is closed out and we just need to close the button itself so now we have all of that the search is not actually going to work until we create our submit function uh right here so let's create our submit function so that we can actually test to make sure this works so the way we're going to do this is we're going to open up a set of parentheses and do another async here and then we're going to pass in the event and this is to stop it from doing the default functionality and then we can do cons results and we can say await and we'll do fetch equals i apparently can't spell the word const there we go await fetch and then to call the api index.js you just type the word api slash and then whatever you called it so this we called it search characters and then we just need to do a post so to do a post with fetch you just do method post and then do body and then search because we're going to pass in what we're actually searching for so now we have that we can just do that and hit a comma here and hit save so now we're actually not doing anything with these results so let's deconstruct the results that come back and if you remember correctly i gave two different things in here we have characters and errors so inside of here we can just do characters and then a comma and then error and we can just do equals await results dot json so now we have the characters and the results so we can just do it if there's an error so if there's a worst case scenario do a toast and we'll just say position uh is bottom we can say uh title and we'll just say an error occurred and underneath the description we can just do the error so we'll just show the user what their error is because we already handled them we can set this to a status of error so that it shows in red and then we can just do a duration of say 5000 milliseconds and we'll we'll let them close it if if they want so now we've handled that so basically we said if there's an error do this else we can just set the characters equal to characters so now what should happen is our screen will just update with the latest data so the last thing that we need to do is actually import our icons that we're using for our search so at the top of the screen underneath your import here you're just going to do another import and then you're just going to import the icons that you need so in our example we're going to use the search icon comma close icon and that's going to come straight from chakra ui icons and then hit save and now let's flip back to our website and check out what's going on okay so here we are in our rick and morty application and as you can see now we have the search options so let's make sure that this works first so if i just type something in and click clear it clears away okay so let's try uh summer and see if anything gets returned for summer smith and there we go so now we're getting results back from summer now if we click the red box again what should happen now is it should return back to our original state okay so that's working too so great two out of two and the last thing that we need to test is what happens if something's not found so i'm just going to type in a bunch of different letters here and hit the search button and as you can see at the bottom it says an error has occurred no character is found and then we can dismiss this and we're good and if we click it a bunch of times we'll get a bunch of different toasts so great so everything is working as expected so let's hop back into our code and i can talk about the challenges that i've got for you so we've created a very simple implementation of graphql we've used the basic search functionality as well as a simple filter so if you go and investigate on the rick and morty api there's a couple of things that they have one is page and two is the info about how many that you have so i'm challenging you to extend this out and add in the ability to one go to the next page and obviously as many pages as you need two i'm also going to challenge you to extend this out so now that you have the characters go ahead and create a couple of components for the location and origin so that when someone clicks on it they can learn more about the origin now this is going to take your skills that you've learned today with graphql and how much i've covered and just to make a few query changes so if you can do that and then tweet me out your finished product whether you deployed it to for sale or you just want to show me your github go ahead and share them out and i want to look at them review them and cheer you on so until next time see ya

Channel: James Perkins

Views: 9,051

Rating: 4.9221792 out of 5

Keywords: NextJS GraphQL Crash Course, graphql apollo, next js tutorial, next js, apollo graphql, next.js tutorial, nextjs apollo, next js graphql, graphql apollo tutorial, learn graphql, apollo server tutorial, apollo client, what is graphql, graphql apollo client, apollo client nextjs, nextjs crash course, next js apollo graphql, nextjs apollo client

Id: tE3WOGIJ1mI

Length: 41min 15sec (2475 seconds)

Published: Fri Dec 11 2020