Next 14 + React Query COMBO with Server Actions and RSC

Рет қаралды 85,666

7 ай бұрын

Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
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
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 Dope tracks🔥
Leavv - Roam chll.to/15c396e0
Leavv, Midan - Bloom chll.to/0b3ee665
Leavv, dennisivnvc - Coast chll.to/e77956eb
C Y G N - Sunset Drive chll.to/d66020b5
#react #javascript

Пікірлер: 133

@syv_31 4 ай бұрын

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.

@llchillerll 4 ай бұрын

Yes, of course, thank you for the tip. Perhaps a better solution can be to set the 'staletime', so it will only be refeteched if the stale time is expired

@marcvanrenterghem5468 6 ай бұрын

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

@SharunKumar 2 күн бұрын

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)

@FishReporting 6 ай бұрын

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

@noxiousbrainiac 3 ай бұрын

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

@alkebabish 9 сағат бұрын

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.

@VincentFulco 7 ай бұрын

awesome example, really pulled together various pieces for me.

@keymoment 7 ай бұрын

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

@developerpranav 7 ай бұрын

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

@ekchills6948 7 ай бұрын

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

@kamilzowczak3607 7 ай бұрын

Really nice, happy to found this video. Subscribed

@user-oz6ro7vk1j 7 ай бұрын

thanks man, it your website works again!! ❤

@BRP-Moto-Tips 4 ай бұрын

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

@moezzat 7 ай бұрын

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

@cuentamovil456 4 ай бұрын

can't wait for your new course!

@rog0079 7 ай бұрын

A fresh new nextjs course in detail would be totally great at this point... btw loved the video as always

@goncalosantos3604 7 ай бұрын

Oh yeahhh, would love to see something with Nextjs - Typescript - React Query - Zustand. That would be 🔥

@johnpaulpineda2476 7 ай бұрын

Definitely!

@raindear811 14 күн бұрын

Thanks ed very helpful !

@Hexa-IT 6 ай бұрын

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?

@DoSmth 4 ай бұрын

Большое спасибо, действительно крутой подход! Если встречусь то пожму руку и сфоткаюсь😅❤

@licokr 7 ай бұрын

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.

@saadchraibi6712 4 ай бұрын

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?

@NirdeshPokhrel 6 ай бұрын

Thank you! I did it!

@codernerd7076 7 ай бұрын

Wow, and he does it all below ten minutes 😮👏

@developedbyed 7 ай бұрын

I am gonna start speed running tutorials 😂

@lucaapa 18 күн бұрын

@developedbyed Hi, I have a question: currently, this process involves fetching data twice, once on the server and again on the client. why just dont fetch it on the client? ty

@zzgkmzz 7 ай бұрын

Sounds like amazing vid just by the title

@arvindiyer4813 5 ай бұрын

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 ?

@maxstrootmann 7 ай бұрын

Where can i find those awesome backgrounds that you use on your windows desktop? p.s. your full stack course is awesome!

@seonyeongjang3459 5 ай бұрын

Thank you so much.

@techwithimad4672 7 ай бұрын

FIIIIRST ! I love your intros !😄

@akadaygame8634 4 ай бұрын

just want makesure in 01:08, you said: in next.js > 13.00, Will the children component still render server-side even if client components wrap it?

@ontanicolae1794 5 ай бұрын

I've just tried, the second approach types data as | undefined. And the reason it is typesafe is because youre using server actions

@ontanicolae1794 5 ай бұрын

also, fetching data in the navbar and then using it in a completely different page didnt load what i fetched on the server first either

@AlexSpieslechner 7 ай бұрын

i see two potential issues: when mixing server actions and react-query, how do i invalidate properly without having to call two functions every time? second point is access control. with middleware, i can lock users out of url structures by auth state or role. by splitting up rsc and server actions i manually have to access check im both.

@mshahzebraza 6 ай бұрын

I got stuck with invalidation problem myself. couldn't get to work. what did you mean by having to call two function every time?

@Kim-by5uy 7 ай бұрын

amazing. thanks

@iscars 4 ай бұрын

Hello. What about using invalidate tags on the server side? As far as I understand, by default, server-side use of prefetch query does not cache data, and the server fetches fresh data from the API each time. I want to cache the data and update it manually as needed, for which I need to manually set the staleTime option to Infinity. But then, how do I perform revalidatePath or revalidateTag on the server side? queryClient.invalidateQueries doesn't seem to work for this. I couldn't find information in the React Query documentation. The Next.js documentation only provides examples with fetch.

@user-oz6ro7vk1j 7 ай бұрын

hey Ed, i enrolled for the JS course but cannot access the portal now, can you please do something about it?

@akosbalint3485 3 ай бұрын

Can I keep the queryClient object in a RootLayout, if I choose the second, HydrationBoundary method? Thank you for the tutorial.

@27sosite73 3 ай бұрын

thank you mate

@pooyadehghan17 2 ай бұрын

great stuff

@paw565 5 ай бұрын

I have a question. What if I want to prefetch different data on another pages? I'm afraid that creating many queryclients might end up really bad. Is there solution to this problem?

@VincentFulco 7 ай бұрын

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.

@jamieblair4336 20 күн бұрын

Just wondering, does this approach affect the SEO capabilities of Nextjs?

@timetosleep8055 7 ай бұрын

Why is the first load js so huge when adding react query? Its around 380kb. Im using the fetch on server and hydrate on client approach.

@ABDIRIZAKCODING 7 ай бұрын

hey developedbyed, is there any update soon in react.js ?

@ayushgogna9732 7 ай бұрын

I’ll use remix

@jovanjevtic1620 7 ай бұрын

Is it necessery to put queryClient (new queryClient()) inside a useState?

@theangelofspace155 7 ай бұрын

Same question, first time I see that

@rizi5353 7 ай бұрын

Yes. It's necessary if you initialize queryClient inside Provider function

@aurorasofie 4 ай бұрын

What is your thoughts on next.js not recommending to do data fetching through server actions?

@codingintelugu8820 4 ай бұрын

But why do we need react query inside Nextjs14 when the framework itself is giving you the caching and all ?

@user-qc8ux9xm3y 7 ай бұрын

I'm pretty sure my comment is not the first on this, but , Ed, could you please share your wallpapers? 😄 And thank you for your videos!

@adhiariawan8108 2 ай бұрын

Hello, I've encountered error while following your 2nd option: ⨯ node_modules eact-query\es eact\QueryClientProvider.js (2:34) @ React ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Could you advise me on how to solve this? Thank you

@DEFENDER748 6 ай бұрын

HIIIIIIIIIIIIIIIIIIII, how are you. Trust me its been so long i watched your video, i saw your video kicking mouse. Don't know why but missed you.

@trunkey-dev 3 ай бұрын

I can't understand, I am trying to search a solution for SSR or mabe SSG in NextJS 14 with React-query-v5. But it keeps showing that they are using it with 'use client'. Is it because that is impossible to make the server do the request itself usng react query, then continue refetch in client after

@stevebendersky2056 4 ай бұрын

iis it possible with useSWR? is it possible with seperate backend (and not using server actions, just feetch data with seperate backend on diifferent port)

@mralmazmech31 4 ай бұрын

Is there a way to do similar thing with Apollo client?

@waleedsharif618 7 ай бұрын

If i use just Reactjs, should i use vite or create react app ? Is Vite production ready ?

@developedbyed 7 ай бұрын

use vite, don't touch create react app

@hubesh716 7 ай бұрын

Plz make long video on redux toolkit and react query with project 😊

@nirajbhanushali7693 7 ай бұрын

Redux has Redux query then why use react query? Correct me?

@user-xu1zy7pn2q 5 ай бұрын

which method is good and stable to use?

@user-vd3ph6zh8q 15 күн бұрын

jokes on you, i didn't see a 9 of diamonds, i saw a 10 of diamonds lol 😂

@dummymail2495 7 ай бұрын

Why developers are not using react-router fetching methods on rendering the url? I saw video yesterday and seems quite simple and powerful

@richchar6478 7 ай бұрын

Which video? That sounds interesting.

@muamarhumaidimubin4438 6 ай бұрын

i got error "Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported". next 14.0.2 ?

@JuicyBenji 6 ай бұрын

Did you find a solution? I'm also struggling with this exact issue. It's weird because it looks like it works, the correct thing is shown on the screen for about 1 second before the entire thing crashes. The error is also not helpful because I have no clue where this error happens.

@Hexa-IT 6 ай бұрын

It's because TanStack Query passes it's queryFn props down to the server action, this will work queryFn: () => getProducts(),

@JaeTask 6 ай бұрын

I also get the same error in next 14.0.3, did anyone find a solution?

@aurorasofie 5 ай бұрын

I think I just found a solution after struggling for a while. Try it out @JaeTask @JuicyBenji const { data, error, isLoading } = useQuery({ queryFn: () => { return getJokes(); }, queryKey: ['jokes'], });

@94KurczaK94 4 ай бұрын

For me the following worked: 1. Don't do { queryFn: getSomething }! Do { queryFn: () => getSomething() } instead. 2. Serialize the data returned from queryFn, for example: JSON.parse(JSON.stringify(data))

@footballforlife09 3 ай бұрын

HydrationBoundary doesn't seem to work and by that I mean, I see the api request being made in the client component, I can see the api call in the network tab, so if you have 2 child components where you're using useQuery providing the same query key, both components seem to make individual api calls on their render. Weird behaviour, don't understand what to make of it. And yes I have tried staleTime, cacheTime, nothing worked. Infact in one of the tract query blogs, it's said even if you don't provide staleTime, it would cache for sometime.... Which means it should serve the data from the cache and not make new api requests, but doesn't seem to be the case, with our without the options like staleTime etc.

@_Yolandi 7 ай бұрын

Nice what I’ve waited for

@charllabuschagne2169 7 ай бұрын

Yeah!

@lakshaymanchanda2322 13 күн бұрын

why do you use useState to initialize the client

@maskman4821 7 ай бұрын

Cool 👍👍

@anonymousmangalorean 7 ай бұрын

why should you make the QueryClient Class a state? 1:40

@user-sp4up7zn4z 7 ай бұрын

THATS WHY HES THE GOAAATTTTT

@locodev770 6 ай бұрын

super interesting Ed. I think i'll try myself because i'm wondering if most of my components should be client side and if the server rendering still works [UPDATE]: It looks good at first sight but i don't see the benefit of using react-query aside avoiding passing the paremeter. Eg. Let's say we have a component for tabs with links that filters the posts, every time i click a tab it goes back to the server even when is not necesary and the alternative is to use a state management again like redux instead of navigating to another route. Any ideas?

@JuicyBenji 6 ай бұрын

React Query is handling state management for you, the response is cached so it will only go back to the server if the data is invalidated. That's why react query is nice. Then if you want to use the data elsewhere as long as you pass the same key, all components can access the shared cache instead of making a new call. On top of that it gives you a nice api when you want to revalidate or update, like loading, error, etc.

@euanmorgann 6 ай бұрын

You can disable that behaviour with the refetchOnWindowFocus paramater

@salahdaniel 7 ай бұрын

vs code theme that u are using pls

@gaaames 6 ай бұрын

how do you invalidate queries?

@wasd3108 7 ай бұрын

next needs to step up their game, it's already 2023 and they're still in 2014

@developedbyed 7 ай бұрын

yeah totally, server actions are pretty cool tho

@mario_luis_dev 7 ай бұрын

really? That’s quite the opposite of what I think of Next…

@st7171 7 ай бұрын

Please Elaborate, what do you mean by "in 2014"

@1000sh 7 ай бұрын

Some people are reminding the PHP in terms of server action. But when it comes to tons of others benefits like UI Components, State managements, the NextJS cannot be compared with PHP. And server action functionality is also optional so far. I can understand why they don't like this updates, it just my opinion tho :)

@peterhamilton9387 7 ай бұрын

It was the 10 of diamonds. Jokes on you 😜

@w1llow01 7 ай бұрын

are you updating the next course?

@s3nTer 7 ай бұрын

He already updated it two times, doubt he will do a thrid one.

@w1llow01 7 ай бұрын

@@s3nTer theres a few thing that say they are deprecated ever since i got the code

@BeepBoop2221 7 ай бұрын

Im not getting notifications for your videos sometime

@AlexJohnSuarez 3 ай бұрын

async/await is not yet supported in Client Components, only Server Components

@AliMohamed-jt2kq 7 ай бұрын

hello , iam still learning next 13 at least , let me finish it first

@victortimi 7 ай бұрын

There are no significant changes in the Next 14

@theangelofspace155 7 ай бұрын

Why initalize the queryclient with usestate?

@rizi5353 7 ай бұрын

To make sure that queryClient only initialize once. It's the same as if you initialize queryClient outside of function scope without useState

@manuelpineda924 4 ай бұрын

I am getting a client error and I do not know how to solve it. I have a barebone project just following this steps

@pedro.zurita 7 ай бұрын

I literally just started an app 2 weeks ago in Next....now have to update...fk web dev life😂

@mhdfr 7 ай бұрын

Wdym, there is no new API in Next 14

@JohnBuildWebsites 7 ай бұрын

They update number based on Node, not on breaking changes. V14 has no new APIs and took me seconds to update (just a small change in the next config)

@pedro.zurita 6 ай бұрын

@@mhdfryeah ...it was a reaction comment before I did more research and the update for me went much better than other times

@pedro.zurita 6 ай бұрын

@@JohnBuildWebsitescommented on video before I attempted to update and before video finished...life was good after and during the update 😅

@Aretha735 2 ай бұрын

9:33 @@pedro.zurita

@ilikespaghetti2170 7 ай бұрын

EHHH THERE'S NEXT 14 NOW??!!

@developedbyed 7 ай бұрын

See you tomorrow in the next video where I will cover Next 15 👍

@GabrielMartinez-ez9ue 7 ай бұрын

I tried it with tanstack table and shadcn… mission failed.

@BarakaAndrew 7 ай бұрын

While I understand this I cant stop thinking why is it so complicated? For newbies on web development where should they even begin? Too many frameworks, too many ways to do something, also teaching someone react, nextjs, hydration concepts, giving them reason why things work the way they do, it’s a huge hill to climb ngl

@user-qq7yc1qp8z 7 ай бұрын

Skill issues

@neoesm 6 ай бұрын

Your comment doesn't make sense. You don't have to use any of these tools or frameworks. You can do your work in a single index.html, it will still work

@vivekkaushik9508 5 ай бұрын

@@neoesmyeah good luck asking you client to dumb down all of their code base from 10k React code to simple single js file. 😂

@vivekkaushik9508 5 ай бұрын

@BarakaAndrew agreed. JS world is keep getting more complex with all of these frameworks trying to one upping and copying from each other. They are all the same, do the same things but each one has its own USP. If only Facebook invested in React more. We won't have these many frameworks.

@BRP-Moto-Tips 4 ай бұрын

I think most of the job opportunities, and competetion too are going with React. Nextjs is built on top of react, most of the other relevant options have similar syntax to React, I'd go with it too if i had to start over. Moreover, get really good with it, learn to use Global state managers (I like zustand) then try react query and have a look to the things you can build, that will increase a lot the quality of the things you design. Then using nextjs instead of react will be only a minor adjustment

@swimmyJones 6 ай бұрын

Why does the video say next 14 but it look like he’s using next 13 in the video?

@redcodemohammed 7 ай бұрын

Isn't it Next 13?

@airixxxx 7 ай бұрын

Each version gets more complicated and verbose.

@user-mx8ij4tk6i 6 ай бұрын

Why do you keep queryClient in a state (1:27)? Can't this be a const? (I think it can)

@EmilleJunior 5 ай бұрын

It is recommended on tanstack's documentation. Something about security issue, avoid leaking data to other users. Because it is run and cached on the server