Skip to main content

Concern

Server state, fetching, and cache (queries/mutations).

Technology

TanStack Query (React Query)

Documentation​

Implementation

The desktop app includes @tanstack/react-query. frontends/desktop/src/main.tsx creates a QueryClient and wraps the app with QueryClientProvider, so any component can use hooks like useQuery and useMutation. API calls go through frontend services (e.g. frontends-shared/services/auth), which use handleRequest from frontends-shared/lib/api (see http-client): server errors (5xx) throw ServerError, client errors (4xx) are returned. Use the service function as mutationFn (e.g. mutationFn: authService.login). For multi-parameter services (e.g. update(id, body)), pass a single argument object: mutationFn: ({ id, body }) => catsService.update(id, body). Cache and refetch behavior follow TanStack Query’s defaults unless you configure the client.

Integration

http-client / Axios​

Frontend services use handleRequest (which throws on 5xx). Form submissions use the service as mutationFn; client errors are applied to the form via setError, server errors are shown via toaster in onError. See form-handling.

Version

v5