Why I Still Use React Query with Next 14
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- Check out my courses to become a for awesome web dev courses ✨!
developedbyed.com/
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
github.com/developedbyed/next...
Let's chat 👋
Twitter: / developedbyed
Github: github.com/developedbyed/
Chapters
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
Dope tracks 🔥
C Y G N - Take it Eazy chll.to/a2c63d7c
C Y G N - Sex on the Backseat chll.to/5d8700bb
C Y G N - Sunset Drive chll.to/d66020b5
C Y G N - Emotions chll.to/bfeb2b66
#programming - วิทยาศาสตร์และเทคโนโลยี
![แฟนแนวใด๋ - ยูริ โตเกียวมิวสิค [OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/4_XVMuhhbsU/mqdefault.jpg)
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
That's well impressive you did that in a minute, holy crap
@@developedbyed 😅 wasn't easy but you have been my only tutor from the start, don't need to watch the video twice to understand you .
You can also do this with AI Ed@@developedbyed
Told ya I'll start posting more,
hope you enjoy this one 👋
thats really useful
do you have discord server?
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
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.
Hi Ed, thanks for another great video! May I ask what theme you're using in VS Code?
i like the consistency keep it up dev ed thanks again
Thats a cool use of query. Are you mostly swapping actions in instead of trpc?
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
question is, is that not too many api calls, setting refetch interval to 6 seconds?
i have the same question ++
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 😢
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.
Thanks very much for the video. I wonder if server actions works with react native programs ? Or I still need to use API ? Also what network protocols does the server action use ? Would it be possible to route through firewalls ? Thanks again.
If are calling server action in a server component than there is no need for next-safe action right ? I don't know maybe it sound a bit dump question but I'm still learning
Awesome vs code themeing. Please share your latest vs code setups. ❤
Hi Ed, just asking, does it mean you're using long polling approach there for getting the "real-time changes"?
this is a behavior of react query with the refetchInterval
how come you get no type errors during all of that despite working in ts/tsx files. did u change or disable something?
Always enjoy your videos
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.
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
Ohh that’s interesting, will definitely have a look into it. Their docs say using initial data and hydration boundary give you ssr, ill get back to you 👍
I'm guessing when you set your page component as client side component there's no way it's hydrated on the server side. You should probably keep your page component as server side, and call the action directly for initial server-side hydration. Then, create a client side wrapper around server component that utilises useQuery hook and pass the returned data to server component as prop as you'd normally do with getServerSideProps.
I have the same exact issue after setting up custom hooks of the tanstack query that fetches data from the client side... the data is shown but the page source does not update
Hi, I just want to thank you for opening my eyes. I was thinking of either using the next-safe-action or the react hook form, not realising that i can just use them together to make a killer combo. I just have one question, if we are handling data cache using tanstack query, wouldn't we need to invalidate the cache when creating something new using something like invalidateQueries after being successful? Is it handled by the revalidatePath used in the action? Does it work because it removes the client side router cache and full route cache and so the query runs again on the server because the client makes a new request with the cleared cache?
I think revalidating path triggers the prefetch method in the server component. But didnt try just making a guess
I'm the creator of next-safe-action and I always used it with react-hook-form, I think it's an amazing combo. Very glad that now Ed is teaching this approach to the world!
@@TheEdoRan thanks for the amazing project
@@usamecoban2582 I was also thinking the same thing, can someone confirm this?!
do we have to use revalidate with react query ? because u kept in ur action
If you are using the next js BE isn't better to use tRCP instead React Query ?
How would you implement prefetch and tanstack table?
This refetching approach (every 6 seconds) makes realtime database possible in SSR ❤
I only use RQ as my global state management and it's sooo great compared to silly rtk library,
great video!
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
same here
Wondering the same.
This will only work if the endpoint is public. If your fetch uses some sort of authorization (for example passing a cookie for authentication), then you are automatically opt-out.
Another (arguably smaller) advantage is being able to cache locally. NextJS won't cache during development, so if your call takes long it can be annoying to work on.
@@rgsquintanilha What about using the fetch options, how does it compare? And, if you deploy on some other platform than Vercel, what changes? fetch('...', { next: { revalidate: 3600 } })
Thanks to You, I was able to fix an error in my code: useQuery's queryFn needs to be on the server side, otherwise it will throw an error:
Invariant: headers() expects to have requestAsyncStorage, none available.
I think it's not documented well, or it's just Next.js things...
Hi Ed, One question regarding the fetching, is it because you use drizzle you get the types of posts?
Yes it is :)
Prisma also offers this
@@euanmorgann Thanks for the reply. I need to check it out !
Yeah that’s correct! They both offer it, I went with drizzle cause it’s simple and fast
Love your videos
I have a similar example and refetching is not working, the request never get made on the client?
Could it be some server action caching issue?
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?
you can just export revalidate variable and then wrap non fetch request in a react cache, the revalidate will get applied for it too.
@developedbyed Hello, i am having issue, that if queryFn is arrow function, i am getting error on client - Error: Maximum call stack size exceeded. But once i remove arrow, it works as your example.. But i need to pass properties to that function so it must be arrow function.. Any ideas ?
I can’t programme anymore I swear work is killing me. I think I need another job.
What's the issue here ?
Hope you find something that brings back some of that joy. Wishing you best of luck
It's because everything is half baked. Ignore TH-cam 😅
Actually I was able to make an entire website in NextJS14 without react-query, only using next-safe-action library ;)
You are using a new QueryClient on the server side without option staleTime (7:50). When I do that, it makes an API request every time without SSR caching. If I add staleTime Infinity, caching starts working, but updates from the client component revalidatePath or revalidateTag are not being executed. Help
I thought that was only happening with me, your code is being executed on the client side also right?
@@lucasmaia7553 I tried various ways to do this with React Query, but nothing worked. I came up with a method of loading data on the server side using native fetch. Then, I forcefully store the result in prefetchQuery. It looks like this: const result = fetch(); await queryClient.prefetchQuery({queryFn: () => result}). Now everything works as I want, but I have to maintain duplicate requests.
From my Firebase experience using web sockets/subscriptions to keep the list updated this approach is very different lol
but by using react query you had to make it a client component, right?
yes
May I know what your chilled background music is?
Description has all the tracks in this vid 👍
@@developedbyed Oh I already was binge reading the descrioption but I was blind :D thanks
this is great
I believe you don’t have to put “use server” on the top since the base is server. If you wanna make sure it only runs on server, you import “server-only”
Wrapping provider with usestate will resulted as an error: async/await is not yet supported in Client Components!
Why not just use the fetch API and assign tags to revalidate the cache?
do react query support safari browser ??
you don't need to do any of that, you can just export next.js revalidate constent and set it to some posivite value for the page, and then wrap all the database query logic inside a react cache, now the cache will be revalidated as you set.
Hi, great video. Sadly I have this error and I can't get rid of it...
Internal error: TypeError: Cannot read properties of null (reading 'useContext')
This is when I use the prefetch and HydrationBoundary
I think it is only in development but still, if anyone has any ideas. Thanks
Any error that says cannot read properties of null means that the variable or reference you are using has no value
or probably doesnt exist
Is SWR acceptable instead 🤔
I guess, it has a really bad design when user wrap it client component with hydration boundary and passing dehydrate function. It should be simple and clean, in my opinion
pls do MERN stack next js project with TYPESCRIPT ,react query and REDUX
Redux??
I'd say the proper solution is a websocket, but I'm not sure the best way. React Query is the easiest and good for state management.
What about SWR?
It's so simple, looks fine to my, but I don't know nothing about the comparison between other strategies
Lack of updates and poor docs
50 shades of cache.hihi
It looks like you just implemented a very basic polling solution to refetch all data every 6 seconds...
How would you implement it without react query?
@@trebturnerif using Next, I would create a refresh component with the time I want. It will use UseRouter from next/nav and do router.Refresh(). Obv you would need to disable caching with giving headers to the Get req or revalidate = 0.
@@trebturner set interval with a basic setting cache ? what you do you need more
No next js, I dropped using it
Web devs are masochists lol, there is so much boilerplate
Is it just me or that seems “wrong” to some extent?!