Why I Still Use React Query with Next 14

hey there by gorgeous friends on the internet how's life hopefully it's all good with you it's sow one here it sucks I can't get out of the house Scotland is stuck in North Pole and Santa's nowhere to be found so in today's episode I want to address a question that you guys asked me so many times and that is is react query still worth using with nextjs especially now that we have server actions we can fetch data and the server component right and cash it we got 50 Shades of cash so I'll show you how we can create this application where we still have server side rendering but we have the ability to control and revalidate the data live on our page so let's have a look into it Jesus I forgot I had the react code up there how scary all righty let's get going so I have an x14 project set up here and I set up a couple of other things like the database here for us just so we can start fetching some stuff but that's pretty much it I'll guide you through everything else again the full code is going to be on GitHub but just follow along and let's have fun Okay cool so let's create a compos component I'll create an input component so we can create a post all right so it's going to have just an input with a submit button so let's head over here to I just created a new folder here called components and in here I have this posts okay post form I should say let's clear this out and I'll guide you through all the code okay so I'm using react hook form for this so the first step I'm going to do is just import a bunch of dependencies so I'm going to add use client to the top here make this a client component and and from shat CN I'm just going to import a bunch of forms and I have my form validation here as well so let's head down here and again this doesn't really have to do anything with the concept I'm trying to show you so I'm just going to go through quick quickly through this okay and then what we do here in this post form Well what we'll do is we'll create a form we'll pass that schema in and we we'll tell it that it only accepts one value which is the content and here I'm using next safe actions and this is the package I'm also going to be using in my next 14 course that's going to come out very very soon I'll keep you updated on this and then on submit here I'm just executing that and resetting the form all right and here's the rest of the form pretty much it's just one input and that's that cool so let's add it here so I'll just import it here I'll say post form like that and hit I also created a post component here and I'll add use client to the top and it's only going render out a text for me just a H1 of hello so how can we actually fetch these posts here well I created a server folder here called actions and in here let's have a look I'm fetching the post just using a simple function okay you got to make sure you add you server to the top so this gets called on the back end and here I'm just using drizzle to get all the posts with the authors and the likes that's how I have it set up and I'm returning this okay so by default if we had over here to post and I import this and I say cons again you can do this because you can set a page to an asynchronous function like that okay so here you can just get that data by saying await and then calling that function which is fetch post and now what we can do is we can take that data and we can check if it has a success on it and if it does then we can return the following code which is everything down below here and again I can return an error here if I want to for my post so here for for example I can say if there's no posts then return a error message saying no posts sad face okay let's hit save let's head back to our posts and again here we can check if our data. error exists so there we go and then here what we can do is rather than returning this H1 I'll just Loop over this quickly and say data that success we'll map over it and for each post we will get to the display something on the screen again I'll just do a quick one here I'll just WRA this in the div like that this is not going to be nice at all but it is what it is let's add a class name to this I don't need a class name that sucks we'll do post. ID here so we don't get that nasty message and here we'll just do like a like a post dot content right we just want to see the content here anyway so there we go surprise cool okay so here's the first thing I want to show you when you type something in here here and hit submit as you can see that pops up here but by default that's not a normal behavior in xjs if we head over to our create post as you can see I'm calling revalidate path here to the root uh directory or like the homepage right slash to slash uh however if we don't have this here what happens is when we hit submit remember this is cached so nothing is going to get revalidated here unless we manually refresh the page okay so we added revalidate path here to cover that but again the problem here is what if another user posts a new post right so I can go here and create a new post but that's not going to pop up here uh unless I refresh the page so that's where requery comes in real Handy what we can do is still pass in our post here still fetch this on server side but what we can do is also but what we can also do is pass to the client with react query and keep ref fetching the data there after that so how do we Implement that well we need to install react query so make sure you have react query installed and then what you want to do is create a new file maybe in your lib called query provider and this is going to be a use client here we're going to initialize our query client here like that and this is really important here we can pass down a stale time and a refetch interval so what we can see here is I set a stale time of 6 seconds that means our data is going to be considered stale for 6 seconds so it's not going to be refetch with fresh data and the refetch interval here I set it to the same time so it's going to be still for 6 seconds but it's also going to refetch in six seconds and it's going to be fresh data and then what you do is you just wrap you don't need this session Provider by the way let me just get rid of that for now all you need is this query client provider here that you pass in from um 10stack react quy and then I just added the de tools as well but you don't need that this is from next off but anyway and then we'll head over to our layout file here and then you just need to wrap that provider over your children don't wrap your providers over your children keep your children safe now that we have that going we also have this fetch post here right that we want to use while I ended up doing is create another F folder here called data and this essentially just combines the server action with usequery so as you can see here I'm just passing passing the fetch post function inside here and I'm assigning a key to it as well so now what I can do is when I head back to my page like here for example what I need to do to pass that data down and make sure this is still serers side rendered in the because this post right I I want to make sure that server side rendered if it's like a long post with valuable like SEO I want that to pop up on Google well not this app because this app sucks but you get what I'm saying so what do we need to do well we need to import a bunch of shite from react query so let's import the shite so let's import all of that okay so the first thing we need to do is initialize this new query client query client new query client you can create a Singleton out of this one as well but this is still fine so don't worry about it and before we actually do the fetching what we need to do in the server component is prefetch that data so we can use Query client prefetch query like that and here the query key is going to be again you can separate this in another component if you want to or another like util function but it's fine I'll just do Post here because the query function here is going to be reused anyway so I'll just say fetch posts like that and that's it that's all you need to do here and then to actually provide um this data down to a post or post or anywhere you want you need to wrap it in this hydration boundary like that I hope they get rid of this sooner or later cuz I don't want to wrap much hydration boundaries that just doesn't look that good does it um okay and then here what we need to do is essentially pass that state down and dehydrate it like that query clients cool so now that you have all this set up you can just go in any client side component in this case it's it's the posts it's not client side yet but we'll make a client side now let's add it to the top here I'll just import a couple of stuff right here at the top and now rather than doing fetch posts here what we'll do instead is say const equals to use get post remember this little hook that we made here with react query yeah that's really cool and now here we can extract the data data and also the ER and whatever else you want to fetch out right uh cool and maybe like the fetch status as well fetch status cool and let's rename this as well so it's not data let's call it posts instead that's better and here we can check well posts do success and then posts. error like that there we go that should be fine and let's also modify that there we go so now we are using using react query and also if you get this nasty error that means hey well you're using async and wait and that's not supported yet if you're using a client side component so make sure you get rid of that async there we go cool so everything seems to be working just fine but now if we pull this page up and check what's going on as you can see it's ref fetching every five or six seconds well six not every five or six boof there we go how cool is that and now if we want to head here and modify something let's see does it allow me to modify something I'm not even sure because I have some foring key set up here and everything so let's give it a shot save oh it let me change it okay cool that's have look at that it changed how cool is that so what I ended up doing is adding a couple more features to this like likes and let me just copy over the code so you can see just like that okay so as you can see I have likes I added a remove Button as well so again if if a post gets removed now from the back end it's going to disappear automatically after a couple of seconds even if it's a post made by someone else so that's a cool technique that you can use to like refetch uh data and freshen it up and also have server side validation again I'll post this code up to the GitHub let me know what you think hope you enjoy this episode and yeah sub drop a sub drop a like hop on Discord hop on X have a chat with me and I'll see you in the next one okay bye-bye peace

Channel: developedbyed

Views: 40,929

Keywords: react, next js, next 14, react query, learn next js, web development, web development tutorial, dev ed, develoepedbyed, react tutorial, web dev

Id: 9kjc6SWxBIA

Length: 11min 28sec (688 seconds)

Published: Fri Jan 19 2024