Summary
The admin UI currently manages all server state manually using useState + useEffect + custom fetch wrappers (apiGet, apiPost, apiPut, apiDelete in admin-ui/src/services/api.ts). This results in repetitive boilerplate across every page: manual loading/error state, no caching, no background refetching, and no deduplication of in-flight requests.
Current approach
Each resource module (e.g. adminsApi.ts, realmsApi.ts, credentialsApi.ts) wraps raw fetch calls. Pages like CredentialsPage, DashboardPage, and AdminsPage manually wire setLoading(true/false) and setError(...) around every request.
Proposed change
Introduce TanStack Query (@tanstack/react-query) and replace:
useEffect + useState data-fetching patterns → useQuery hooks- Manual mutation handlers →
useMutation hooks with onSuccess cache invalidation
- Ad-hoc loading/error state → standard
isPending / isError from TanStack Query
The existing *Api.ts service functions remain as plain async functions and serve directly as queryFn/mutationFn inputs — no rewrite of the HTTP layer is required.
Benefits
- Eliminates repetitive loading/error state boilerplate across all pages
- Automatic caching and background refetching keeps the UI fresh
- Request deduplication out of the box
- Simpler, more readable page components
Scope
- Add
@tanstack/react-query to package.json
- Wrap the app in
QueryClientProvider
- Refactor each page/context that currently uses manual fetch state (
CredentialsPage, AdminsPage, RealmsPage, DashboardPage, useRealm context, etc.)
- Update or replace
LoadingState usage where TanStack Query's built-in state suffices
Summary
The admin UI currently manages all server state manually using
useState+useEffect+ customfetchwrappers (apiGet,apiPost,apiPut,apiDeleteinadmin-ui/src/services/api.ts). This results in repetitive boilerplate across every page: manualloading/errorstate, no caching, no background refetching, and no deduplication of in-flight requests.Current approach
Each resource module (e.g.
adminsApi.ts,realmsApi.ts,credentialsApi.ts) wraps rawfetchcalls. Pages likeCredentialsPage,DashboardPage, andAdminsPagemanually wiresetLoading(true/false)andsetError(...)around every request.Proposed change
Introduce TanStack Query (
@tanstack/react-query) and replace:useEffect+useStatedata-fetching patterns →useQueryhooksuseMutationhooks withonSuccesscache invalidationisPending/isErrorfrom TanStack QueryThe existing
*Api.tsservice functions remain as plain async functions and serve directly asqueryFn/mutationFninputs — no rewrite of the HTTP layer is required.Benefits
Scope
@tanstack/react-querytopackage.jsonQueryClientProviderCredentialsPage,AdminsPage,RealmsPage,DashboardPage,useRealmcontext, etc.)LoadingStateusage where TanStack Query's built-in state suffices