Skip to main content

API Technology Choice

Context​

We need a flexible, efficient way to fetch complex, interconnected data for a fintech dashboard. Future plans include a mobile app and real-time updates.

Decision​

Use GraphQL as the API layer, with React Query as the client-side caching and state management layer via autogenerated hooks (GraphQL Code Generator).

Rationale​

  • GraphQL's ability to request exactly the fields needed solves over/under-fetching in a dashboard with heterogeneous widgets.
  • Subscriptions enable real-time updates without custom WebSocket schema.
  • React Query handles caching, window focus refetching, optimistic updates, and error retries more elegantly than Apollo Client's InMemoryCache for our complex, transaction-heavy UI.
  • Type safety from code generation reduces runtime errors.

Alternatives Considered​

  • REST + React Query: Would work but would require multiple endpoints and careful design to avoid N+1 on dashboard. Real-time via WebSocket would be separate.
  • Apollo Client: Full GraphQL client, but caching and local state management are more opinionated and harder to customise for optimistic updates. We prefer the flexibility of React Query.

Consequences​

  • Need to set up GraphQL Code Generator in the build pipeline.
  • Backend must support a GraphQL server; we will mock it with MSW for development.
  • Real-time will use GraphQL-WS protocol, which we’ll simulate with a small WebSocket server later.