feat(notifications): replace 30s short-polling with SSE stream and realtime toast alerts (!36) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(notifications): replace 30s short-polling with SSE stream and realtime toast alerts

Feature: Realtime Notifications via Server-Sent Events (SSE)

Overview

Replaced the legacy 30-second short-polling mechanism (refetchInterval: 30000) for notifications and unread counts with a persistent, low-overhead Server-Sent Events (SSE) connection. The app now receives instant updates for incoming notifications and badge counts without redundant network polling.

Key Changes

useNotificationSSE Hook (src/hooks/use-notification-sse.ts):
- Automatically manages the lifecycle of an EventSource connection to /api/v1/notifications/stream.
- Supports authentication via cookies and ?token=<access_token> query parameters for mobile webview compatibility.
- Listens to unread_count events to dynamically update React Query cache (notificationKeys.unread()).
- Listens to notification events to invalidate notifications list cache and trigger realtime toasts.
- Handles automatic reconnection and graceful connection termination upon logout or component unmount.
NotificationRealtimeListener (src/components/shared/NotificationRealtimeListener.tsx):
- Headless listener component mounted in Layout.tsx within SnackbarProvider and AuthInitializer.
- Dispatches immediate snackbar notifications when alerts (e.g., budget warnings, saving goals, anomalies) are received.
Eliminated 30s Polling (src/hooks/use-notifications.ts):
- Disabled refetchInterval (false) in both useUnreadNotificationCount and useNotifications.
- Increased staleTime to 60_000ms, retaining refetchOnWindowFocus: true as a graceful fallback on device wake-up.
API Client Update (src/lib/api-client.ts):
- Exported API_BASE_URL to ensure consistent endpoint resolution across all services and streams.
Memory Documentation (.agents/memory.md):
- Documented the architectural transition from polling to SSE.

Performance & Efficiency Impact

Network Traffic: Eliminated continuous HTTP requests every 30 seconds per active client tab, saving battery and bandwidth on mobile devices.
Latency: Notification and unread badge updates are delivered with sub-second latency instead of up to a 30-second delay.

## Feature: Realtime Notifications via Server-Sent Events (SSE)

### Overview
Replaced the legacy 30-second short-polling mechanism (`refetchInterval: 30000`) for notifications and unread counts with a persistent, low-overhead **Server-Sent Events (SSE)** connection. The app now receives instant updates for incoming notifications and badge counts without redundant network polling.

---

### Key Changes
- **`useNotificationSSE` Hook (`src/hooks/use-notification-sse.ts`)**:
  - Automatically manages the lifecycle of an `EventSource` connection to `/api/v1/notifications/stream`.
  - Supports authentication via cookies and `?token=<access_token>` query parameters for mobile webview compatibility.
  - Listens to `unread_count` events to dynamically update React Query cache (`notificationKeys.unread()`).
  - Listens to `notification` events to invalidate notifications list cache and trigger realtime toasts.
  - Handles automatic reconnection and graceful connection termination upon logout or component unmount.
- **`NotificationRealtimeListener` (`src/components/shared/NotificationRealtimeListener.tsx`)**:
  - Headless listener component mounted in `Layout.tsx` within `SnackbarProvider` and `AuthInitializer`.
  - Dispatches immediate snackbar notifications when alerts (e.g., budget warnings, saving goals, anomalies) are received.
- **Eliminated 30s Polling (`src/hooks/use-notifications.ts`)**:
  - Disabled `refetchInterval` (`false`) in both `useUnreadNotificationCount` and `useNotifications`.
  - Increased `staleTime` to `60_000ms`, retaining `refetchOnWindowFocus: true` as a graceful fallback on device wake-up.
- **API Client Update (`src/lib/api-client.ts`)**:
  - Exported `API_BASE_URL` to ensure consistent endpoint resolution across all services and streams.
- **Memory Documentation (`.agents/memory.md`)**:
  - Documented the architectural transition from polling to SSE.

---

### Performance & Efficiency Impact
- **Network Traffic**: Eliminated continuous HTTP requests every 30 seconds per active client tab, saving battery and bandwidth on mobile devices.
- **Latency**: Notification and unread badge updates are delivered with sub-second latency instead of up to a 30-second delay.