Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

Key Takeaways

hi everyone in this video we're going to learn to be a repro react developers and we're going to use all the professional reacts libraries and technologies in one single project and set it up all together so in this video tutorial i'm going to be using redox redox toolkit i'm gonna use apollo and apollo graphql with react all in advanced way to just take your skills up one level and if you're like just like a little bit more than a beginner so you know the basics but you still want to be like what an advanced developer would like to do or how big projects are set up or if you're looking for something like complicated and something like a project structure to put your hands on for creating like your next startup or your next big project to release it online or whatever like that well you are actually in the right place in this one we're going to be having like more intermediate into advanced stuff i'm going to combine it all together to create the best way to develop a react application with different technologies so this is actually the actual application we're going to create at the end it's going to be more like a project a simple project just demonstrate that everything how it could be working together from redux store redux toolkits and typescript graphql style components all of them how it works together and this is going to be created like a hot anime list all like listed from from this cool website that provides us with a graphical api so we're gonna go through all this and also as i said we're gonna be using redox toolkit which is the new batteries included toolset for efficient redox development and uh yeah this this one i can tell you my personal use this one is definitely better than the regular standard react readout and it's it's actually from the same team but they did that and and it's much more powerful and has a lot more features into it so that's what we're going to be they're learning going to be learning redux toolkit from scratch i'm going to also be learning graphql but you still need a little bit of like beginner basic knowledge of what is redox and what is redux store and like for example what is graphql and how graphql works just the basic ways to know that and that's that's all you need just like that so i'm not going to say this is an absolute beginner who doesn't know what is redux or his graphql or what is react or what is typescript you still need a little bit of knowledge of just like a teeny tiny pieces of all of these technologies together to get started with this tutorial and to be able to follow up correctly without any issues or problems so that's going to be doing in here going to be using all of these awesome technologies we're going to set up a full project that has everything from scratch and the projects you know it's going to be pretty big this is the full project structure from interfaces graphql schemas typescript with redux stores selectors and many many stuff you're going to be learning throughout this video so hope you guys enjoyed it and without further ado let's go ahead and get started [Music] so let's go ahead and get started and we can get started by setting up the projects so what i said before is actually we're going to create a full advanced react project i'm going to just like include the batteries for making it an advanced and like a production ready project i'm not going to go like for something simple i'm going to use all the technologies that are me needed pretty much to make or integrate with react in order to create this big advanced project for our professionals so we're going to be using redux toolkit in that particular case and also we're going to be learning what is redox toolkit and how we can use it we are also going to be using apollo graphql if you're not familiar with that you should already be familiar with a little bit of graphql like at least what is graphql and how it does work and what is kind of this type of schemas and scalar types just a basic beginner stuff in order to be able to follow up because i'm not going to go through all the beginners either for apollo or graphql or even for like the redox you should already be familiar a little bit with redox so like what is redux what is redux store how does stage management redux can provide and those kind of like beginner stuff friendly then later on what we can do we can go and like grab redux toolkit we can start working on it and we can just like explain everything that redux toolkit provides versus the regular reacts redux or the standard version of redux we usually use with reacts and what is actually the kind of differences and why you should choose redox toolkits versus like the regular standard redox installation so this is basically what i'm going to go through in here and let's go ahead um basically for for this one i'm going to just go ahead and use a template so a template in here is actually provided on github which is called cri template redox typescript which is just a create react up template and since like the latest version of cra or query up top it now provides custom third-party templates to be able to install the scaffold throughout this project so i'm going to be using this one and if we go to get started in here go to the installation you can clearly see that this template or this docs in here it provides us it tells us if you want to use like redox alone with javascript you can use query react up and my app and you can do the template redox otherwise if you want to use typescript which is in our case we're going to be using typescript as well so what you can do is going to use template redux typescript and this template in here is going to have everything installed for us correctly and all the redox toolkit etc for us correctly it's not a big deal if you already got a project that is an existing application all you have to do is just npm install or yarn and redux js then four slash toolkits then that's pretty much it then you can do the normal configuration of your rear dock store and all the kind of simple stuff in here i'm not gonna go through this one i'm gonna use this cri in here as use template to get stuff working and get started with the scaffold projects for us from scratch so we can get started install and configure the rest of stuff so let's go ahead and open up the terminal i believe you already all guys have a german here easy linux more specifically ubuntu latest version in here and what i can do is quickly go ahead and use cra to get stuff running so i can go and copy that i don't want to just like be a geeky a lot so i'm gonna copy all of that yeah i don't wanna i don't wanna get started real quick with this so i'm gonna rename my app i'm gonna name it react pro project click enter and it's gonna mpx is gonna do the job for us it's gonna grab ria create react up for us and it's going to start and install all of those using yarn so all we have to do just sit back and wait so that was quick now it's done everything is installed and we got a ready project for us to go ahead and work on so let's go ahead and cd into react pro project the project we just created i'm going to open up the code or the vs code code editor so i'm just going to grab this one in here i'm just going to make that one a little bit bigger and yeah done so close everything we got node modules installed everything and if you take a look on it it's just like something pretty much the normal create reacts up folder structure with the public and src logos objects and all of that the only difference in here right now we are actually using typescript and if you're familiar with my projects like my application it creates all throughout my channel and you watch a lot of my videos you know me i love creative top i just do it every single time i want to create a react application or scaffold a project real quickly so you got a point you should be already familiar with how we do that and why it is very important to do it that way now we've got our projects in here everything we need let's go ahead and open up the terminal real quick and for this project it already does have some example to get started with take a look on the feature in here already has some like a pretty basic example how to how to pretty much use redox toolkit and how to use the api how to use slice and all that i'm not going to be needing this i'm going to completely get rid of it delete i'm going to go to uh jsx i'm also going to delete all of those and i'm going to read off all of those as well so just go here get rid of them replace them with a hello world pretty beautiful hello world and take a look one more time um yeah hopefully everything is done if we up folder in here you're gonna find a store which is basically our redox store i'm going to find the hooks which is basically just normal react hooks but this one or this time is going to be a little bit different because it's going to provide it with types that way we are actually importing them here we use dispatch with opponent from reacts predox but we are re-importing them like we're going to re-export it then we can re-import it from our like files we want to work with to be able to actually use the interfaces and the power of typescript so that's basically what we're doing here i'm going to go back into this later on to explain what is going on i'm just going to get rid of this we don't have a reducer anymore get rid of that and everything should be right into the place so everything right now is good we've got the stores turned up we got everything let's go ahead and actually install graphql then we can go ahead and back and talk about redox toolkit so for installing graphql all we simply need to do is just go ahead install the graphql and the apollo graphql so i'm gonna go um yeah i'm gonna go to yarn add so i'm gonna go apollo forward slash graphql then i'm gonna go normally to i want to make sure that i'm not wrong because i don't really like memorizing all those i'm going to go to here get started and it's apollo clients instead of apollo graphql i don't know why i did that there but yeah so it's a polar coins then graphql and we install those and those basically all the needed packages for us so don't add let's go ahead and add those and wait a little bit for those to finish now it has been successfully installed let's go ahead and see on the pack.json so we're going to see all the dependencies installed in here we've got apollo clients redox js toolkits testing libraries a couple of types in here we're going to be needing react react dom and the actual reactor dom graphql and the typescript version which is basically the latest available timescale version in here installed in our projects um yeah so pretty cool let's go ahead and actually this is optional it actually depends on what you want to work with and it's more like you know different kind of personal opinions and and choices so i actually you know me i love using style components so i'm going to go ahead and install style components in here to get started and work with the css style so let's go ahead and add this i'm going to clear out this i'm going to do yarn add start components and since we are actually on typescript we're going to have or we're going to pretty much need a type in like the typing files for this style components to typescript recognize what the type style component has and just to provide the interlicense and you know code checking and all of that kind of features typescript does provide so we're going to install style components i'm going to do an end just a basic unix thing and do yarn add again but this time this is going to be development dependency only because you're not going to be needing types for dependencies ls those there's actually needed but the other hand we could just also need times for stock components only as dev dependencies so i'm going to do our types style components and that should be it so let's go ahead and install those and should be real real quick to get us up and running and it's done now we got some components and the types are actually installed right now and everything is actually good to go so let's go ahead and just close that clear the console and we can get back and we already already pretty much got a basic projects going on in here uh we got a basic graphql apollo installed and we got redux 2k plus react installs so everything we would like need to get started is actually installed now it's actually configuration time and the stuff that needs configuration is actually apollo graphql because on the other hand for like redux okay we already got it configured in here like the store just just a basic configuration just does a configure store basically this one redox js is actually having batteries included which means it already has the kind of a configuration inside of this package and it just like export us with a couple functions to use and to manipulate those so it has everything underneath here it does everything behind the scenes for us and all we have to do is just go ahead and grab the data or grab the functions that needs to do this uh pretty much you know the preparation and you can use them to create a store and prepare all the kind of stuff in here so this coffee gear store is basically a normal configure store for a redux and you need to pass it a couple of reducers and that's that's basically where it is and here we're actually importing or pretty much exporting some custom types for typescript to be able to work with so for the up dispatch we are just like exporting store.dispatch we're making these a type available so whenever we need it we can just go ahead and import the app.dispatch and pretty much we are good to go if you need like the root states the type of the root state to use in terms script you can grab it right this way and the redux or up thunk in here which is basically not going to be needed throughout this video but it's still um yeah you got it right here so yeah pretty good everything is good in here let's go ahead and set up graphql real real quick now for graphql we all know that graphql is actually depending on a schema and this schema should be generated like it should be grabbed to the client like downloaded from a server to the client and the server is actually the end point that you want to point into to grab the schema so for example let's say you want to select points into this anime kind of like website or graphql api so this anime graphql api has already this schema otherwise graphql won't be able to work so it has this schema somewhere on the server what we need to do is actually tell apollo graphql to go ahead and download the schema for us it should be downloaded here into the clients now after it gets downloaded apollo and graphql should know the exact schema to get started working with and we should be able to know like what is the types and what are the dna the scalar types the mutations the queries and everything that we can get started and work with in order to be able to query the api so that's that's the basic part of graphql and providing a schema obviously if you're actually going to do it with your own graphql server so if after doing the graphql server setup on the server itself using node.js apollo server whatever it wants after you're doing that you already got a schema somewhere in there then you have to just like set up the client using the apollo cli to tell it that this is the apollo or this is the graphql endpoint of my server go ahead and grab me and download this schema for me so i can get started work on the front end as well with the same shared graphql schema so that's going to be doing right here and in fact i'm going to go in and create a custom script that is going to automatically use the apollo graphql cli to go ahead and download me the schema and grab it right real quick so let's go ahead and do that real quick in here i'm going to just go ahead and do like a schema download i'm gonna add the new script i'm gonna name it schema then colon then download and mainly using this column then whatever verb just to separate the concerns like schema is just like a specific context then download a specific concept so for example you can have schema and you have like for example schema download then another script schema fetch and yada yada this should be really really you know useful for you to create a bunch of scripts and to keep you know states of them and manage them and and all that kind of stuff now for this one i'm going to be using the apollo cli to make sure we do that so how we can go ahead and grab the apollo cli so let's go ahead and install it globally you can use mpx to just like run it whenever you want but i would rather install it globally because nbx sometimes does quite some time or it takes a little bit of time to grab the schema and all that kind of stuff and if you've got like internet outage or any interruption throughout the internet well you got a problem you can't download schema but depends on the scenario you want to work with you can use mpx so for me i'm not going to be like deploying all of that or all kinds of stuff i'm just going to use for development only i'm going to use an mpx and mpx does work a lot better for me so i'm going to do mpx apollo and this is the apollo cli and all you have to do is just go like service and download then this this particular command is going to like download a schema for us then we have to provide it with an end point and for the end point i mean the actual server endpoint like the graphql server endpoint and not only the server name like not only the domain name for example like google.com now the full endpoints to your graphql for example google.com then forward slash then graphql or you forgot like a subdomain hosting that graphical api it's going to be something like graphql.google.com you got a point so that's what i mean and that's what i want to point it to so the server api in here and for our case we're going to be using this anime kind of like tracking website i said before and this one likely provides us with a graphql api so all we have to do is graph eql and it uses the graphql or the graphyql pretty much um ui in here and and it looks pretty great and you can just go ahead and test throughout this one directly on the site and test some queries you can even take a look on you know what are what type of queries are available the dll types the scalar types what are the queries available all the kind of stuff in here so that's what i'm going to be pointing into i'm going to go back i'm going to point this endpoint into this and last but not least we have to give it like the last argument which is the output or the destination folder we're going to output the generator schema so i want it to go to src then up then i'm going to create another folder called graphql and basically inside of that i'm going to name this schema i'm going to name this graphql schema json and by the way this is a json schema make sure to add the json extension at the end otherwise it will just be crappy and it won't work for you so that's it that's basically all we have to do just go ahead and use the schema and the reason i chose the script in here because this one is going to help you a lot you don't want to just go and grasp every single time you want to update the schema you go and run this really long ugly command every single time just like run the script you got it right okay so yeah as i'm pointing here every single time the schema changes on the server it has to be downloading or you have to update your schema locally on the client otherwise it won't work for you as intended so let's go ahead and grab this real quick i'm going to use vr i'm going to do schema and colon then download and this one's going to run mpx it might take a couple of seconds to fetch the actual apollo cli for us then downloads the schema and then just going to place it in stuff like up and gonna go create a folder for us called graphql and we can are good to go and my bad actually this is should shouldn't be actually graphic ul it should instead be just only graphql because the graphic ul is actually this ui that you see but the actual endpoint for the graphql api is actually forward slash graphql not graph eql so just a quick mistake in here and that's why it gave me an error 404 not found just like saving that rewriting the command it should work and it should generate for you a schema so make sure to spell it right and to get the actual endpoint uh url right otherwise it will just give you under the errors and 404s and there you go the schema is downloaded and ready to use for us if you take a look up graphql we got graphql dash schema.json let's take a look on this really big json because it really like the actual api or the actual graphql server i'm just like pointing to has this huge schema it has a lot of different queries a lot of fields a lot of data to manage it's actually an anime um less website it's a big gigantic database that's why you've seen it all that so yeah it's just like all the data here some scalar times query times field times all the kind of stuff like graphql kind of provide and this schema pretty much going to provide us all the data we need and all the actual types and the knowledge we need in order to be able to query like the actual server from the client side and here using apollo graphql so we got the schema one step to go and we are actually done with that now you got the script you can run it whenever you want and that's actually a good way to get started now pretty simple now we've got everything we need we got setting up graphql just to at least get started with this there's still a lot of other mobile setup need to be done and we've got the up in here and everything we're going to be through now let's go ahead and run our react application so i'm going to do yarn stamped and just basically the scripts that you use for queer react up i guess i'm having another one run in i'm going to be running on port 30 i'm going to run a 30 one or 301 and that should get it up and running so let me get rid of this one uh that should work we got redox application we got hello world already and that is looking pretty pretty great now the endpoint for this to actually show you exactly guys what i mean just to understand how to use graphql with redux and redox toolkit and react and all of them together with this gigantic professional projects we have to go ahead and create something simple something kind of like a basic application and put everything in action for you guys to actually understand how everything can be connected together and how all of these technologies can work together to create the professional kind of like project and make it pretty much you know worth the name professional so this is the server one this is the graphql going to be testing along and this is what the scheme i'm gonna be using of course for debugging all the kind of stuff let me zoom in a bit because i'm gonna be needing to look into like a lot of data in here as we go forward now let's go ahead and set up a couple of things i'm gonna go like close this one we don't need it right now i'm gonna go to the up and just gonna go and create a couple of like you know containers using the stomach components now before that let's go to index.css i'm going to just make sure html body and roots which is just basically the root container that reacts is going to be rendered on i'm going to make sure to have width to be 100 and height to be 100 there you go looks good looks promising anyway and for this one also i'm going to be needing an up container so we're gonna go ahead and style div i'm gonna make it take full width as well full height and [Music] and yeah i believe um i might need a flex and a flex direction to be column and as well align items to be on the center okay sounds good i'm not going to go into the deepest css stuff in here just to make a decently looking website with a decent style and the decent alignments and layouts and all of that so just making sure that works perfectly now we got the updates in here up and running take a look on it now it is centered and everything as we want it to be now let's go ahead and create our home page container so for the frontal structure like my optionaid folder structure and that folder structure i'm going to be using right now is actually i learned this through like a lot of projects i started up a lot of projects i created and also by working on a lot of boilerplates that are being used by industrial you know big companies like airbnb facebook like really really big companies and teams working on these portal plates and yeah i'm gonna just basically use just a slice of this portion uh of the actual projects and and the folder layouts and all that kind of stuff in there so instead of the app folder i'm going to create two other folders one called containers and one other one is going to be called components so if you're asking why i did create these two specific containers with two specific names so this one the containers folder is just gonna basically like the main pages or the main biggest parts of our like application you can imagine those are like pages since right now on the website i'm gonna have like a multi-page application right so this container is gonna hold like a different folders each folder is gonna have like you know it's gonna represent a single web page on the website so for example right now i'm gonna be creating a home page and i love to put in pages like starting with a capital letter and here to tell them that this is a page and i love also to use tsx in here and name this index because this is going to be entry points of the home page then you can have as many other files as you want you can name them whatever but this one is critical name index.csx because this is the entry point of that particular folder of the home page and of that particular container you can name it whatever you want but it does the job perfectly so this for the containers for the components they are mainly like dummy components that all they do just like receive props and render stuff to um you know to the browser pretty much so that's that's all they do they don't manage say they don't know about state they don't know about the redox store they just like dummy components you give them whatever props and they manage the props they might have a little bit like internal state on them but they don't know the global store redox state that the app has so they can't actually pollute the actual redux store or the global state and this is safer to use this kind of like pattern to be able to use it and this is actually like called dummy components you can call them whatever but that's that's what they do in there okay so that's a basic structure that's a pretty pretty basic structure that we can go ahead and get started working with now index.csx in here is going to be like the entry point for our home page so i'm going to open up or import reacts real quick so i'm going to go export right now i'm going to export a function it's going to be home page and you're going to have props and all that now perhaps can be used that way because we are using typescript we're not on a normal regular standard javascript we have to provide interfaces and type ins for every variable for every arguments that we provide now let's go ahead and create an interface and the way i like to put in this the way i like to create my react components actually by defining interfaces that define the props for the particular components then we can you know either you can like explore the interface or not that doesn't really matter but what matters is actually you export the component and the props is actually typed and strongly types and it has the types of that particular interface of the props the name of convection actually is actually starting with an i and if this one stands for interface then whatever the component is like i home page then you prepend it um or you pretty much append it with a props because this is an interface meant for perhaps so all you have to do in here just provide ihome page robs and good to go so you can provide whatever you know props in here inside of this interface and they can be directly typed in their homepage but mainly for a home page we're not going to receive a lot of props because this is like a root level home page so it's not going to be called by something else other than just like for example react router or the index.jsx or something like that so you won't expect a lot of props to come from this okay um pretty cool so let's go ahead now we got the interface we've got everything let's go ahead and create a container so i'm going to do create a container for the home page i'm going to import style components again i'm going to use div and i'm going to make this to take full width full height again make here this point flat side flex direction to the column and align items to be in center pretty sweet now i'm gonna render up the container i'm gonna have an h2 or h1 for the title and i'm gonna name these like um hot anime and just gonna be like having a list underneath it that is the hottest anime of the month or of the day whatever that api is going to actually give us so we're going to render it beneath as a list go into the images all the data we can grab from the graphql api we're going to render it and organize it properly okay so we got hot name in here we got h1 going dart there we've got the container we've got everything we would like to get started working with now this is the home page we got components we got up and all the folder is actually you know composed correctly and everything as we want it to be now it's actually the time to go ahead and put our hands into the redox toolkit and we start actually signing up and adding the redux like a reducer to the home page so for doing that if you're familiar with regular redox you would actually need to add a reducer like you could be calling like a reducer dot ts or for typescript or whatever but in our case if you are using redux toolkits it's a bit different than the regular standard redox implementation so this one is called a slice and slice can be called whatever so you can call it like slice dot tsx or whatever you want so what i would like to pretty much call this one is actually home page slice okay and this is just like a naming convention because later on once we import that we know that this is a home page slice okay so this is going to be a time script and this is going to do all the magic for us so for this slice what we're going to be having it's going to like do a const i'm going to name it home page slice and it's going to have and i'm going to import create slides function and this one is actually in fact going to be imported from relax.js toolkit so i'm going to do import slides in here and the slice just basically a function that accepted particular objects that you know have a couple of fields and all the kind of stuff and those fields can pretty much tell how the slice is going to be created and for a slice if you're wondering what is a slice it's actually like a reducer then plus a couple of other stuff so if you're familiar with redox you got a reducer you got an actions and you got like uh the state itself like the selectors of the state so for those to work the slice combines them all together and puts them into something called a slice so this one it takes an object so we're going to provide it with an object real quick and this one takes a name every single slice needs a name and this name should be unique like you can imagine it as you read user name and this should be unique across you know the whole projects and the whole application you've got in here the whole redox store pretty much for this one i'm gonna name it home page that's it should should make the job and should do it perfectly now we're going to have reducers and this one is actually in itself is basically like an object so this reducers object take a look on this and mapping from action types to action time specific case reducer and this one is like the same way you do create action but instead you define them in here and the whole reducer is going to be defined on this particular object so what i mean by this for example let's say we got like a function and this function we want like on this reducer what we want it is actually to add into like a counter to the state so for that what we need is actually to create an initial state and this initial stage should be typed which means we should be adding an interface to all of that but anything other than that so to make sure that the initial stay is actually going to be um working as expected so let me do like a counter i'm going to do uh counter start a zero okay and here i need to provide the initial state okay so for this one i can do like sets or increments counter and by default for every single reducer for every single function that gets added in here it takes first the state the actual global store state and second it takes the actual action and you remember for every reducer for an action what it does have is just basically a type action or an action type and the actual payload it has that's that's basically what it does have pretty much and my mistake in here so i have to provide it that way i don't know i'm getting this error the parcel failed to match uh is there like another one yeah indeed so that's that's all you need now to make that work actually you have to return yeah you can return whatever you can do for example return um a new counter and how you do that you just like return state dot counter plus equals for example where is the equals plus one and that is it this one is going to like make that work perfectly for us um you know you don't have to return for this state to be actually working because it can still working without return sometimes if you don't want to like mutate the state directly this is not actually a mutation by the way because it's going to use immutable js and by just like doing this one the reducer will know automatically that you assign something like you assigned like a variable new variable in here it's going to copy the state create a new copy of it and it's going to assign this new copy to actual store state so that way ensures immutability i'm not going to be talking about this but sometimes you can return but since here we're actually directly mutating that it's all good pretty simple appreciate the point and you got plus one and by the way not i'm saying that this is just not mutating the state redox reducer in here is not actually muted in the state just for those of you who are going to come in the comments and say oh redox redux should never mutate the same yeah you're right and this is not muted in the state in fact this is just like an implementation that is you know just you do it because it's easy to do it this way but three actual slice function in here it's actually smart enough to know that we did a mutation in here it's gonna copy this one create a brand new copy of the state and it's going to assign it to the actual store so you have you're not actually going to do a mutation to the actual global react state hope i'm clear on this so that's pretty great that's all we have to do to create actually a slice and to create a reducer so right now you don't have to create new actions you don't have to create an actual reducer all in a single place now how we can grab the data or how we can like explore the action in order to manipulate that's how we can export this particular function luckily the slides have all that's covered so we can do i have to take a look on the actual home page slice there's actions case reducers a name and reducer and this is the reducer that should be exported and imported into the actual store and those are actually the actions that you got right down here so now what we have to do in here you can go ahead and export um we can go and like export from home page slice dot actions and whatever you want to explore in here for example um should be cost increment encounter all right and we should also do export default home page slice dot reducer and that is it pretty simple as that you got reducer in here created automatically for you from the create slides function and you got the actual action which is a normal action take a look on it it's actually an action creator with payload and this one takes in arguments as only the actual action we want nothing more nothing less you're not going to be providing the state or something like that but still this is going to be automatically provided and created for you and you got the reducer to care of all of it right here and you don't need to like switch case or create this really big producer ugly function redux toolkit takes care all of it all and it makes it look absolutely amazing so let's go ahead and get rid of this because this is just a basic example showing you guys what you can do with it i'm also getting rid of that we're still going to have reducer and everything now for the actual application we create we have actually an anime list right so an anime list is actually going to be like per pages each page i have have like a couple of enemies and all that kind of stuff so let's go ahead and take look into the graphic here in here and the actual schema it provides so there is actually a page so this page you know you just like use this query with a page number so it has some pagination going on behind the scenes so you can go like zero one two and you can you know paginate throughout this using the per page in here and you can have whatever per page you want now the page you take a look on it it does have a media has a users for that page it has like staff has characters studios media list many many many stuff in there but who we should be carrying here because all we want is actually to render out a couple of like animes that are hot for today so we need to grab a list of animes like a couple of data bots this anime like description the title the cover or banner image um like tags for this particular anime and this just basic stuff right and this all being held up for us on the media query in here so we have to query page first then inside that page you have to query the media which has all this types ready made for us okay so that's that's basically what we want there and that's what we want for the actual state to be in so the initial page stays in here should have like the actual page state and we should be having like a list of animes for for those so we can just like have anime um bliss and it should be an array for now it should be like an array but this is like doesn't have any types to work with or something like that so this way we're not going to be able to work with it properly with typescript so for that case we already got actually the actual schema of the graphql now the second thing we want is actually how to provide or how like what are the queries that the graphql is going to send in order to grab this dna from this graphql server so let's go ahead and write the graphql queries first in order to be able to generate or auto generate the actual typescript interfaces for us then they can make sure that we can use those typescript interfaces ready made here and we can just like use them right into our state and you know have them all typed together nicely using timescript so let's go ahead and do this and all we have to do about that is actually creating or adding and branding new script so this script is basically all it does is you're going to use the local schema and we're going to be having like a new kind of like graphql uh queries going on and this is going to just like combines them together and generate the interfaces throughout those okay so um actually before adding this this script in here we have to add a query at least in order to make this work now inside of the graphql folder in here um we can go ahead and add um let's let's see so graphql folder and i'm seeing that we should um [Music] yeah so let's go ahead and add the first to setup out like a polar graphql server or the actual client itself so i'm going to add typescript and for this one i'm going to do like apollo client in fact i'm going to explore this one it's going to create a polo it creates pretty much um client so we're going to import this one for a polar client or um so let's go grab i believe its name is apollo client so i'm gonna import this from apollo there are four slash clients as far as i can tell this is not how you spell a polar client so polo clients and this one takes a couple of options like the uri you want to select point into and that's we want a basic uri which is this one but it should be a graphql instead of a graphic url so you shouldn't you shouldn't actually forget about that stupid mistake there and also we have to provide it like which cache it should work with for now we're just going to use in-memory cache so like apollo graphql is going to cache the requests in memory so if you like you know close the browser or something the cache is gone and you have to like redo it from scratch but there's other types of crash in here you can really learn more but for now in memory cache we should do the job for us perfectly and without any issues now we've got the apollo clients in here we can go and export it we can use it whatever now let's go ahead and provide this throughout like the provider throughout this application so i'm going to be using apollo provider and i'm going to provide it with appliance i'm going to import apollo i can actually spell a polar clamp properly so that's copy this and put it down there and the reason we're actually doing this apollo provider just wrapping the actual application because this is the main entry point for our application and this is actually going to be using select the reacts context api so this apollo client briefly is going to be available throughout all the components inside of this up component so all the child and all the children pretty much going to have this apollo client available either throughout hooks or higher order components that react can provide throughout these pretty cool so we got the basic stuff set up we got everything we're going to be needing now it's actually time to go and create some simple queries that you can use for graphql then we can use to generate these typescript interfaces so inside of the op what i'd like to do is actually create another services folder and this one is going to be like all about services what i mean by services like like a singleton class object instance that can allows us to do api requests either restful api request or graphql request which is in our case is more about graphql and i would like to create another folder inside of the services i'm going to name in this it's going to be more about anime and so i'm going to be naming it anime page or or something like that if i'm if i'm getting this right or like um page service i'm getting this anime service okay should make more sense to it that way so index.typescript this should be the entry point and i said before this is a class and i i love to put it this way as a class because once you put it as a class you got all the functions like beneath each other's and all of these functions actually like all they do is just like do requests and receive response and hand them properly then handle or hand them into the actual react components then you know they encapsulate and abstract all the teeny tiny details or you provide like um you know like a zoomed out api that you can use so that's that's the point i want to do right here so i'll name this anime service i'm gonna be a class i'm gonna export uh default it's gonna be new anime service and that's that's basically all we have to do right there so this is the anime service we got the class we've got the instance server app and let's go ahead and create a queries so i'm going to create a new folder called or pretty much new file called queries.typescript and this file in fact decided the enemy service is going to be all about queries that belong into that service only if you want another service and another query is related to another service you know you put it inside of that folder and that way everything is actually organized the best way possible and you can quickly go through your code and quickly understand which file belongs to whom and on all kind of stuff in there pretty cool now let's go ahead and jump into creating the query in here so for a query all you have to do is like create a regular query make sure to export it do a const and what i love to name our queries actually give them all capital case query names at the beginning there so for example get anime page okay and this should be pretty self-explanatory i'm going to use the graphql or dql tag which is from the gaf ql tag in here and you don't have to install this because it's actually going to be installed from or pretty much like where the actual graphql and apollo you know uh moto is going to be installing so we got the tag in here and this is where you pretty much provide uh all of those if you're not familiar like how to work with that and react to never do it before well this is all you have to do it like inside of the template literals like style component does you have to put in here you have to put like the whole query schema in here inside of that and likely if you've got something like uh graphql and you've got some apollo graphql extensions for example this one installed it's going to give you a lot of like you know help and into license and you know code coloring and color code hints and all the kind of stuff so make sure to install those i believe there's another extension called graphql on itself and it got it installed yeah that one and that one should also tell you uh like how graphql should you know it gives you something to license and color um highlighting and all of that kind of stuff so yeah extensions do really really help with all kinds these type of stuff okay and they are really really important for you to know now for this one all we have to do like run a query and make sure to name your query like right now name it a perfect name because later on you're gonna use this name inside of your type script are kind of like files and you know the the interface is going to be generated with this name prepended on it so make sure to choose the right name for it that is descriptive enough to the current query and current request and the data is going to be like querying out from the server okay so we're going to do get enemy page and this one is going to be like a simple query and for the page itself as we did before it takes a page which is an integer and it is required and a per page which is also an integer and required so we've got page in here we've got per page now we take a look on the page in there and the page we just like have to like we do forwarding the arguments so for example this one you can imagine this is a function it takes the actual arguments and you take the values then pass them through to the actual query and this is where the graphql query goes so so you provide them to page then per page and the reason i'm like prepending a dollar sign in here and this is how you actually tell that this is a variable name on on graphql or this graphql tag in a polygraph kio otherwise it won't work for you properly so pretty cool now we got the page now we have to actually do something inside of the page the page has a media and media has all of these different types inside of it so let's go ahead and grab the actual data we want we want to id want a description of the current item and i'm sorry i need a media first so we need to provide media then we can do id and luckily media is lowercase cool got description uh maybe you're going to be giving a title for the actual anim um also going to be needing a cover image like which the cover image is and there's actually different kind of like you know sizes for cover image i might need something like a medium there is extra large large you know all of that but i'm just going to need only that and basically for the title also if you take a look on this i'm not sure where is the title but it should be somewhere in here there's a lot of fields like ridiculously a lot yeah i don't know where is the title actually but yeah so for example take a look what is that um the id is actually an integer a tag is a string um yeah so yeah let's let's just go ahead and use use it from that perspective okay so tyrone here has actually had different formats like uh romaji i guess has english has native which is you know native japanese name of the actual anime but for us we only gotta be eating english and that should that should make his uh pretty self-explanatory i guess so that's the basic query that's all we need for that query i didn't add everything but yeah i'm gonna use those basic stuff for now to get started get like a basic request going on and grab the data from it then we maybe can add other fields and you know add them to the ui so now we got basic queries to get started work with now let's go ahead actually use the power of apollo cli alongside typescript and the schema we got already the graphql schema to generate the interfaces needed for our like you know the query in here and to be able to use it throughout the application so this one i'm going to be creating another script in here and it's going to be beneath this one so let me add a comma go beneath this one i'm going to name this for one um schema generated think this should do a pretty good name so yeah i mean