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
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
