perf(web): release monitor resources on unmount

This commit is contained in:
lingniu
2026-07-16 00:59:57 +08:00
parent c00f50551a
commit e80e1dcea9
9 changed files with 194 additions and 37 deletions

View File

@@ -1,6 +1,7 @@
import { useQuery } from '@tanstack/react-query';
import { api } from '../../api/client';
import type { VehicleRealtimeRow } from '../../api/types';
import { QUERY_MEMORY } from '../queryPolicy';
export type MonitorFilters = {
keyword: string;
@@ -64,14 +65,16 @@ export function useMonitorData(filters: MonitorFilters, viewport: MonitorViewpor
const summary = useQuery({
queryKey: ['monitor', 'summary', params.toString()],
queryFn: ({ signal }) => api.monitorSummary(params, signal),
refetchInterval: MONITOR_REFRESH.summary
refetchInterval: MONITOR_REFRESH.summary,
gcTime: QUERY_MEMORY.summaryGcTime
});
const vehicles = useQuery({
queryKey: ['monitor', 'vehicles', params.toString()],
queryFn: ({ signal }) => api.vehicleRealtime(params, signal),
enabled: vehicleEnabled,
placeholderData: (previous) => previous,
refetchInterval: MONITOR_REFRESH.fleet
refetchInterval: MONITOR_REFRESH.fleet,
gcTime: QUERY_MEMORY.highVolumeGcTime
});
const map = useQuery({
@@ -89,7 +92,8 @@ export function useMonitorData(filters: MonitorFilters, viewport: MonitorViewpor
queryFn: ({ signal }) => api.vehicleRealtime(new URLSearchParams({ keyword: selectedVin, limit: '1', offset: '0' }), signal),
enabled: Boolean(selectedVin),
staleTime: 5_000,
refetchInterval: selectedVin ? MONITOR_REFRESH.selected : false
refetchInterval: selectedVin ? MONITOR_REFRESH.selected : false,
gcTime: QUERY_MEMORY.highVolumeGcTime
});
return { summary, vehicles, map, selectedVehicle };
@@ -106,14 +110,16 @@ export function useMonitorVehicleCard(vin: string, vehicle?: VehicleRealtimeRow,
queryKey: ['monitor', 'vehicle-card', 'detail', vin],
queryFn: ({ signal }) => api.vehicleDetail(new URLSearchParams({ keyword: vin }), signal),
enabled,
staleTime: 30_000
staleTime: 30_000,
gcTime: QUERY_MEMORY.highVolumeGcTime
});
const activeAlerts = useQuery({
queryKey: ['monitor', 'vehicle-card', 'active-alerts', vin],
queryFn: ({ signal }) => api.alertEventsV2({ keyword: vin, status: 'active', limit: 20, offset: 0 }, signal),
enabled,
staleTime: 10_000,
refetchInterval: enabled && activelyTracked ? MONITOR_REFRESH.alerts : false
refetchInterval: enabled && activelyTracked ? MONITOR_REFRESH.alerts : false,
gcTime: QUERY_MEMORY.highVolumeGcTime
});
const address = useQuery({
queryKey: ['monitor', 'vehicle-card', 'address', longitude, latitude],
@@ -122,7 +128,8 @@ export function useMonitorVehicleCard(vin: string, vehicle?: VehicleRealtimeRow,
latitude: latitude!.toFixed(6)
}), signal),
enabled: enabled && hasCoordinate,
staleTime: 60 * 60_000
staleTime: 60 * 60_000,
gcTime: QUERY_MEMORY.highVolumeGcTime
});
return { detail, activeAlerts, address };