Next 14 + React Query COMBO with Server Actions and RSC

Check out my web dev courses below🔥
-------------------------------------------------------------------------------------------------
Ever wanted to setup Next 14 with React query? Well there are actually quite a couple of ways to achieve that. In this episode I will show you how I set up my react query with server actions for super easy state managment.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me

-------------------------------------------------------------------------------------------------
🎶 Dope tracks🔥

#react #javascript

[syv_]

One note that if using the hydration approach you should add refetchOnMount: false and refetchOnReconnect: false to the query options (inside the client component) so that the query is not re-fetched when the client is hydrated.

[SharunKumar]

Omg! Thank you so much for this video especially 1:26 where queryClient is initialized as a one time state. Helped save couple of hours of debugging where I wasn't getting the prefetched data correctly. Earlier we had defined the queryClient as a const in the module scope which was causing the issue (currently even the TanStack docs also show the same in the example)

[marcvanrenterghem]

Amazing ! I was exactly looking for this. Happy to know someone experimented it and show cased it ;)

[alkebabish]

I've been trying to get my head around this for ages. I've used the code before without understanding it, but now I understand what the Hydration boundary actually does, it saves having to pass the server data down as props.

[nasko]

Another thing worth mentioning at 2:55 is that the products get fetched only on the initial page render, so if it's a value that's going to be dynamically updated (like a chat log) you won't be getting fresh data by simply passing the fetched data as a prop. I had to learn that the hard way and that's what got me to finally start learning react query.

[noxiousbrainiac]

I was looking for the state managment like this before i had found this
Thank you very much, you are the best !!!
It's the best combination of frontend application ( Next.js 14 + Tanstack )
I loved it

[FishReporting]

I really enjoy watching your videos and love the candid/chill way you explain topics.

[ekchills]

Finally server actions are no longer experimental. Nice video Ed (:

[VincentFulco]

awesome example, really pulled together various pieces for me.

[developerpranav]

Hydration Boundary seems really good, have to try it. Thanks!

[keymoment]

Wow ed:) ❤ please could you make it a role based like admin and user stuff for production grade projects within prismA and PostgreSQL please 🙏

[kamilzowczak]

Really nice, happy to found this video.
Subscribed

[VincentFulco]

Weird, with next.js 13.5.6, the prefetch gets the correct number of items in my aws dynamodb table but the query being pulled in from the component doesn't. the table I am rendering shows stale data from hours ago.

[moezzat]

Just in time, i was search for use react query with nextjs but i didn't find anyting useful thanks Ed

[licokr]

Thank you very much for making a great video 👍👍👍, I have a question, is it possible that Wrap all components with HydrationBoundary in root layout, then make only one queryClient(define outside of function to export) and pass it. In server components, import the queryclient instance and use prefetch.

[Hexa-IT]

Great video, at 1:17 why do you have the query client in a state instead of defining it above the Providers component as recommended in the docs?

[BRP-Moto-Tips]

Couldn't help but subscribe, I was just wondering how would these things work together, seems like im building something soon!!! Thx a lot

[ozrovkj]

thanks man, it your website works again!!
❤

[saadchraibi]

Awesome! Thanks for the tutorial!
What is the main benefit of using getProducts function in a server action vs. having the getProducts function in a separate normal file ?
I've read that it offers typesafety. Could you explain why?

[arvindiyer]

Hey Ed and Community
I tried to set up a hydration boundary at a Layout Level and I wanted all routes under that layout to have access to that data irrespective of whether it was a Client Component or a server component
How can I do that ?