How To Use React Query with Next.js App Router

hello guys welcome to the video so recently I had to use some providers inside a new next JS version and if you remember correctly in the previous version of nexjs which uses Pages router you simply add underscore app TSX or JS it doesn't really matter and you just put into it your providers for example it's my some site project in which I use this critical end provider it's a provider for react query so we simply put it there use your computer component uh component component funny name and it simply works you can just go into your actually into whatever component component you want and use your Hooks and fetch your data inside them and it changes it changes a little bit if we look closely we now have layout JS file which is a little bit different from underscore up in my opinion it's it's it's better you know it's a much simpler but yeah several components this is where the little problems can happen you can just simply like in the documentation they says put the provider inside the layout because it's gonna yell at you because you're trying to use client component directly in server component but we are still gonna try to do it just to demonstrate that you cannot so I've got this Nexus project it's nothing more in it uh I just created the project and installed react query all right so let's get back here and grab it from the documentation all right import and as for now if we look like how it was looking in the previous version it is supposed to work so let's check this out right go to the uh our repo I mean our project which is right here and I don't know if it's gonna yell at us all right here it is so I refreshed again my bad functions cannot be passed directly to client components it's actually I'm not sure about the message here is probably not correct but it doesn't really matter because if we were actually we we knew that it's gonna happen but it's actually pretty easy to fix it you know you simply have to create another file which is going to be marked as use client so it's going to be a client component and you're going to export your Provider from there it's actually pretty pretty simple so let's do it right now I'm gonna create the free uh query provider with TSX I'm gonna head back to the layout grab that and also export almost the optical provider cool thank you pilot no it's not what I want and return children inside and close this we need to import some stuff and also grab again this query client also typescript is healing not me so let's fix it correctly children type react dot react nope all right and now we can simply put it here and now if I'm not mistaken of course we have to import it of course okay it looks fine to me let's go to browser react query providers notified it's some old error but now it should be fine but it's not oh of course here's my mistake of course uh we have to add use client directive and if we go back refresh it should work like a miracle and it is so to prove it because you could not believe me I I prepared myself quite frankly and um I have some code to use to show you that so here's some interface for to do here's my hook that we're gonna use to get that data and of course since it is a news version this component is going to be treated as server component and we don't want it to be because we are using hooks you can use hooks only in the client components so also we're gonna have to says it's a client component it's really important because otherwise it won't work okay what we are doing here is just use our use Query um and we are fetching from some API which are going to give us array of tudos okay and then I have some components ready written which are going to show us this okay but I have some X here it needs to be data data and to do all right oh and last thing I need to tell that it's this type and it's an array array okay and last thing it's possibly undefined so we're gonna check actually I I forgot forgot about it so if it's loading or there's no data return loading let's say it's gonna just say loading you're probably handling it handling it a little bit in another way in production or in your app but I guess should work right now let's see loading data.map is not a function all right so I've made some mistakes let's see what this actually gives us back it gives me all right my bad I have here it gives me one to do which I want a list of to do's let's see if it's working now and it is it's not given this up it's not given a real names but as you can see it doing some client-side fetching if we are going to go to network and I guess I have to make it bigger for you guys and we can go to turus and here it is our data so it was effect on the client side um with react query okay so I guess it's all for the video I hope you learned something if you want to see more of that just let me know in the comments and see you in the next one see ya

Channel: Oskar Puchalski

Views: 3,387

Keywords: react.js, next.js, frontend, react-query

Id: oTBXoGh0rLU

Length: 8min 24sec (504 seconds)

Published: Sat May 13 2023