Skip to content

State Management

Current MVP

Basic TanStack Query data fetching is available from Phase 1. Zustand stores and RBAC-aware state are added in Phase 4.


State Architecture

FinSight separates state into two categories:

Type Tool Examples
Server state TanStack Query Financial data, company lists, AI responses
Client state Zustand Selected company, active period, UI preferences

TanStack Query

Query Keys

export const queryKeys = {
  companies: () => ["companies"] as const,
  company: (id: number) => ["companies", id] as const,
  incomeStatement: (id: number, period: string) =>
    ["companies", id, "income-statement", period] as const,
  aiSummary: (id: number, period: string) =>
    ["ai", "summary", id, period] as const,
};

Caching Strategy

Optimistic Updates


Zustand Stores

useFinancialStore

interface FinancialStore {
  selectedCompanyId: number | null;
  activePeriod: string;
  setSelectedCompany: (id: number) => void;
  setActivePeriod: (period: string) => void;
}

useAuthStore

Planned Architecture (Future Phases)

Auth store with RBAC is implemented in Phase 4.

uiStore


Data Fetching Patterns

Financial Statements with Suspense

Streaming AI Responses