How To Use React Query with Next.js App Router
Вставка
- Опубліковано 20 сер 2024
- 🚀 Join my community and together learn to write better code: / discord
🚀 Get in touch on LinkedIn: / oskarpuchalski
Subscribe if you want to watch more videos on Next.js and React.js!
I've created a video explaining whether using Provider on top makes every component a client component. ua-cam.com/video/yU34dN0dPxY/v-deo.html&ab_channel=OskarPuchalski
watched 5 hrs. videos so far, and you 10 min video finally made able to do it, thank you
You're welcome, I'm glad it helped!
You are a hero, keep going
Thank you bruhh! You are saviour 🙌
Thanks! Exactly what I was looking for.
Glad I could help!
Thank you very much, was looking for this for a while
If you are building a NextJS application then you should consider server side fetching as the default choice.
Why do you think so? In my opinion, it's really based on your use case, not the technology you use.
@@oskarpuchalski Also you can't use edge function and its power.
Thanks for the video. It is very helpful. Just a minor tip (you probably know it already); you can use CMD + TAB to switch back and forth between apps instead of using Raycast
I know, but I actually found it more convenient to switch apps with Raycast 😅 Glad it helped!
Bro this has saved me quite some pain
thanks for this, it solved my issue :)
Do you have a video that explains how to use Tanstack for SSR?
No I don't, but I will think about creating one!
Very well explained, thank you.
it's really i cool video to implement react-query with NextJS , but know you're treating NextJS kinda like react without any need for server components , or maybe you can still use it
for a small small portion in your app
what if i want to fetch the todos from the server component and pass it to a client component and when the client edit or add a new todo i need this data which's coming from server to revalidate ??
it would be better i guess to wait an update for react-query to handle nextjs server components
If I'm not mistaken we have no the possibility to use react query inside the server component. And surely it's not well as for me(.
if you have an ideas how to use react query inside the server component tell to us please
@@ProWichDoctor for now i can say you can't use it we need to wait for react-query update
i've dismiss point of view, so why do we need SSR if you showing how to fetch data on client side. Better to show how to cache date in between SSR hydration
SSR on initial page render & client side data fetch for user interactivity afterwards is the best of both worlds for user experience
you explained very good. I subscribed :)
Thank you!
why nobody talks about hydration
isLoading || !data is this expression necessary? As far as I know isLoading is false as soon as data is fetched.
It's for the case when you don't get data from server, because for example there was error. Also, I think it's necessary for TypeScript to let you get into keys of this object.
Woow great content thank you so much
Thank you!
How to set a interpretor of reactquery?
Thanks for the video, I run into the same error and was having a hard time solving it, untill I found this video! I have a question though, I am thinking of implementing React Query to get rid of my useEffects, but in order to do the fetching, I need to pass a user ID to the function and to do that, I need to wait for the session to load (I am using Next Auth). So at the beggining, I dont have the user ID, so again I am falling back in the useEffect to run the Query when the session is populated. Any suggestions on this? Thanks in advance!
I'm glad it helped you!
So I think you have a couple of ways to fix this problem.
1. In your fetching function that you are passing to useQuery add checking if userId already exists. When the userId will finally come the component will re-render and the function will run again, this time check will pass. However I'm not sure if it is a good approach, because you should return promises from useQuery fetching function.
2. A better approach would be to use enabled flag. This basically let you decide to run a query or not. Check it out here: tanstack.com/query/v4/docs/react/guides/dependent-queries
I hope it helps! Also, if you encounter any other problem, or just talk with me about code, you can book a Google meet call with me for free, and I'll be happy to help you! It's a top link in the description 😉
@@oskarpuchalski thank you so much! I think that the second option is what I need, I will try to implement it.
great share. thanks. can you make one tut on i18n using app dir.
But you will always be fetching on the client side? Not sure of the benefit of reactquery with the new next .js
No, I just wanted to demonstrate how you can utilize React Query within the App Router.
For instance, if you prefer a simpler way to manage mutations and would rather avoid using the unstable feature of server actions, React Query proves to be incredibly convenient.
so we can't use react query on server side?
The react query team is working on something to let us use React Query with Server Components, but it is in beta/alpha.
@@oskarpuchalski thanks for the reply dude
is there a correct folder structure to put this provider or this way you made is already a good guideline?
When you are creating react application, there are no "correct" way to folder structure. It depends on your project. So basically put it whenever you feel it should be, and you can always easily move it ;)
Thanks for sharing !
01:57 what is this vscode extension for drop-down menu to quickly import
It's not extension, it's built in functionality in VS Code. You can trigger that by clicking Ctrl+. on Windows or Command+. on macOS. It also works for ESLint fixes and many more!
have a question on this. what are the benefits of using react query at the first place? is it for 'use client' (not 'use server') in next js?
No, the benefits of using React Query are that it handles asynchronous operations for you, primarily for fetching data. The React team has stated that they do not recommend fetching data in useEffect, and since there is no built-in solution in React, React Query is a great tool for fetching data on the client side.
I hope this explanation helps. Feel free to ask if anything is still unclear.
thanks dude!
You are welcome!
Thanks for the video. But aren't we forcing the entire Next.js app to be client-side by doing this?!
No we're not! Look at the pinned comment with my recent video where I explain how it works!
Hello can we use axios too and make post delete or any other requests here?
Hello! Of course, you can. React Query is only a wrapper, you still can use axios or any other fetching library.
Nice! Very helpful
Glad to hear!
Would you still be able to use server components and top level async this way? Since its wrapped with use client?
Yes, you can use server components within a client component as long as they are children of the client component. However, they cannot be in the same file.
@@oskarpuchalski okay. Noted, thanks
Trying to wrap my head around the use cases for this. Doesn’t Nextjs fetch on the server? What would be the difference or use cases for doing this over Nextjs server fetch? Thanks!
fetching data on the client side
Exactly, next.js fetch data on server, but sometimes you need to fetch from client (browser).
Next.js is great for blogs, shops, basically everywhere where you can fetch data once and then send the same pre-generated HTML to every person - that's called SSG (Static Site Generation).
But let's say you are building an admin panel for shop, or application for learning flashcards, then fetching server side doesn't have too much sense.
Also, React Query is great for mutations (e.g. POST request to server).
Hope it helps!
am i correct?
even though we are technically wrapping your entire app with a client component.
if there are any ssr components down below in the tree.
they will be rendered as server component and then hydrated on the client side.
Exactly!
Is this due to all components are passed children to provideer?
@@vishalsangole836 yes
if provider is a client component wouldn't every child component be a client component ?
exactly my doubt.
what is the use of ssr then
I find it unintuitive for a lot of people.
You can use server components inside of client components as long as they are not used directly inside file with 'use client'. I'll try to cover that in my next video.
@@oskarpuchalski Oh, cause one time when i watched a youtube video about nextjs he said that every component under a client component is a client component by default. i really should dig in the docs to understand instead of watching some random videos.
@@nutpiro343 Sure, read docs, or check it in practice. Create next app, make parent client component, and then try to use Server Component inside, and check if it works or not. Then you will be 100% sure ;)
Hey, I've a question!
since you make Home page client specific, so if we are required to generate dynamic MetaData then this "use client" will not work
That's true. But you can easily achieve that by moving component where you use useQuery to other file and mark it as client component, and make Home page server component again.
@@oskarpuchalski I’m talking about the dynamic metadata which is coming from API itself like I wanna show current post’s title in the page title.
Okay now I get it! But still, all you need to do is to move client side code into another component and make Home page server rendered again.
@@oskarpuchalski bro bro bro, according to my knowledge dynamic metadata only works in page on server side.
So we have to fetch data on server side to generate dynamic metadata.
If you find any better approach, please do mention.
Thanks
Can you make it work on server side?
If you intend to use Provider in a file without 'use client', then you cannot do so.
Kiedy poleciłbyś użyć SWR zamiast react query?
Może dla bardzo małych aplikacji. Ogólnie React Query oferuje więcej funkcjonalności i lepiej sprawdza się w przypadku dużych aplikacji.
nice, what theme is that tho?
It's called poimandres
does this defeat the purpose of Next13 if everything ends up with 'use client' flags at the top?
Not really, you need to put 'use client' flag only in concrete components, and it will not be used often. I found 'use interactive' to be a more understandable name.
@@oskarpuchalski cool, thanks for the feedback. Would be interested in a video going over it all.
@@AdamM Happy to help you. I'm definitely going to make one about that topic ;)
But this is not very helpful, you made every single component under that provider a client side component. So no server side benefits for you. I don’t think that is a good solution. We might as well keep using the old pages router and use Trpc
What you wrote is simply not true. You can still use server components inside client components, but they have to be in another file and passed as children. I understand that it might be confusing, but I hope this explanation helps.
@@oskarpuchalski In other words, we can still use server components, but without the benefits they provide?
@@Riczerq No. We can use Server Components with their full capabilities. Check out my new video on channel. I explain it there.
thanks