Why I Still Use React Query with Next 14

Check out my courses to become a for awesome web dev courses ✨!

Here is the link for the repo as well, do note I haven't yet implemented the likes or delete, so you can just delete anyones post now lol

Let's chat 👋

Chapters
01:18 Using React Hook Form and Next Safe Actions for form validation
02:40 Fetching and handling post data with React Query
07:03 Using React Query for server-side rendering and data fetching
08:34 Using React Query for managing state in client side components
10:09 Demonstration of real-time data fetching and server-side validation

Dope tracks 🔥

#programming

[Logicmontana]

00:01 Is React Query still worth using with Next.js?
01:18 Using React Hook Form and Next Safe Actions for form validation
02:40 Fetching and handling post data with React Query
04:08 Using React Query to handle data fetching and caching in Next.js
05:42 Initialize and configure React Query in Next.js with a query provider file
07:03 Using React Query for server-side rendering and data fetching
08:34 Using React Query for managing state in client side components
10:09 Demonstration of real-time data fetching and server-side validation

[developedbyed]

Told ya I'll start posting more,
hope you enjoy this one 👋

[nathanblaing]

I think there is still a strong argument to use React Query if you’re using queries from a variety of sources and/or complex filters that create dependencies. Lots of enterprise apps that I’ve worked on pull data from different sources (APIs, MSSQL, other relational databases etc) and consolidate on the client view. Including filters etc from global state in query keys (which operate as dependency arrays for a given query function) is an elegant pattern that just works.

[wisdomelue]

question is, is that not too many api calls, setting refetch interval to 6 seconds?

[codingintelugu]

Within Nextjs you can still pass const revalidate = 3600 at the top of your page or if you are using fetch youn use { next: { revalidate: 3600 } } to revalidate the cache on timelines. I'm still not able to figure out use case of React Query in Nextjs

[sansxverse]

I love your personality! Thank you for making helpful videos
It's helping me a lot when I'm stuck in a company where I can't learn from the senior devs in my team, so I'm looking it up on youtube

[aqibmalik]

Deved I love you and your work..
Here is a little motivation
Keep going always no matter what. Somewhere in a small village of a small town in the state of Kashmir a boy is waiting for ur video

[ricoputrapradana]

Hi Ed, just asking, does it mean you're using long polling approach there for getting the "real-time changes"?

[elenamikhaylova]

I started watching your videos 5 years ago when i was first learning web development and I stumbled on your stuff again and I am so happy you are still making videos!! still as helpful as ever. thanks for the high energy and humor

[airixxxx]

but by using react query you had to make it a client component, right?

[IvayloDechkoff]

Hi Ed, thanks for another great video! May I ask what theme you're using in VS Code?

[mathiasriissorensen]

This is brilliant! I do wonder how to revalidate when something needs to get updated in my nav bar, which is a part of my layout and not a part of a specific route/page, where I'm mutating from.

[piotrra]

Hey Ed great video! I have one question if I got it right. You mentioned (7:20) that you wanna keep Posts component Server Rendered for the SEO reasons. However later on, you transformed the Posts component into the client one. Then the assumption to have it SEO ready is not valid anymore, right? Thanks!

[Logicmontana]

i like the consistency keep it up dev ed thanks again

[lucasmaia]

Amazing content as always. One thing that I got sad about is, I downloaded your project and I realized that the data comes to the client side with requests so the functions apparently are not dispatch on the server side but indeed on the client side, so in theory you won’t need any of this right? You can double check the console of your browser will have the “creating post…” message, I thought this would be executing on the server side 😢

[usamecoban]

Hey Ed, thanks for the video. I have a question about this approach. You had an another video on your channel about react-query combo with nextjs14, I tried same methods on my project but when I fetch data just using server actions I can view all the html content by checking page source. But If I use hydration boundary with prefetch query, I dont see any content on the page source

[roberth]

Thats a cool use of query. Are you mostly swapping actions in instead of trpc?

[nguyenminhhieu]

Why not use revalidate in NextJs instead of ReactQuery? I watched your video through to the finish, but I'm not sure why you do it. Will you kindly respond to me?

[OhHeyalNo]

How would I go about fetching posts that belong to a specific tenant ?
I have a Supabase table for all my posts, but it's a multi tenant multi user app.

One thing I'm struggling to get my head around with a drizzle query is getting all the posts that belong to the logged in users tenant ?

Supabase doesn't have a field in the auth schema to put tenantID so I assign it in the public.users.tenant_id

How do I get the logged in users tenant _id before I make the query ?

I'm guessing it's going to come down to using RLS and just making a general query but I'd like to do it programmatically so I can address any bugs or issues from one control source.

Love your videos, I'm a hobbyist and you've helped with heaps of niche situations I've come across.

[maskman]

This refetching approach (every 6 seconds) makes realtime database possible in SSR ❤