Build Next.js 14 Apps with Tanstack Query v5 - React Query Tutorial

hi guys welcome back to another video next js4 I'll talk about t St cury version 5 in this video this is very important topic and I get a lot of messages to create a video on it using NEX gs14 app directory structure so this is also called a react cury so in this video I'll first start off create a new next js14 project then I will install tag cury and then I will install the debugging package that it provides so that we can debug our data that we fetch from the apis I'll start off talking about the curing that how we can call any kind of API to fetch the data using tan cury talk about different statuses it provides like the loading status pending status error status success status and mainly the data which comes back from the API I'll talk about how we can filter out data while curing using the tan query I'll also talk about how we can add parallel ques to fetch the data from multiple apis I'll also talk about how we can add dependency checks so that we wait for next cury to be performed until the response from the previous cury is not returned finally I will talk about very important topic called mutations I'll talk about how we can post request update request delete request using the mutations that t query provides and finally I'll talk about invalidating data when we post a new data without refreshing the page the get request query should be automatically triggered and in this stand query we call it invalidating data so I'll talk about all of these topics which are required for every kind of project that you would build and you use tan stack cury verion 5 so before moving forward I just want to request you guys to check out my WhatsApp Channel Link in the description of this video follow my WhatsApp Channel because in this channel I quickly update you about the videos I'm going to create and talk about different tips and tricks related to coding and programming go check that out and do follow my WhatsApp Channel as well also if you check out my playlist next justs 13 tutorials app directory it includes 40 plus videos and that contains crash course talk all about different topics related to Performance theming server actions building full stack application State Management Systems protecting routes Authentication systems upgrading from nextjs 13 to 14 theming and all these different topics it contains pretty much every topic for you to become a good next GS developer using App directory so you can see I'm putting a lot of effort it's just a request to you guys to do subscribe my channel that will encourage me to create more videos for you guys so let's get started by creating a new NEX gs14 project I have open up an empty folder in VSS code so in the terminal first of all you need to have a latest version of node installed in your system so I'm using the version 20 of node and it will have a version 10 of npm all right so I'll be creating a new nextjs 14 project I'll start off by writing npx create next app at latest and then I need to provide it the name I've already opened up a folder that contains the right name so I'll right dot okay so it's going to create uh different files and it's going to ask me few questions as always so I'll go with the typescript I will go with the es lent go with the Tailwind for now I want go with the source folder let's go with the app router no for import alas so it's going to download different dependencies required to run next js14 project meanwhile it's installing these dependencies let's go to the documentation when you open up the tag.com um it gives us a lot of different options and one of the most uh useful one is the tan stack cury I'll click on it and it will take me to another page from here I'll click on the get started and here we can click on the installation tab on the left side from here we need to install these packages to integrate it in our next js14 project so first of all let me copy this line npmi at tanack SL react dcy So currently it's still downloading different dependencies so let's wait for it so after few minutes it has installed and completed creating new NEX js14 project so first of all I need to install this Library tan tag react cury so I'll be pasting it over here in the terminal make sure you are in the same folder where these files exist so I'll hit enter it's going to install install this package and it's going to add its reference in package.json file in this dependencies you can see that it has added for the version 5.8.4 okay so if I go to the documentation if I go down uh it is recommending us to install this eslint plug-in cury as well for performance and for suggesting us different kinds of errors that it can generate since we are already configured the es lint in our next js14 project while we created it over here so I will also be installing the es lent plug-in cury in my next js14 project one more thing that I would be installing is the dev tools uh which is very beneficial so click on the dev tools from the left side and I will be installing the dev Tools in my project so I will add npmi T stack react cury Dev tools so you can see that it is going to install these three packages in my dependencies and also the es link plug-in cury in the dev dependencies here all right so let's write LS yes we are inside it let's try running our project to verify if everything is working fine then we will start off configuring this react cury uh by creating different providers and run our code so let's go this is the Local Host which I have already opened so let's refresh this and uh it should open up the default UI by next gs14 which is being fetched from this page. TSX we don't need any of these I'll keep the main tag so I'll remove the internal dives from here all right if I save it you will see there is nothing will be appeared this black background is by default coming from this uh layout which is this global. CSS they have already added so uh this video is not focused on the UI stuff but uh mainly on the functionality stuff that I will be focusing on in this video so first of all what we need to do is I will be creating a new folder inside it let's click on the package.json um actually I need to create a folder so I will be creating providers here okay and then I I will be creating a new file I will name it tan stack provider. TSX okay so inside it I will be using that plug-in for creating the snippet R fce so I'll hit enter so it's going to create this much code and um here I don't need uh this thing in fact I need use State from here so so use state from react after this I will be importing the cury client and quy client provider that I would need so I will be writing the cury client and cury client provider and it is going to be coming from at tanack react cury all right and then I will be needing the dev tools which I'll be adding over here it is not required but these are very important to debug your code so react cury Dev tools from react cury Dev tools so we have imported now inside the T stack I will be fetching the children because I'll be wrapping my whole layout complete project within this provider that's why I'm creating it so let's bring in the children I need to provide the type for it since I'm using the typescript so children react. react node all right so error has gone and after this I need to write Cy client a variable then I need to create a cury client I need to call the query client Constructor okay and in the return statement I will be using cury client provider it needs client and I need to provide the cury client all right inside it I will be bringing in the children and then I will be adding the react cury Dev tools initial is open equals to false okay it is I think open right all right so let's save this file and uh let's go to the layout and in inside it I need to wrap whole application within this provider to enable T stack cury uh in the whole next just4 project okay so I will be coming inside the body 10 stack provider so inside it I need to bring in the children all right because I'm passing these children over here so if I save this file you will see that in the terminal it is showing the error for the client component um I'll show you how we can fix it but first of all yes it is automatically imported the T stack provider and one thing that uh I always like to wrap the children within a div so in case we want to add some kind of styling to it make things uh the center adding some kind of container styling so we'll be able to add this thing over here all right so currently we have configured it over here but still there is an ER the reason is that uh we need to add the use client at the top of this provider that's why we have created a separate file for this provider because we needed to make it the Ed client I could add this cury client provider directly inside the layout but I don't want to make this whole layout a client component that's why I've created a separate provider all right so currently there is no error in the terminal let's go to the browser and see that this thing at the B bottom if I just close it down you will see this icon is visible it is showing uh that debugging tool that I have installed it is showing the curing and the mutations and when I'll be fetching the data from any kind of API it will show me the different data different kinds of uh uh processes that it is performing so it's quite useful if we come up with some kind of error and we want to debug it all right so I've just closed it for now okay so current currently we have configured Dan cury now let's try to execute any API so I'll just removing um actually closing this tab we don't need this now so in this page. TSX file this is the Home Route uh first of all we need to import few stuff at the top so I will be first make it use client because I will be using different packages that require component to be client component so first of all I need use cury from T stack and then I will be using uh use is fetching from tan stack okay and U it will be from tan stack react Cy all right so this has been imported so now I need to call some kind of API so I'll be using a public API for to elaborate you guys this is called the Json placeholder.svg so first of all let's add the data for now and then let's use use cery and I need to give it the type after that okay then I need to provide it a function inside this function first of all I need to give it a unique query key that should be unique because we need to use this cury key to invalidate data later on okay so to-dos is the cury key that I have provided to it and then I will need to provide it cury FN this is refering to the curing function okay so then it is going to call an API inside it so I'll be pasting that URL for fetching all the to-dos this is the syntax that I have copied from the documentation you can also copy this whole syntax from here and use your own API so it is going to give us the response and then it is going to to give us the response. Json all right so let's save it so this is going to format it itself because I'm using prettier so it's going to format it now this data is going to contain the data which is being returned from this API now the benefit of using the cury the tan stack query or the react query that along with the data it provide us the other options as well like is loading is error is Success so is loading is during the process of calling an API until it Returns the response if there is an error it will be coming inside this error if the data have been fetched successfully then we can add a check of using the is success status it gives us a lot of different options if I write is you can see that is fetched is fetching is loading error is paused is pending so this is the benefit of using the cury along with some other benefits that I'll be talking about in this video so these are one of the most important uh options that it provides that we can use so let's try to uh render this data first of all I will be logging this data and see if the data is fetched or not so I'll just save this file and you can see that I'm using the console ninja extension so it directly outputs the data So currently it has called an API and you can see that it is showing all the different 200 objects for these two do so the data have been fetched successfully using the react cery and coming inside this data and we can add different checks let's try to write the is loading like is loading over here so uh we can uh return something inside it so I will be uh adding um some data inside it so let's try to add that so main tag this is going to send enter everything this is the Tailwind Styles um so all ques are fetching currently okay so let's add uh it is loading okay so let's go and let's open up U um this thing and let's refresh you can see that it's showing loading for one second and it has vanished away means that uh this got triggered and after that this main got trigger it does not contain anything that's why you cannot see anything over here let me zoom in this browser and let's try to refresh hard refresh you can see that is loading is visible all right so this is how we can add checks for the is error is success as well so like this is error so there is an error all right so now let's try to show the data in the main which is being fetched from here one more thing that I want to show you that we can add aliases as well like colon and we can write the Todo data this is an alias we have added over here so let me copy to-do Alias and now we need to use this Alias because we cannot change original name which is the data we need to change we can have multiple use queries within a component um then we need to add see different aliases we cannot use data for all the ques okay so now we need to iterate through these uh this data so first of all let's try to add H1 and this is going to show todos and we can write the class name let's make it Excel below this H1 we can write the div inside this div we can iterate through data and map too let's add these Arrow functions and then inside this div we can um render the data so inside this div uh we can write the hed2 okay so if I check the output of Ed uh we have this title and for now I will only be outputting this title so let's try to add uh title so I'll be adding the space first of all plus to do do title okay it's not helping me out currently because I've not added any interface which I'm just going to add uh and show you how we can add that let's try to add a flex Flex column and the Gap column two uh so that it looks nicer uh let's save this file there seems uh to be missing key prop all right so we need to add missing key prop first of all let's try to add flex and then we will be adding the the key and we can add the to-do do ID as the prop to it okay so data has to be to-do's data okay and we can add the any type to it so the error is gone and now if I go to my browser you can see that it's showing all the 200 titles which we have fetched from that uh API that's awesome and uh first of all um I want to show you that we can add the typescript checks over here current I've added any so we want to add the interface to it so let's try to add that I'm going to add the interface and I will be adding the to-do and um it is going to have a user ID I have seen that from that API response I'm going to add ID number I have created a separate video on the typescript for the nextjs app directory project I've talked about all kinds of interfaces types nested interfaces how we can think think about uh creating interfaces check that out if you want to learn that so I will be writing the title string and then it is going to have a completed equals to Boolean and now I can write the to-do an array type over here all right so let's save it it should show the same data let's try to refresh it's showing it is loading and then it shows the data all right so it's working fine and now the benefit of creating this interface is that when I write too uh dot it's showing the ID it's showing the title that the title is visible as the property okay it should uh it should actually show this thing all right so rather than adding to-do I can add the too data type over here as well because I've created its interface all right so now it's loading up the data now let's talk about creating uh calling multiple apis parallell using the tanack cury so I can use the other apis as well let's go back so let's try to call the users API all right and currently I'll be using the name property of it for now okay so let's move it down and um I'm going to copy this whole thing and uh I will be pasting it below all right so I will be changing and adding different aliases is that I can add but uh for now uh you can add these checks yourself you can add Alias so first of all let's try to add the users data the error is gone um I won't be using it for now I've already shown you what is the purpose of these things all right so here I'm going to change its key users and then I will be changing the last keyword of it and it will fetch all the users Okay so now uh we have got the data in the users data array okay so now what we can do is we can go down first of all let's try to comment this out it's just confusing I'm just going to copy this H1 let's paste it over here and uh let's try to add margin top to nine so that there has to be some kind of space let's add the users and we have the users data okay so this is going to be user user. ID and then the user. name there is no title in the user there is the name it's showing different error because to-do does not contain the name property so I'm not going to create the interface for it I've already shown you because um it contains a lot of properties I've I've created a video to contain to create interface for these kind of data as well check that out video typescript in nextjs 14 or 13 uh you can learn uh creating these interfaces for now I'm going to add any over here all right for users data and also I'm going to write any over here because the name property does not exist if I just save this file let's go over here let's refresh and uh it's currently loading so what happens let's go and let's debug and there is an error all right so Observer last update curing options GC time so let's save the file again okay sometimes it happens that it does not re-trigger properly so I have saved the file multiple times and it has compiled again and I'm going to go and it has loaded the data there does not seem any error now let's try to hard refresh now it's loading and yes it's showing the data over here let's go down there should be users as well all right let's go down uh there does not seems any yes there are users and uh it is showing the 10 usern names currently okay so for now let me show only the five items for this to do so that we don't need to go down so slice five okay now let's save it let's go and yes you can see that it's showing the five items and 10 items over here all right so there are few more things that I want to show you how we can filter out the data from here for currently you can see that uh this is this to-do is actually returning all these four properties but we only need ID and the title so how we can remove completed and user ID from it we can use this key select which is provided by this cury and uh after this we can write column toos which is the name of that query key which we have written over here and uh then we can write the todos do map too Arrow function and inside it we need to pass too. ID and then we need to pass the title to do. title all right so it's going to throw an ER the reason is that we are filtering out the kind of data which is not matching with this query to- do because we have written four uh Keys over here but we are filtering out only two so for now we are only going to use this interface which has the ID and the title because this is what we need Okay so let's try to save it and I'm going to Output this data now Todo data let's try to save it and it has outputed it let's try to go and you can see that it has outputed the 200 items but it is only containing the ID and the title this is going to speed up the response time and this is how you can filter out the data which is required uh by your UI okay and next thing that I want to show you how we can add the dependencies so that until this API does not return the response I don't want this API to be triggered so we are actually using this uh cury key and uh we are using this data Tod Do's data and we can check over here so here what we can do currently if I go over here let's refresh you will see that both of this data shows at once because the API runs parallell okay so uh but sometimes when API runs parallely this data can come be a little bit before but since we are using the Json placeholder API uh both takes same time okay but uh if we explicitly want to add check so here we can write the enabled over here and then we can write this exclamation mark two times and then we can write to Do's data after this okay so now it's going to check that if to-do's data contains some kind of data if yes then it's going to trigger the second API now if I hard Refresh on the browser you will see that the to-do's response will be printed first and after few milliseconds depending upon how much time uh this query takes um this users data will be printed uh after some time okay so let's try to refresh this page now you you could see the flicker that uh it showed up uh the data and then after half a second I think it shows this user data so this is how we can add different dependency checks based upon the other uh quy's response now one last thing for you guys to test yourself is to use this use is fetching package which I have already added what it does is currently we are using is loading to see if this first query actually is loading or not is in the process of fetching the data from API or not this particular package use is fetching actually checks all the ques globally until and unless all the ques does not return the response we can use it to um add some kind of loader add some kind of popup and when all the queries will be returning the data um then this is going to gets true okay uh this is going to gets false actually okay so currently what you can do is just quickly um you can write any variable and after this uh you can uh call its Constructor so use is fetching okay actually we don't have this Constructor all right so now this variable is fetching is something you can use to check uh for all the queries that you are triggering you can check it yourself I've just explained you what it does all right so we are done with the curing now it's time to talk about mutations invalidating data so I'll be creating a new route for that topic so I will be creating a new folder inside it and let's try to add Todo use over here all right so after this I'm going to create a new file and it will become a route that's pretty simple I've already created a complete crash course on it and let's try to change its name to to-dos um over here and over here as well I'm going to remove page. TSX because I'll not be coming back over here for now okay to make things simpler all right so first of all we need to use mutations if I go to the documentation and these are the mutations that I'll be talking about uh let's go down I think uh where is that uh here so we have this curing and then we have this uh mutations cury invalidations invalidation for the mutation this is what I'll be talking about I'll not be going to the docs much because there are a lot of things you will get confused okay so in this page. TSX file first of all I will be importing few stuff at the top let's try to add the use client at the top over here all right and uh let's try to import use cury as well because I want to show you the invalidating stuff and then I will be using the use mutation and then use client use cury client okay and this is going to be coming from the tanch react cury so tanch react cury over here all right so we are done with it and uh we have this too so first of all what we need to do is um so um I will be posting a new to in my API So currently I have used this API which is the public API I cannot use the post request to it because in return I cannot get the response uh so uh without uh creating the actual real API I'm going to use the Json server it's going to give us um um a file which will behave like a real database okay this is just for elaboration so U first of all I'm going to open up a new terminal what you need to do is you need to install npmi Hy G you need to globally install Json server okay I've already installed it and uh this is my version currently so Json server hyen hyen version you can see this is the version I've already installed so this is something which I'll be using the Json server so once we install it using an npm package we need to create db. Json file with some kind of data inside it so I'll be creating a db. Json file inside it okay and inside it we can add some kind of data so let's copy it completely I don't need the comments profile let's remove it and we can change it to dos and and it contains the ID and the title these two properties is something we are already managing let's end up like this all right so by default this is behave like a database okay and uh we want since over front end is running on the Local Host 3000 we want it to run on the Local Host 3001 so what we can do is we can actually uh create a new file I think so we can create a Json server. Json file and in that file we can add the configuration so let's add the Json server. Json file and inside it I will be creating the configuration for the port so Port colum and this is going to be 3001 okay so this db. Json is automatically going to pick it from here so this is the data now if I want to run this database on a URL public URL that I can use to call some kind of API to fetch some kind of data or uh run some post delete request inside it so this is this is the command that I need to run Json server watch db. Json we could change the name of the file um U and change the db. Json in the terminal as well if I hit enter you'll see that it says hi loading DB done and our apis are running over here Local Host colum 3000 this is the public API that we can use so if I open it up on the browser you will see that it will give me the response uh of that data which I've added in this file so it's so simple all right and I will not be adding other data manually in fact I'll be posting new data in this database using this API Local Host colum 3001 SL todos this is not the route but this is an API on the backand side all right um so here and um if I go to the documentation let's go to the mutations uh we can actually copy paste this kind of uh data that we need so I'll be copying this whole structure okay which is providing me so let's go over here app mutation all right outside this return statement so we are actually using it's using the exos so let's try to install the exos as well we can use fetch as well so let's try to install npmi exos so let's hit enter so after this we can actually import the exos from exos there will not be any error now let's run the server now again it is running on the Local Host column 300 And1 all right so here uh we are actually posting a new to-do so now what we need to do is mutation also provide provides the success status error status settled status pending loading statuses if we go to the documentation you can see that we can use the separate if statements before return uh to show some kind of error message or we can directly use this uh mutation do is pending adding a to-do mutation do is error if there is an error is Success to-do is added completely and this button uh this is the main point uh this uses the do mutate function do mutation function it is actually adding a new object inside this API SL too I think we need to update it yes we need to update it let's first copy this URL uh the API which we have just created right so this this is the URL all right um and then use mutation U I'm not going to create uh the interface here I've already shown you how we can create that and here I'm just going to going to copy everything from here and uh I'll be just explaining you this is so simple and here you can see that um it's actually uh showing some kind of error argument of typ is not assignable to parameter of type void the reason is that it's um it's it's throwing some kind of error because if we go to the top uh this is the variable which is being used so I will be writing any after that over here we can write the type as well you can see that the error is gone over here all right so mutate function is very important it is used to uh uh perform the right deletion or editing the data using any API okay we could call a function and we could run this command in within that function as well or we could create a form as well inside this return statement fetching the name title description whatever we want and then then run this function within another function it's up to you okay so let's save this file let's go over here let's see let's try to refresh first of all if everything's working fine but currently we have created a new route SL toos so let's go over that route so/ toos in the new route I'll hit enter and it is showing me the button create to-do okay first of all I'm going to open up this one I want to make everything Center so I will be just adding this class to that div as well okay so let's try to add this class so it shows it on the center all right so it is already centered now let's try to click on it I've clicked on it and it has shown to-do is added and it's showing the create to-do button it's not showing any kind of data here here but um if I go to the db. Json you will see that it has added the data in the DB using that that API URL that we have created so we are using the mutate function it is generating ID and the title and quickly it is adding the data within the database okay local database which we have generated using Json server okay let's let's close it so it's showing these states as well to-do addit as well and then it's showing this button here as well all right so here uh first of all let's try to to load the data as well so within this Dev I'm going to add uh the data so that we can um see the invalidating effect um so this to-do data is not available um what I can do is I can go up first of all and uh I can open up this thing and I can simply copy paste this thing because because we are fetching the data and uh we need to use use cury to fetch the data I'm going to write the use cery over here I don't need all of these states for now I don't have any interface over here uh which we can add obviously and let's remove the select as well uh so too uh let's try to add any so the error is gone um so here we have the to-dos data VIs uh but this data has to be fetched from that uh URL that we are using because this is the URL where we are storing the data so I will be just uh removing everything from here so let's try to add it over here all right so um this is we are already having the ID and the title uh so we don't need this select over here okay so let's save it let's try to see if there is no error yes let's go here yes and let's refresh and you can see that it's showing this data and uh it's being fetched perfectly okay and now if I click on the create to do you will see that uh there has to be three items in this DB okay yes there is three but um it is taking some time to load the data if I try to click on um create to do button again you will see that it's not showing the fourth item now if I go back and try to save these files and go over here obviously it will refresh the page and it will show the data because it will uh fetch that API again and if I try to create to-do button again it will not show the fifth item uh because U I need to refresh the page if I refresh the page it will call an API again and it will show the fifth item all right so now uh we need to revalidate it so that we don't need to refresh the page it automatically show the latest added data to add that I've already imported the used query client but before that I want to show you the different states that it provide so mutation function we have a on mutate okay and it gives us the variables property which you can log obviously to see what comes inside it uh what have written okay um there has to be this Arrow function okay and inside it um what this on mutate means that a mutation is about to happen this is the life cycle of it okay so after this we can have the on error here as well um and then it gives us the error it gives us the variables uh um and then it gives us another one I think the context yes okay which you can log that out and obviously we can uh log an error message over here so there is an error okay and uh obviously we can log the error do message over here if there is an error and this one is important that own success okay and it gives us the data then it gives us the variables then it gives us the context as well let's try to add the arrow function so let's try to log this out success and then the data and uh we have few more stuff which you can like the unsettled like unsettled means that uh no matter if there is an error or there is no error the data is in both cases this own settled is going to get triggered okay so you can have your own logic which you can use in your recurrently I'm going to be only checking this one so let's try to save this file and let's try to open up the inspect console window okay and let's try to refresh all right now I'm going to click on this create to-do you will see that uh it's showing this mutate is about to happen uh this is coming from the on mutate and then it shows this success data there was no error and it showed it step by step first on mutate on success and then on settled if we had to write that all right so um now I'm going to create U I'm going to revalidate it so we don't need to refresh the page let's first of all remove all the data that we have created so that things are not messed up okay so let's save it let's try to refresh it currently uh it's only showing the Json server which is coming from over here all right um currently I've not created a form again I'm using this uh do laundry title um in every request all right uh so now I need to use use cury client so inside this to do component I will be creating a new variable query client and then I need to use use cery client okay so use this cury client variable which we have created so after the data is success successfully added in the database we can use Yuri cury client and invalidate ques okay and after this I need to provide the cury key and I need to provide the name of it if I write if I have more than one queries we can write the query Keys uh U I think we could write more values there is no query key here let let's see uh query key there's only one cury key sorry for this So currently we only want to revalidate this todos cury key over here I'll be adding its name over here all right if we have more things that needs to be fetched we could write over here as well all right so let's try to save this file now and once I will be creating a new data it should be quickly visible over here uh below this Json server all right uh there is too much Gap above um Let's ignore that okay so let's click on the create to-do all right so it has quickly shown and uh refreshed the data from that DB and it has uh here you can see that in the terminal it's showing the post request and along with that it's showing the get request it means that when we click on this button create to do along with that it actually trigger the get request as as well okay so if I click on the create to do again uh it's going to run the mutation again it's going to uh show me the success status here as well okay so this is the data which is coming from that and it's showing this ID this is the new data which is added it's not showing the complete data from the database okay create too create too create to do and we don't need to refresh the page this is called the invalidate queries using the T tag query or the react query you want to say so I think I have pretty much covered if you have liked this video learned something new do subscribe my channel I'm putting a lot of effort creating these videos for you guys so there are a lot of different topics as well in t tag you can check out its documentation as per your requirement uh you can uh check the documentation but I have pretty much covered all the topics which are required in most of your projects okay so thank you so much for watching guys see you in the next video don't forget to subscribe my channel comment below if you have any question thank you so much

Channel: Programming with Umair

Views: 11,606

Keywords: next js 14 react query, react query, react, react js, nextjs 14 tutorial, mutations in react query, parallel queries in react query, tanstack query, integrate tanstack query v5 in next js 14, invalidate mutation in react query, tanstack query v5, nextjs app directory tutorial, nextjs 14 crash course

Id: 0YnABMEy6wY

Length: 48min 1sec (2881 seconds)

Published: Tue Nov 21 2023