[P0] Add State Management (TanStack Query + Zustand) #86

New issue

Closed

opened 2026-06-10 03:32:30 +00:00 by Mark · 0 comments

Mark commented

2026-06-10 03:32:30 +00:00

Owner

Problem

The frontend has no state management system. All state is local to components via useState/useEffect. This causes:

No caching of API responses
No background refetching
Difficult to share state between components
No optimistic updates
Debugging difficulty

Proposed Solution

Add a proper state management stack:

1. TanStack Query (React Query)

Replace manual fetch calls with useQuery/useMutation
Automatic caching and background refetching
Optimistic updates for better UX
Query invalidation on mutations

2. Zustand for Global UI State

Active investigation state
Selected entities
UI preferences
Toast notification queue

Files to Create/Modify

frontend/package.json - add @tanstack/react-query, zustand
frontend/src/app.jsx - add QueryClient provider
frontend/src/store/ (new directory) - Zustand stores
frontend/src/api.js - integrate React Query hooks
All components consuming API data

Implementation Steps

Install dependencies
Create QueryClient configuration
Create Zustand stores (investigationStore, uiStore)
Refactor api.js to use React Query
Update components to use query hooks

Acceptance Criteria

TanStack Query handles all API data fetching
Zustand stores manage UI state
InvestigationDetail syncs with query cache
EntityFeed pulls from query cache
Optimistic updates work for entity creation

Effort

Medium - 1-2 weeks

## Problem The frontend has no state management system. All state is local to components via useState/useEffect. This causes: - No caching of API responses - No background refetching - Difficult to share state between components - No optimistic updates - Debugging difficulty ## Proposed Solution Add a proper state management stack: ### 1. TanStack Query (React Query) - Replace manual fetch calls with useQuery/useMutation - Automatic caching and background refetching - Optimistic updates for better UX - Query invalidation on mutations ### 2. Zustand for Global UI State - Active investigation state - Selected entities - UI preferences - Toast notification queue ### Files to Create/Modify - frontend/package.json - add @tanstack/react-query, zustand - frontend/src/app.jsx - add QueryClient provider - frontend/src/store/ (new directory) - Zustand stores - frontend/src/api.js - integrate React Query hooks - All components consuming API data ## Implementation Steps 1. Install dependencies 2. Create QueryClient configuration 3. Create Zustand stores (investigationStore, uiStore) 4. Refactor api.js to use React Query 5. Update components to use query hooks ## Acceptance Criteria - TanStack Query handles all API data fetching - Zustand stores manage UI state - InvestigationDetail syncs with query cache - EntityFeed pulls from query cache - Optimistic updates work for entity creation ## Effort Medium - 1-2 weeks

Mark

2026-06-10 03:32:30 +00:00

closed this issue
added the
agentic-osint

enhancement

triage-approved
labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Mark/osint-hub#86

No description provided.

Rows
Columns