openSUSE / agama / 9839659175

72%

Build Type

push

github

Committed by web-flow

Commit Message

refactor(web): adopt TanStack Query for state management (#1439)

Trello:
https://trello.com/c/8u1WOJz4/3723-8-agama-ui-adopt-a-state-management-solution

Agama's UI state management could be better. For that reason, and after
evaluating a few alternatives (see the list of considered alternatives),
we decided to adopt [Tanstack Query (former React
Query)](https://tanstack.com/query/v5).

## Why TanStack query

* It offers a mechanism (based on promises) to fetch/update the state.
* It is not limited to the client state: it works great with the server
state, too.
* It takes care of caching, re-fetching, error handling, etc.
* It is a mature, well-documented and widely known project.
* Plays nicely with [React Router](https://reactrouter.com/), although a
[TanStack Router](https://tanstack.com/router/latest) project exits.

## What is included in this PR

There is quite some work to do so let's consider this pull request as
the first step in this path. It introduces the following changes:

- Add TanStack query as a dependency.
- Replace `L10Provider` with a queries-based approach, including data
mutation. Check
[queries/l10n.js](https://github.com/openSUSE/agama/blob/react-query/web/src/queries/l10n.js)
if you are curious.
- Re-enable L10nPage tests (and add other tests).
- Use React Router loaders to make sure data is loaded before the
components are rendered.

## Considered Alternatives

- [Redux](https://react-redux.js.org/)
- [Jotai](https://jotai.org/)
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
- [Tanstack Query (former React Query)](https://tanstack.com/query/v5)
- [Recoil](https://recoiljs.org/)

We had a look at others but did not consider them at all.

Run Details

1987 of 2868 branches covered (69.28%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 4 files covered. (100.0%)

46 existing lines in 4 files now uncovered.

19586 of 27343 relevant lines covered (71.63%)

34.75 hits per line