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
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.
It's obviously too much ; you would rather use webhooks or other types of subscriptions to handle this. Probably not the best example, but hey, its just an example.
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
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 } })
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!
The hydrate boundary that we added to it's parent is doing all the magic, from what I've understood, this hydration technique by react-query helps in prefetching the data on the server just like server components
Hi @developedbyed, from 5:50 you created a useQuery provider & useGetPosts custom hook, why in Home at 8:03 do you need to recreate a queryClient and a query without what you've created before?
They are two different queryclients. in 5:50 the queryclient he created is a global 'provider' that enables you to use react query in all of your client components. In 8:03 he is making a queryClient for that server component. Because you need to make a new queryclient for each server component. Read the docs, under advanced server rendering.
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
@@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.
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
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
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.
9 месяцев назад
How would you implement prefetch and tanstack table?
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'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!
when i do this in two routes there is an issue. When i leave the tab for a while then come back and then navigate back and forth to the two routes, it refetches the data again. (even if i set gctime and staletime to infinity and give refetchonwindowfocus:false on both queryclients)
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.
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?
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
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
@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 ?
What about Next.js data caching layer which persists the result of data fetches across incoming server requests and deployments?? React Query could fetch the data on server but what about caching it across the server request? It's surely a solution in one scenario and providing caching solution for single user only.
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.
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
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...
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.
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”
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
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
@@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.
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 😢
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/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 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.
question is, is that not too many api calls, setting refetch interval to 6 seconds?
i have the same question ++
It's obviously too much ; you would rather use webhooks or other types of subscriptions to handle this. Probably not the best example, but hey, its just an example.
@@paleo3142 can you maybe share the blog link to the webhooks you talking about ?
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 } })
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
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!
The hydrate boundary that we added to it's parent is doing all the magic, from what I've understood, this hydration technique by react-query helps in prefetching the data on the server just like server components
Hi @developedbyed, from 5:50 you created a useQuery provider & useGetPosts custom hook, why in Home at 8:03 do you need to recreate a queryClient and a query without what you've created before?
They are two different queryclients. in 5:50 the queryclient he created is a global 'provider' that enables you to use react query in all of your client components. In 8:03 he is making a queryClient for that server component. Because you need to make a new queryclient for each server component. Read the docs, under advanced server rendering.
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.
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
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
but by using react query you had to make it a client component, right?
yes
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.
How would you implement prefetch and tanstack table?
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 you refetch instead of using websockets because refetching is easier? Or is there a bigger reason to refetch instead of setting up a websocket?
Hi Ed, thanks for another great video! May I ask what theme you're using in VS Code?
when i do this in two routes there is an issue. When i leave the tab for a while then come back and then navigate back and forth to the two routes, it refetches the data again. (even if i set gctime and staletime to infinity and give refetchonwindowfocus:false on both queryclients)
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?
i like the consistency keep it up dev ed thanks again
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.
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.
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
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
This refetching approach (every 6 seconds) makes realtime database possible in SSR ❤
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
do react query support safari browser ??
Thats a cool use of query. Are you mostly swapping actions in instead of trpc?
@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 RUclips 😅
Actually I was able to make an entire website in NextJS14 without react-query, only using next-safe-action library ;)
do we have to use revalidate with react query ? because u kept in ur action
What about Next.js data caching layer which persists the result of data fetches across incoming server requests and deployments??
React Query could fetch the data on server but what about caching it across the server request?
It's surely a solution in one scenario and providing caching solution for single user only.
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
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.
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.
HTTP POST
@@metcaelfe Thanks. I've later learnt that server actions are an abstraction of APIs.
how come you get no type errors during all of that despite working in ts/tsx files. did u change or disable something?
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
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...
Why not just use the fetch API and assign tags to revalidate the cache?
Wrapping provider with usestate will resulted as an error: async/await is not yet supported in Client Components!
If you are using the next js BE isn't better to use tRCP instead React Query ?
tRPC is using react query
@@Tanner-cz4bd That don't change tRPC is a more comprehensive tool.
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.
I only use RQ as my global state management and it's sooo great compared to silly rtk library,
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”
Is SWR acceptable instead 🤔
Awesome vs code themeing. Please share your latest vs code setups. ❤
Always enjoy your videos
From my Firebase experience using web sockets/subscriptions to keep the list updated this approach is very different lol
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
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
great video!
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
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
Love your videos
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 😢
pls do MERN stack next js project with TYPESCRIPT ,react query and REDUX
Redux??
No one uses mongo anymore, hate to break it to you. And Redux is awful, Zustand (or no state manager at all) is much better
this is great
50 shades of cache.hihi
No next js, I dropped using it
Web devs are masochists lol, there is so much boilerplate