diff --git a/src/components/ReqViewer.tsx b/src/components/ReqViewer.tsx index 2b5d6d2..21de869 100644 --- a/src/components/ReqViewer.tsx +++ b/src/components/ReqViewer.tsx @@ -760,12 +760,10 @@ export default function ReqViewer({ eoseReceived, relayStates: reqRelayStates, overallState, - } = useReqTimelineEnhanced( - `req-${JSON.stringify(resolvedFilter)}-${closeOnEose}`, - resolvedFilter, - normalizedRelays, - { limit: resolvedFilter.limit || 50, stream }, - ); + } = useReqTimelineEnhanced(resolvedFilter, normalizedRelays, { + limit: resolvedFilter.limit || 50, + stream, + }); const [showQuery, setShowQuery] = useState(false); const [showExportDialog, setShowExportDialog] = useState(false); diff --git a/src/hooks/useReqTimelineEnhanced.ts b/src/hooks/useReqTimelineEnhanced.ts index 9da1414..c266419 100644 --- a/src/hooks/useReqTimelineEnhanced.ts +++ b/src/hooks/useReqTimelineEnhanced.ts @@ -36,14 +36,13 @@ interface UseReqTimelineEnhancedReturn { * - Syncs connection state from RelayStateManager * - Tracks events per relay via event._relay metadata * - Derives overall state from individual relay states + * - Generates subscription ID automatically from filters, relays, and options * - * @param id - Unique identifier for this timeline (for caching) * @param filters - Nostr filter(s) * @param relays - Array of relay URLs * @param options - Stream mode, limit, etc. */ export function useReqTimelineEnhanced( - id: string, filters: Filter | Filter[], relays: string[], options: UseReqTimelineEnhancedOptions = { limit: 50 }, @@ -85,6 +84,12 @@ export function useReqTimelineEnhanced( const stableFilters = useStableValue(filters); const stableRelays = useStableArray(relays); + // Generate stable subscription ID from parameters + // This ensures re-subscription when filters, relays, or stream mode changes + const subscriptionId = useMemo(() => { + return `req-${JSON.stringify(stableFilters)}-${stableRelays.join(",")}-${stream}`; + }, [stableFilters, stableRelays, stream]); + // Initialize relay states when relays change useEffect(() => { queryStartedAt.current = Date.now(); @@ -317,7 +322,7 @@ export function useReqTimelineEnhanced( return () => { subscriptions.forEach((sub) => sub.unsubscribe()); }; - }, [id, stableFilters, stableRelays, limit, stream, eventStore]); + }, [subscriptionId, limit, eventStore]); // Derive overall state from individual relay states const overallState = useMemo(() => {