Replace Sagas with Tanstack Query

[framitdavid]

Sagas in a nutshell:
Redux-Saga was created to handle side effects and async code upon the Redux state. Sagas are functions that listen to redux actions and then run async operations such as fetching data from an API and then mutating the results back to the redux state.

The problem for us
First of all, Sagas has a learning curve for new team members that might be hard for someone. This can lead to unnecessary time-consuming or just a few team members having enough knowledge about the technology. Sagas do also make it possible to over-engineer or create a pattern that complicates the application more than necessary. Sagas is built upon many concepts that needed to be learned to understand Sagas well enough.

The second problem is that this approach forces us to save our data within the Redux State and write a lot of boilerplates and our own code for caching and error handling.

Proposed solution
I propose to do fetching and data mutation with Tanstack Query instead of Redux-Saga. This will give us a lot of benefits such as built-in caching, background-fetching, retries, infinite queries for long lists and much more. We stop writing a lot of boilerplates to handle caching and error handling.

React Query allows us to separate the client state from the data state. Today we have all of our data/server state within the Redux Store and it's normalized in a way that makes it hard to work with, ref. #603

Tanstack Query is using the hooks API and therefore it is very Reactish and increase the developer experience. Hopefully, we can make the codebase smaller and easier to follow when network calls are made. Tanstack Query does also have great DevTools support.

Tasks

Preview Give feedback

1. Rewrite useGetOptions() and data lists to hooks using Tanstack Query without Redux #1294
   fe-v4 quality/debt +2
   

   
2. Rewrite attachment sagas to use hooks + Tanstack Query #1504
   fe-v4 quality/debt +2
   
3. Rewrite PDF sagas to hooks/reactive/Tanstack Query #1505
   fe-v4 quality/debt +2
   
4. Rewrite validation sagas to hooks/Tanstack query #1506
   area/validation fe-v4 quality/debt +3
   

   
5. Rewrite process/task management to hooks/Tanstack query #1507
   fe-v4 quality/debt +2
   
6. Rewrite page navigation using hooks #1508
   fe-v4 quality/debt +2
   
7. Rewrite fetching sagas to use Tanstack Query #1509
   fe-v4 quality/debt +2
   
8. Rewrite select party mutation to use Tanstack Query #1510
   fe-v4 quality/debt +2
9. Rewrite instantiationSaga to Tanstack Query #1511
   fe-v4 quality/debt +2
   

[olemartinorg]

Closing as done! 🥳

[framitdavid]

Closing as done! 🥳

Solid work! 👏