React / Tanstack Query in Next.js
Answered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
What are the situation, scenario or test cases where React Query can be used for Next.js's app router architecture.
Answered by B33fb0n3
to fetch data on serverside is absolutely normal and should be the normal way of getting data. However, you can still get data clientside, when passing it from serverside to clientside. Like that you can fetch data serverside, but access the data clientside
10 Replies
@Chinese Alligator What are the situation, scenario or test cases where React Query can be used for Next.js's app router architecture.
use it, whenever you need to fetch something clientside. So every example where you fetch data clientside, you can also integrate react query. This is one example: https://github.com/B33fb0n3/rq-profile-picture
Chinese AlligatorOP
i normally fetch data on server using next.js fetch api but there are cases where i need data on client so i have to use server Action in useEffect, so would you say i use react quiery in that case.
@Chinese Alligator i normally fetch data on server using next.js fetch api but there are cases where i need data on client so i have to use server Action in useEffect, so would you say i use react quiery in that case.
to fetch data on serverside is absolutely normal and should be the normal way of getting data. However, you can still get data clientside, when passing it from serverside to clientside. Like that you can fetch data serverside, but access the data clientside
Answer
@B33fb0n3 to fetch data on serverside is absolutely normal and should be the normal way of getting data. However, you can still get data clientside, when passing it from serverside to clientside. Like that you can fetch data serverside, but access the data clientside
Chinese AlligatorOP
let say i have a backend api at my disposal so i'm not using next.js for backend but i don't want to expose my backend to front end so i have used server action to map my backend api 1 on 1 . Now normally i fetch data on server side but for client side component i use it with useEffect, Site includes pagination, search functionality, filter search which will show some chips on front end now how do i approach this situation should i stick to normal next.js would react query will be better or any other solution im unaware of? please help
@Chinese Alligator let say i have a backend api at my disposal so i'm not using next.js for backend but i don't want to expose my backend to front end so i have used server action to map my backend api 1 on 1 . Now normally i fetch data on server side but for client side component i use it with useEffect, Site includes pagination, search functionality, filter search which will show some chips on front end now how do i approach this situation should i stick to normal next.js would react query will be better or any other solution im unaware of? please help
react query would be waaaaay better for clientside fetching. So use react query instead of trying something with useEffect. I think in most of the cases it's possible to fetch data on server and pass it down to the client
@B33fb0n3 react query would be waaaaay better for clientside fetching. So use react query instead of trying something with useEffect. I think in most of the cases it's possible to fetch data on server and pass it down to the client
Chinese AlligatorOP
i know i'm stretching it but can you provide some project code or something to take a look?
Sokoke
To add to B33f's response, when you start using TanStack Query (FKA React Query) to map out your backend API, you'll experience several notable benefits:
Consistent API Interfaces: You'll have uniform interfaces and consistent caching/invalidation mechanisms across your application, streamlining data management and reducing discrepancies.
Reduced State Management Overhead: By leveraging TanStack Query, you can minimize the need for additional state management solutions such as Context API or Redux, simplifying your state handling and reducing boilerplate code.
Endpoint Generation: You can generate your endpoints using a code generator, which speeds up development and ensures accuracy in your API interactions.
Some sources -
https://github.com/7nohe/openapi-react-query-codegen
https://tanstack.com/query/latest/docs/framework/react/overview
Consistent API Interfaces: You'll have uniform interfaces and consistent caching/invalidation mechanisms across your application, streamlining data management and reducing discrepancies.
Reduced State Management Overhead: By leveraging TanStack Query, you can minimize the need for additional state management solutions such as Context API or Redux, simplifying your state handling and reducing boilerplate code.
Endpoint Generation: You can generate your endpoints using a code generator, which speeds up development and ensures accuracy in your API interactions.
Some sources -
https://github.com/7nohe/openapi-react-query-codegen
https://tanstack.com/query/latest/docs/framework/react/overview
Chinese AlligatorOP
Is it okay to use prefetchQuery in server component where i'll pass my server action in queryFn?
Chinese AlligatorOP
i intend to use it with pagination like prefetch data on server with prefetchQuery, is it ok