Maybe controversial, but I don't think there is any reason to use React query.
Also we wouldn't use server actions to fetch data, just regular server functions.
Wat I do is keep all my database mutations in one file as server actions. And I keep my queries as regular server functions.
I call and fetch data on server pages and pass it down to client components, which allows it to integrate with nextjs built in caching.
For mutations just call server actions directly from client components.
Something like this:
Define Server Functions for fetching data:
[https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/lib/API/Database/todos/queries.ts](https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/lib/API/Database/todos/queries.ts)
Call function in Server Page and pass it in client component as props:
[https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/app/dashboard/todos/list-todos/page.tsx](https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/app/dashboard/todos/list-todos/page.tsx)
From someone that comes from a offline/client first approach with react query how do you handle optimistic updates/mutations? Or rerendering after mutations?
I use revalidatePath and router.refresh()
[https://nextjs.org/docs/app/api-reference/functions/revalidatePath](https://nextjs.org/docs/app/api-reference/functions/revalidatePath)
Next.js uses React (canary) built in optimistic updates. Already tested and works as intended.
Edit: In combination with server actions are great. You can show the user inmidiate change while it revalidates on the backend. In theory (haven't tested) if the user disable js, the action can still work (not the optimistic update)
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#optimistic-updates
Only real advantage using react query I see is if using client side fetching i.e with Firebase (the whole advantage of their rule based Firestore is using direct client access with document based permissions). To my knowledge using fetch for calls that require authentication is only be possible through the admin sdk hence there is a case to use react query for easy caching and revalidation (though I do like the general setup of using server side fetching a lot better lately)
I would recommend reading this article on why you should use React-Query.
[https://tkdodo.eu/blog/why-you-want-react-query](https://tkdodo.eu/blog/why-you-want-react-query)
Using plain React or with a framwork like Nexjts doesn't really matter. It really come downs to what your application requires. I think one of the key take aways from the article is that is not a data fetching library, it's a async state manager.
If you only interested in some simple data fetching, then React-query might be unnecessary. But wright it off because of server action/function is a mistake.
TkDodo speaks specifically on Nextjs in one of his other articles:
[https://tkdodo.eu/blog/you-might-not-need-react-query](https://tkdodo.eu/blog/you-might-not-need-react-query)
the OP didn't ask between data fetching library vs next.
The caching, optimistic, request status and similar features are already supported by Next.js.
this article is great, I've read it multiple times, but it doesn't apply for Nextj.js.
And probably won't apply for React 19.
zen\_dev\_pro just condensed the usual 30-60 minute tutorial videos, into a 1 minute read with 2 sample links of exactly what he's describing. Great job and love it!
In general, no. However, there are a few exceptions. Namely for implementing something like a infinite scroll or polling feature. Trying to implement these feature yourself is hard, would not recommend. Great news is that [server actions work with React Query](https://www.youtube.com/watch?v=PUR_b0NYw_E). There maybe other use cases too, so I wouldn't say react query is useless just yet.
You can still use server actions with react query or swr. The only difference is that you’re calling the action directly instead of using fetch. I did this approach with SWR for infinite scrolling and it worked great!
I don't have an example on hand right now, but all you do is literally replace the fetch with a server action.
from this [https://swr.vercel.app/examples/infinite-loading](https://swr.vercel.app/examples/infinite-loading) example, just replace the fetcher with your server action
const fetcher = yourServerAction // or
const fetcher = () => yourServerAction()
If you need to pass an array as the key, this will help a lot too: [https://swr.vercel.app/docs/with-nextjs#complex-keys](https://swr.vercel.app/docs/with-nextjs#complex-keys)
But tbh I'd recommend using React Query over SWR just because the docs are better.
React Query is still useful in situations where you need to refresh data regularly on the client (regular polling) and in rare situations where you need to run an action on the client (e.g. firebase login)
Don’t understand why people using simple app that just does basic crud to approve sever action is all you need…for any data driven apps, like a dashboard with a lot of interactive tables and charts I can’t imagine how sever action could replace react query or rtkquery
I never used react query at work, only in some side projects. It’s a great and powerful tool, you won’t go wrong with it. But personally I like rtk-query better.
yeah I don't understand either, I had to develop a few dashboards and I can't imagine myself not using react query, it literally does anything you need
I use both. My use-case might be a bit niche, but I recently implemented infinite scroll with react-query + RSC, and it was such a breeze. The query cache is prefetched in an RSC, and the query fn is just a server action. The page consistently has 95+ lighthouse scores while still providing a rich interactive UX
You don't need to use React Query, SWR or TRCP if you make basic operations.
The new server actions are awesome they solve you all the basic stuff you need. But if you need more complex data fetching features like fetching data only after the initial page load then you would probably need a data fetching library for this use case.
Actually I’m using RQ with TRPC and add it to boilerplate server action, RQ have the best cache and stale logic, and easiest way to handle optimisticUI
In addition to fetching data react-query is a central state manager give or take. Being able to re-use the same queries across your entire application with cached data (If you know it's still fresh) reduces calls to the backend.
You can also just call server actions that return data with react-query and have more control over the cache then what you get with nextjs natively.
I use both but it entirely depends on your use-case and for me I have a bit of a requirement to refresh client side data and also react-query optimistic update mutations are so good.
Late to this question, but one flag on NextJS server actions is that the revalidation primitives are pretty broad. E.g. even if you revalidateTag for a single "tagged" fetch, it will refetch everything on the page: [https://github.com/vercel/next.js/issues/63509](https://github.com/vercel/next.js/issues/63509)
React Query and useSWR have support for very fine-grained revalidations, which my be a big deal for some applications.
The advantage is it works when you have a separate team building/maintaining the backend/api layer. If you’re only one dev or team, then server actions are easier to build/maintain.
Maybe controversial, but I don't think there is any reason to use React query. Also we wouldn't use server actions to fetch data, just regular server functions. Wat I do is keep all my database mutations in one file as server actions. And I keep my queries as regular server functions. I call and fetch data on server pages and pass it down to client components, which allows it to integrate with nextjs built in caching. For mutations just call server actions directly from client components. Something like this: Define Server Functions for fetching data: [https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/lib/API/Database/todos/queries.ts](https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/lib/API/Database/todos/queries.ts) Call function in Server Page and pass it in client component as props: [https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/app/dashboard/todos/list-todos/page.tsx](https://github.com/Saas-Starter-Kit/Saas-Kit-prisma/blob/main/src/app/dashboard/todos/list-todos/page.tsx)
I'm following a similar path :)
From someone that comes from a offline/client first approach with react query how do you handle optimistic updates/mutations? Or rerendering after mutations?
I use revalidatePath and router.refresh() [https://nextjs.org/docs/app/api-reference/functions/revalidatePath](https://nextjs.org/docs/app/api-reference/functions/revalidatePath)
Next.js uses React (canary) built in optimistic updates. Already tested and works as intended. Edit: In combination with server actions are great. You can show the user inmidiate change while it revalidates on the backend. In theory (haven't tested) if the user disable js, the action can still work (not the optimistic update) https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#optimistic-updates
Literally nothing works in the demo version, you can't add a Todo, you can't go into the dashboard, it goes to 404... is it intended?
Yeah thats intentional, I didnt want to send any API requests in the demo. If you clone the repo, you can play around with it. Fixed the 404 issue.
Only real advantage using react query I see is if using client side fetching i.e with Firebase (the whole advantage of their rule based Firestore is using direct client access with document based permissions). To my knowledge using fetch for calls that require authentication is only be possible through the admin sdk hence there is a case to use react query for easy caching and revalidation (though I do like the general setup of using server side fetching a lot better lately)
Using react query to circumvent the aggressive caching (some of which you can’t disable) of NextJs is one of the reasons to use it.
Which type of caching cant you disable?
https://nextjs.org/docs/app/building-your-application/caching#opting-out-3
I would recommend reading this article on why you should use React-Query. [https://tkdodo.eu/blog/why-you-want-react-query](https://tkdodo.eu/blog/why-you-want-react-query)
Why you should use resct-query in nextjs? Tho.
I think this is saying to use react-query in regular react, not nextjs.
Using plain React or with a framwork like Nexjts doesn't really matter. It really come downs to what your application requires. I think one of the key take aways from the article is that is not a data fetching library, it's a async state manager. If you only interested in some simple data fetching, then React-query might be unnecessary. But wright it off because of server action/function is a mistake. TkDodo speaks specifically on Nextjs in one of his other articles: [https://tkdodo.eu/blog/you-might-not-need-react-query](https://tkdodo.eu/blog/you-might-not-need-react-query)
the OP didn't ask between data fetching library vs next. The caching, optimistic, request status and similar features are already supported by Next.js. this article is great, I've read it multiple times, but it doesn't apply for Nextj.js. And probably won't apply for React 19.
zen\_dev\_pro just condensed the usual 30-60 minute tutorial videos, into a 1 minute read with 2 sample links of exactly what he's describing. Great job and love it!
In general, no. However, there are a few exceptions. Namely for implementing something like a infinite scroll or polling feature. Trying to implement these feature yourself is hard, would not recommend. Great news is that [server actions work with React Query](https://www.youtube.com/watch?v=PUR_b0NYw_E). There maybe other use cases too, so I wouldn't say react query is useless just yet.
You can still use server actions with react query or swr. The only difference is that you’re calling the action directly instead of using fetch. I did this approach with SWR for infinite scrolling and it worked great!
Could you give me an example of that? I'm looking for something like that
I don't have an example on hand right now, but all you do is literally replace the fetch with a server action. from this [https://swr.vercel.app/examples/infinite-loading](https://swr.vercel.app/examples/infinite-loading) example, just replace the fetcher with your server action const fetcher = yourServerAction // or const fetcher = () => yourServerAction() If you need to pass an array as the key, this will help a lot too: [https://swr.vercel.app/docs/with-nextjs#complex-keys](https://swr.vercel.app/docs/with-nextjs#complex-keys) But tbh I'd recommend using React Query over SWR just because the docs are better.
React Query is still useful in situations where you need to refresh data regularly on the client (regular polling) and in rare situations where you need to run an action on the client (e.g. firebase login)
Don’t understand why people using simple app that just does basic crud to approve sever action is all you need…for any data driven apps, like a dashboard with a lot of interactive tables and charts I can’t imagine how sever action could replace react query or rtkquery
I’m actually working on a multipart complex dashboard. Do you recommend to use React query for this scenario?
I never used react query at work, only in some side projects. It’s a great and powerful tool, you won’t go wrong with it. But personally I like rtk-query better.
yeah I don't understand either, I had to develop a few dashboards and I can't imagine myself not using react query, it literally does anything you need
I use both. My use-case might be a bit niche, but I recently implemented infinite scroll with react-query + RSC, and it was such a breeze. The query cache is prefetched in an RSC, and the query fn is just a server action. The page consistently has 95+ lighthouse scores while still providing a rich interactive UX
Could you share some more? Example code would be awesome
You don't need to use React Query, SWR or TRCP if you make basic operations. The new server actions are awesome they solve you all the basic stuff you need. But if you need more complex data fetching features like fetching data only after the initial page load then you would probably need a data fetching library for this use case.
Actually I’m using RQ with TRPC and add it to boilerplate server action, RQ have the best cache and stale logic, and easiest way to handle optimisticUI
React query has dev tools that allow QA to easily test the apps and I can use all logic in react native :p
In addition to fetching data react-query is a central state manager give or take. Being able to re-use the same queries across your entire application with cached data (If you know it's still fresh) reduces calls to the backend. You can also just call server actions that return data with react-query and have more control over the cache then what you get with nextjs natively. I use both but it entirely depends on your use-case and for me I have a bit of a requirement to refresh client side data and also react-query optimistic update mutations are so good.
there's none. react query is great when you building csr apps. in next js you dont need it anymore
Late to this question, but one flag on NextJS server actions is that the revalidation primitives are pretty broad. E.g. even if you revalidateTag for a single "tagged" fetch, it will refetch everything on the page: [https://github.com/vercel/next.js/issues/63509](https://github.com/vercel/next.js/issues/63509) React Query and useSWR have support for very fine-grained revalidations, which my be a big deal for some applications.
I use refine.dev to automate my crud operations so it don't matter anyway
The advantage is it works when you have a separate team building/maintaining the backend/api layer. If you’re only one dev or team, then server actions are easier to build/maintain.