Nuxt 3, Apollo GraphQL, and TailwindCSS Crash Course

hello there in this video I will be doing something a little bit different because I will be recording a live coding session yes that's right in this coding session I will be building a nux free app that will be powered by third party graphql API so I'll be using the graphql Apollo and I will be styling the app with the Thailand Tailwind CSS and we will be also optimizing some images with the image module for nox3 finally if you able we will deploy the app to the vessel let's go okay welcome to this live part so and the plan is to build a simple application that will be powered by this API the Rick and Morty API they have both HTTP and the graphical API and to build something similar to this one here so we will be fetching the list of the characters from this show displaying them in a nice way by using table in CSS and also the next image and when we click on this certain character we will be redirected to that character full page basically that's it and in the end we'll also try to deploy this application to versa so this trick and Morty API I already searched for the graphql one and it comes with this really nice graphic well or graphql playground that we can test to get the data we need and going next we have the Apollo so I will be using the next Apollo module that was recently released with the support for nox3 and but you can also use the NAX graphql client this is another package that allows you to get to to work with the graphql apis we'll just move to here for easier later integration I will be also using the Tailwind the same module for next free and the image as well in the image because it pro comes with the many providers like many providers as you can see here I will be using the default one the ipx because I don't need any like third-party image optimization or Transformations I just need the basic ones right here um yeah so I already installed the app by using npx naxi in it and I gave it a name next Apollo Tailwind so when we run the project it should display to us the simple Max welcome component let's just see yeah it works so the last step as I mentioned will be to just to just uh deploy to Virtual so that this app will be live so let's start with just seeing what data we will need so we will need for sure the character like the query that we'll be using his characters and the results so we will fetch the characters like here so we will need name for sure the ID because we will be also redirecting the user to the certain page where this ID will be stored the image the status I will try to make the status because some of the characters are alive some are unknown and some are dead so for the dead ones I will set the image where is it providers ipx I will make the grayscale for the characters that are dead so that we can use some modifiers as well so we will need the name image for sure status uh ID we will also need the [Music] it will be like a character type let me just check type and location and scene episode maybe oh episode okay location is something bigger so let's expand it and yeah let's say name and the episode let's go with name as well let's see how this data will look like so we'll have aha I see so the episode is an array of episodes where this character appeared so maybe you don't use it you won't use it we'll just go with the location okay so we have name image status ID type and location so it seems that this human is something different than type so let's try to check what it is so if it's not type then maybe um species species okay so I think we have all the data we needed for the certain character page we will be just displaying the same data because we don't need we actually don't need anything anything more specific I will when implementing this certain page I will also check what data we can have from the character by a certain ID and okay so what now let's jump into the project and first things first let's install the next Apollo module so that we can use Apollo to connect to this API okay in the meantime I will also add the modules here so the module was installed I will add the modules here and what next we need to add the Apollo client configuration right below this one so we have Apollo clients and the default client we will be using for our requests with the HTTP endpoint it won't be SpaceX we will use the one right here but without the hash at the end so this one okay so it seems to be working let's go further let's just copy this code here and just see what we can get from the like the simple graphql API on graphql query sorry uh okay so this is highlighted as red but don't worries this will be Auto imported by the and for plugin plugin for for next for njs in more particular and more to be more specific and what we have here so we won't be querying get ships I think we can just copy the query from here and just name it something else instead so we will go this one and query we'll say get products get characters sorry like this and we won't be using any variables it will be just calling the query and for now let's just see what the data is so we will go p and inside of it we'll just say show me the data and yeah so go we are Dev and let's see in the browser okay so we have some data here let me just quickly check what it's inside so we have characters results and this first object and probably um where is it think here okay so we have name image status ID species location with a name and the type of location but we'll just use the name and yeah so I think we have all the data needed so what we'll do right now is we will also install the they win CSS so that we can add some styling as well to our app because we will be building some components for these cards character cards and also for the product image and yes so let's add this module to our modules array to register it like this and yeah that I think that's it for for the module to make it work let's just see if that works so in here I will say class font or text XL and just yarn depth yeah it works so the talent is connected yes so going further we have the Tailwind installed we won't be needing this documentation anymore let's just install the image module so that we can start building our components let's take the name of this module so that we can register it here and yes so [Music] um in order to process the image that we are getting from this graphql API this this one over here we need to add this in the ipx and domains so we'll go to configuration and in here you have the step about domains because otherwise you will get an error that you cannot optimize or process the images that are from different domain so we'll add this one to our config foreign we'll just say and this one Rick and Morty API but without https we don't need it here we just need the domain okay um what next let's check if we have something else to do here I don't think so okay so I think we can now start to build our components there won't be that many I think maybe one or two but let's start so enough new folder components and inside we will just say character card Dot View and in here what we will do is we'll create a view component so we will say script lung TS and setup as well and below that I will say templates because we'll be using some HTML as well so in here what we will do for sure we need to use the props because we will be passing some props to our character card so const Props equals Define props to be an object so what props will we have so we will have the name image status ID so name which will be of type of string and it will be required true and next it was image type string as well and required true status ID species status ID species and what else location correct species and location yeah location it's the last location and let's say that they will all be just a string yeah so I will close that up so we have the props defined and going further so we will have the div here that will be a wrapper around our Kaya character card and inside we will have two sections one will which will have the image on the left and the section on the right so we will be using the next image component from the next image module to make the to process the image so we will say um next image here and the second will be div and inside this div we will have all these properties so we will have for sure the H3 let's say with the name or we can even say already the name and below that we will have the status so we say p and it will be status and the same for species and locations you can even say location here we'll parse it on the main component main page so it was status species and location status species species and location just like this for now and in here in this next image we will say SRC and it will be image okay so we have our component I will work with the Styles a bit later so I think we can close this for now and in here what we could do is we could instead of this one we can just say um let's just create a rubber div around them so character card we don't need to import it because it will be Auto imported by the next and we will just say here V for and characters in data results and characters I believe characters results so data characters results the other way like this and we have an error here because in this use as inquiry by default has a unknown type as you can see here so we can create a custom type so that it won't complain so let's go to type a character's results and it will have the characters results and the results will be let's just say an array of empty objects we don't need that many typings here as well as much so let's go here and just say this so we have data characters and the results and yeah so we need the um key to differentiate different components so it will be let's just name it the single Arc character dot ID okay so we can create this ID will be a uh let's say string and the name will be string the image string status and the species and location species string species here is string as well species string and the location will be an object with the name name and the name will be a string so right now we shouldn't have issues with the typescript so for the props and let's open this component here so it will be easier to scan what props we need to pass so we have the name so the name will be equal to character dot name the image will be equal to character Dot image there and the image here the status yeah Status will be character Dot status and species equals character dot species and the location will be character dot location dot name in here we can make it a bit simpler so instead of just saying character here we can just create an object or just destructure the certain properties that we need so instead we can just say this this this this and this so right now we don't need any of those yes so let's save it and see if it works yeah I'm deaf okay so it seems that it works it doesn't look great for now but we are fetching the data and it's displaying it right here let's quickly check how it looks in the HTML structure so as you can see here we have the image but this image is proxied through the ipx so it will be modified so for example right now if we I we haven't passed the ID here ID equals ID so right now here in the character card where we have the next image so apart from the fact that it's proxy there we can also apply some modifiers so in here we can just say modifiers which will be an object and we can say gray scale equals true so right now all the images are grayscaled and it can be done by using the default ipx provider you can do similar stuff with cloudin area contentful storyblock and other digital Asset Management Systems but I won't be using it for now let's just go again here and let's just say that um we want this to be Flex so that we have all them by side it doesn't look great yet so in here we will say that this div which is like a wrapper around all of this we want this and this to be Flex as well so class and flex and okay so the text disappeared probably because it's hidden by another one yeah so we will also add some merging so m um error free not enough so let's go here and let's wrap okay bit better let's hear create a background so BG um gray 300 and around that Excel so that it will have a bit of a round corner and this image is too big so I will modify it but by not by using the CSS like the Tailwind I will be just passing the values here so I will say with let's say 200 and hate also 200 so they're a bit smaller what else okay this name doesn't seem to be like H3 okay it is so let's change it to H2 instead okay I think I need to it can be H3 but it needs a class of and text XL yeah so let's go here and add status species and location just save it so we have a live Human Earth as the location I will also add a bit maybe let's add merging to all instead of just one okay this image is not rounded so let's do it right now under XL and let's add this here rounded XL okay A bit better what else we could do here um as I mentioned we could yeah we can add a bit of spacing here as well so let's add it so let's say um class merging three as well let's see how it works it looked quite good I would say let's add a bit of margin here as well to the header so MB 3 as well so you have a little bit of a spacing between the H and the other like statistics of a certain character [Music] um yeah let's add this status if status equals that we will make the image grayscaled so modifiers and Gray scale and we will say um status equals and it's that I believe that yeah that um okay for some reason all the images are grayscaled because of the status let me check inspect View let's check the first character that says it's alive status is alive okay maybe let's make it a computer property instead so below that const is alive or is that maybe computed props dot status equals that hmm what happens if I pass this one ah I see so even if we pass a grayscale false it will still result true that's strange okay and let's maybe do something different instead so what happens if I pass the empty object for example here okay so let's do it like this let's create a computed const um Gray scale when that also in props for great naming convention computed and so if props to status equals that then we will create this object with modifiers on the fires equals true else we will just return an empty object and let's try this here it doesn't work okay hmm why this one's supposed to have the value true okay status dead ah because I set it to modifiers not grayscale scale now now it works so right now when we have a character that is the status is dead it's grayscaled and it was modified but the next image and in particular the ipx provider [Music] um I don't think we need to do anything else here because it's not a like crash course on Taiwan CSS I will just add a next link here so that when we click on the certain certain character card it will redirect us to the to another page that we will be maybe just the same character card but with the data from different graphql API the graphql query so let's wrap it up with the next link so we will say next link and we will say this and we will copy this inside of this next link and inside this next link will say 2 and we will say [Music] um pages let's do this slash Pages slash I would use the bucktix instead because we will be adding the ID and ID let's see so you have Pages seven and okay you're not Pages let's say characters these links won't work yet because we don't have the characters but we will add them in a second and okay so let's create a Pages folder pages and inside of it create a folder called characters and inside these characters let's create a file ID Dot View and in here let's use this script setup lung equals TS and the template as well and in here use construed equals use root and that's just for now do p here or maybe native and just say root Dot poweramps.id and let's see if it works it will fail because we don't have the page index here in the pages so we will just go index.view and move the logic from here to this index and like this and the app.view we can just remove the whole logic here and just leave it as the next page and it should work right now yeah it works so what will happen if we go to let's say more Marty Smith we'll go to the characters too and we have the ID of the certain of the certain character so right now what we'll go what we'll do is we will just fetch this similar similar data but but for the certain character so we will go with the character and instead of results we will just I think this should work let's see character and it needs an argument ID so let's go with this and see if it works yeah we have Morty Smith so let's copy this query I will copy it for to here for now and from here I will go I will copy this line here and in here I will just replace this query here get characters to get character and this ID will be the ID that we'll be getting from the root Paramus ID um let's remove this from now we will add it in a minute and yeah root params.id let's see if it works it doesn't okay okay now it works so basically we don't need to send the variables we can just do it like this it took me a while um okay so right here what we'll do instead of just going this I will just copy the code from here the character card and I will not use this one and the key is not needed as well and we will just use the data so it is data.character data dot character like this and this this and this and in here we can just add the simple typings as well so we will say type character equals and it will be what character and it will be a let's say and the key string the other way key will be any and string and string just like this and let's add it here um our object with the name should be string let's go like this okay so not maybe not let's go with name String image string status string ID string species string and the location which will be an object with the name string like this doesn't existent type location yeah and let's see in the browser yes so we have the character card here and it's also a link as well um yes so we have the app running and we see both the Dead Alive and the list as well of all the characters so this simple app was like an example of how we can use the Apollo module here the tabling module and the next image module as well in this simple application so the final step would be to just deploy it to Versa and see if it works so let's let me just quickly at all kit commit m built up and let's push it and in here we'll just add a new project I will use the GitHub and the next Apollo tablet it will be frame repeated next and the root directory will be dot slash build and output uh I think we can go with the okay so the deployment was done and the app is live so let's see it yeah so we have the list of the characters and when we click on a certain one it will open that certain one in the page here so that will be it for the video let me know in the comments uh whether you like this format or not and see you next time bye

Channel: Jacob Andrewsky

Views: 8,493

Keywords:

Id: 1NEOQ2uVHXo

Length: 41min 39sec (2499 seconds)

Published: Fri Oct 14 2022