How can I implement clean architecture principles in FE using tanstack-query (react-query) ?
I am currently more experienced with redux+react architectures which help me to separated the different layers of my front-end application.
In fact, if you consider the clean architecture (https://i.stack.imgur.com/Qoe42.png), you have different layers where UI (react code) is in the outer circle and business logic like usecase and domain are in inner circles. With redux, I can write the business logic into pure functions/class and indeed I don't depend on any UI framework nor redux.
I am wondering how tanstack-query adress this ? Because it seems I need to use hooks to handle state-management + data-fetching, therefore there is no clear separate layers. Data-fetching is tangled with UI dependent code.
A good related ressource about layers and isolation in react that seems broken with react-query
https://khalilstemmler.com/blogs/frontend/using-react-as-a-framework/
What do you think ? Maybe I am missing something 🙂
6 Replies
continuing-cyan•3y ago
Hi. We tried to decouple the queries from the api from the ui. Since react query is « just » a cache your code should be structured to work without. You can find an example of what we did here: https://codesandbox.io/s/react-query-and-query-defaults-vywtm?
GLabat
CodeSandbox
react-query and query defaults - CodeSandbox
Use query defaults to help factorisation of queryFn in addition to be able to access queryClient and perform query call inside queryFn
continuing-cyan•3y ago
We have strong key factories to build keys containing everything we need for queryFn which then calls our api layer. QueryDefaults help structuring.
Hope this helps
harsh-harlequinOP•3y ago
Thanks will look at that 🙂
And if you use react-query it breaks the layered architecture right ?
continuing-cyan•3y ago
Hum unsure to get your point here 🤔
harsh-harlequinOP•3y ago
Ok I got your point in your example. Is it a common way of doing things ?
The documentation seems to encourage using hooks directly.
Sorry I am not fully familiar yet with react-query vs tanstack-query.
continuing-cyan•3y ago
Well I think there are several ways of doing things. This one fits our needs. Maybe would you need some pieces of it (or not) and some others from different code. Would be great to have other opinions too.