Add query cache utilities for campaign data invalidation

Introduce new functions in query-cache.ts to handle cache invalidation for campaign-related queries. Update CampaignDetailPage, CampaignsPage, and CampaignWizardPage to utilize these functions for improved cache management upon successful mutations, ensuring the UI reflects the latest campaign data.

apps/web/src/lib/query-cache.ts

@@ -0,0 +1,21 @@
+import type { QueryClient } from '@tanstack/react-query';
+
+/** Invalidate list + dashboard after any campaign mutation. */
+export function invalidateCampaignListCaches(queryClient: QueryClient): Promise<void> {
+  return Promise.all([
+    queryClient.invalidateQueries({ queryKey: ['campaigns'] }),
+    queryClient.invalidateQueries({ queryKey: ['workspace', 'overview'] }),
+  ]).then(() => undefined);
+}
+
+/** Invalidate detail, stats, list, and dashboard for one campaign. */
+export function invalidateCampaignCaches(
+  queryClient: QueryClient,
+  campaignId: string,
+): Promise<void> {
+  return Promise.all([
+    queryClient.invalidateQueries({ queryKey: ['campaign', campaignId] }),
+    queryClient.invalidateQueries({ queryKey: ['campaign', campaignId, 'stats'] }),
+    invalidateCampaignListCaches(queryClient),
+  ]).then(() => undefined);
+}

apps/web/src/pages/CampaignDetailPage.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { Send, MessageSquare, Shield, Inbox, Pause, Play, Loader2, Trash2 } from 'lucide-react';
 import { apiGet, apiPatch, apiPost, apiDelete } from '../lib/api';
+import { invalidateCampaignCaches, invalidateCampaignListCaches } from '../lib/query-cache';
 import type {
   Campaign,
   CampaignSatellite,
@@ -120,8 +121,8 @@ export function CampaignDetailPage() {
 
   const saveSettingsMutation = useMutation({
     mutationFn: (payload: typeof settingsForm) => apiPatch<Campaign>(`/api/campaigns/${id}`, payload),
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: ['campaign', id] });
+      if (id) await invalidateCampaignCaches(queryClient, id);
       setSettingsMessage('Campaign settings saved');
       setSettingsError('');
     },
@@ -130,19 +131,15 @@ export function CampaignDetailPage() {
 
   const pauseMutation = useMutation({
     mutationFn: () => apiPost<Campaign>(`/api/campaigns/${id}/pause`),
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: ['campaign', id] });
+      if (id) await invalidateCampaignCaches(queryClient, id);
-      queryClient.invalidateQueries({ queryKey: ['campaign', id, 'stats'] });
-      queryClient.invalidateQueries({ queryKey: ['workspace', 'overview'] });
     },
   });
 
   const resumeMutation = useMutation({
     mutationFn: () => apiPost<Campaign>(`/api/campaigns/${id}/resume`),
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: ['campaign', id] });
+      if (id) await invalidateCampaignCaches(queryClient, id);
-      queryClient.invalidateQueries({ queryKey: ['campaign', id, 'stats'] });
-      queryClient.invalidateQueries({ queryKey: ['workspace', 'overview'] });
     },
   });
 
@@ -165,8 +162,8 @@ export function CampaignDetailPage() {
 
   const deleteMutation = useMutation({
     mutationFn: () => apiDelete(`/api/campaigns/${id}`),
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+      await invalidateCampaignListCaches(queryClient);
       queryClient.invalidateQueries({ queryKey: ['mailboxes'] });
       navigate('/campaigns');
     },

apps/web/src/pages/CampaignWizardPage.tsx

@@ -5,6 +5,7 @@ import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import type { CampaignRecipe } from '@warmbox/shared';
 import { PROVIDER_LABELS } from '@warmbox/shared';
 import { apiDelete, apiGet, apiPost } from '../lib/api';
+import { invalidateCampaignListCaches } from '../lib/query-cache';
 import type { Campaign, CreateCampaignInput, Mailbox, RecipePreviewDay } from '../lib/types';
 import { PageHeader } from '../components/PageHeader';
 import { Button } from '../components/ui/Button';
@@ -99,8 +100,8 @@ export function CampaignWizardPage() {
       }
       return campaign;
     },
-    onSuccess: (campaign) => {
+    onSuccess: async (campaign) => {
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+      await invalidateCampaignListCaches(queryClient);
       queryClient.invalidateQueries({ queryKey: ['mailboxes'] });
       navigate(`/campaigns/${campaign.id}`);
     },

apps/web/src/pages/CampaignsPage.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 import { Plus, Megaphone, Trash2 } from 'lucide-react';
 import { apiDelete, apiGet } from '../lib/api';
+import { invalidateCampaignListCaches } from '../lib/query-cache';
 import type { Campaign } from '../lib/types';
 import { PageHeader } from '../components/PageHeader';
 import { Button } from '../components/ui/Button';
@@ -22,8 +23,8 @@ export function CampaignsPage() {
 
   const deleteMutation = useMutation({
     mutationFn: (id: string) => apiDelete(`/api/campaigns/${id}`),
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+      await invalidateCampaignListCaches(queryClient);
       queryClient.invalidateQueries({ queryKey: ['mailboxes'] });
     },
   });