Next 14 + React Query COMBO with Server Actions and RSC

hey there my gorgeous friends on the internet today we're going to learn how to integrate react query with nextjs 13 I guess 14 because the conference was yesterday here's all the new changes by the way thank God so we're going to be looking at three different ways that we can use react query with nexts and I'll also give you my favorite one cuz the other two kind of suck and I hate passing props and stuff like that so let's have a look you see this nine of diamonds it's a joke and now jokes on you so we just set up a brand new next project here what I'm going to do is open up the terminal and see mpmi 10 stack query and I'm also going to install 10 stack query def tools let's head over to layout TSX and set up our query client provider so we need to import query client provider and query client from react query however this will not work why well this this is a server component here and this will only run client sign so it's not going to work however I can still wrap a client component around a react server component so all the children here are basically the pages right so I can still do that I can have a client component wrap around the children components and the children components are still going to be server side rendered so what we can do is just create a provids file in this util folder that's how I like to make it and here I'm just importing react query the def tools and you state we're sending the query client to the state here and we're passing that down to the provider so it's saved and then of course we have react the tools and in the middle here we're just passing out children so whatever is left there just render that out and if we head over here back to our root layout we can just import our provider and wrap it around our children poor children are getting sputtered what about the data though I have a folder here called server and I'm just running a server action you can do a fetch if you want just set up like a basic placeholder uh API if you want to use it but yeah it's fantastic you get to just make a function I'm using drizzle here to query some products from my database and I'm returning the data here and if there's an error I'm returning an error so we know that we could just technically pop in the server action here and just wait for it and we can get the products like that like you can create the function up here that's fine or even run it straight here but server actions work perfectly fine in your RFC components so this works perfectly fine so why do we need react query well imagine we have like a filter component that's a client component now if we want to add interactivity we need to pass down the products here like that products and then we need to do validation for this to make sure that the props that are getting passed down are actually correct and then in the filter you could take that products and mess around and filter around with it but then it becomes a bit complicated like how do you handle caching if the page gets refreshed or the filter products still going to stay you know and Sh like that it just becomes like oh well how does this work then so what I like to do is just like prefetch data here on the server and then let all like anything that's interactive let that be done through react query so what we're going to do is I'll show you the three different ways we can do [Music] it so let's look at the first method that we could use so I just made a products TSX here that's in my components folder I'm going to import use client at the top because it's going to be a client side component and then we're going to import use Query and also the get products server action all right let's save that and now what we're going to do is export default function products we're going to create that component we're going to return a div with this H1 of product like that cool so now here's the cool part we can just say data error equals usequery and in parentheses here we can see query key I can pass down the products all right this is the key that we used and for the query function it's going to be the same get products like that hit save cool and now all we need here is to pass down the products props to the product products equals products like that and that's it and then here what you can do now is handle the errors handle all the fetching super easily if you want is loading or is fetching is fetched you can just pop that in here and then you can just say return if there's an error return a H2 that gives me the error do message for example cool and then down here if we have the data data then we can just return whatever is down here oh one more thing we need to do is we need to import the products here because we need to send the initial data to the products like that all right so this is nice because it does prefetching on the server now so you're fine you're covered there and then it's going to just hydrate it on the client for you so you're still going to get that server side rendering and then you get to control control your data on the client so now this is super nice now that you're in the dev tools you can trigger errors you can remove items you can see how your data behaves not a big fan of this approach because you're passing down props so now moving this around becomes a bit more difficult you're also going to need to validate the props here and like this is fine for me with Drizzle but if you have an API that you don't know the types of you're going to have to keep typing them and that becomes real Annoying and what if I have another client component here a new client component if I want to pass the data further down I'm going to need to get this products and do the same thing and pass it down as initial data and then do the same step again that just it's just a bit like too much right so the second approach I feel like is my favorite and it's much better rather than passing down props with initial data we are just going to create a hydration boundary and hydrate all the client side components for us so how do we do that well let's track a little bit back it's not it's actually quite simple I I don't know why the dog say that it's oh takes much more time to do but it really doesn't what we're going to do is clean up all the props here we're not going to be passing any more props down cool we still have the server action here which we're going to keep and now we're going to import three things from react query dehydrate hydration boundary and query client so we're going to initialize a new query client here and now we're going to prefetch the query here we're going to wait we're going to save products and we are going to give it the query function all right so now rather than passing down props here what we can do is just create that hydration boundary so hydration boundary like that and just wrap all the components that need it around it like that perfect and the last thing that it needs to have is the state so we can dehydrate the state and pass in the query client and that's that let's hit save and now we don't need props anymore you could just get rid of all of that uh you don't need to pass down anything anymore and here as well you don't need to pass down initial data so you can just get rid of that hit save and look at that you also get the typescript now so that's fantastic so you don't need to type that as well so I can say data dot data and I can map over this I think I just have one now so I'll just pull out maybe the subtitle like that and hit save and there we go 2024 diary and that's the Fantastic thing about this now like I can just simply make a test TSX here right I can make any components and I can just pass down that data like so so this is test here so I'm using the same query I can fetch the same data as well and I can just import it here import test like that and I can render this out here like that and look at that we have the same thing guess what there's a third way of doing things of course uh this is a newer method it's still experimental so it's not done but it's exciting um what you can do is just do a query client provider and then wrap all of your props and your children with this new react query streamed hydration and by doing this you're not going to need to like pass down any initial data anymore to your component you're not going to need to do any of this uh setting up any of this hydration here here on the page this hydration boundary it's just all of your component you can just use use Query or use suspense query anywhere and it'll work perfectly fine the problem is again it's still experimental and it doesn't prefet the data for you on the servers you're not going to get that uh SSR so if if you want SEO this might not be the way so that's going to be it for me today thank you so much for watching drop a sub drop a like if you like this episode I can't wait I'll give you soon an update about this course uh should be done in like two or three weeks but we updated so much uh we are using drizzle now we got rid of Prisma we're not using Daisy UI anymore um we switch this with chat CN there's loads of exciting stuff that I don't want to spoil so just be duded I love you all and bye

Channel: developedbyed

Views: 50,478

Keywords: nextjs, next 13, next 14, react query, react query next, react query tutorial, next js tutorial, react tutorial, react for beginners, nextjs for beginners, dev ed, developedbyed, shadcn, tailwindcss

Id: yVsaCVEfPn4

Length: 9min 49sec (589 seconds)

Published: Fri Oct 27 2023