d364b09885
Two correctness bugs in the real-time stack — both silent failures, both
session-wide once they trigger.
(1) `SocketProvider` was setting the React context to null on every
`disconnect` event. socket.io's built-in reconnection re-establishes the
underlying transport and replays handlers, but the React tree had
already lost its reference to the socket — so every `useSocket()`
consumer saw null until a session/port change forced a remount. Effect:
after the first transient drop (laptop sleep, wifi blip, server
restart), realtime invalidation and toasts went dead session-wide with
no user-visible signal.
Fix: keep the socket reference stable for the lifetime of the
session+port, and surface a separate `isConnected` boolean for any UI
that wants to render an offline indicator. Exposed as a new
`useIsSocketConnected()` hook; `useSocket()` signature is unchanged.
(2) `useRealtimeInvalidation` captured `eventMap` as a useEffect
dependency. Every caller passes a fresh `{ ... }` object literal on each
render, so the effect re-ran every render → `socket.off`/`socket.on`
storm on pages with many subscribed events.
Fix: extract the subscription logic into a pure helper
(`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now
keeps the latest map in a ref and only re-subscribes when the SET of
event names changes (joined-keys signature, not object identity). The
handler reads `ref.current` at fire time, so callers still see fresh
queryKey lists without re-binding.
Helper is unit-tested with a stub socket: registration count,
fire-time map lookup, cleanup deregistration, missing-event safety.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { useSocket } from '@/providers/socket-provider';
|
|
import { subscribeRealtimeInvalidations, type EventMap } from '@/hooks/realtime-invalidation-core';
|
|
|
|
// Re-export for convenience so callers don't need to know about the split.
|
|
export type { EventMap, SocketLike } from '@/hooks/realtime-invalidation-core';
|
|
|
|
/**
|
|
* Subscribes to socket events and invalidates React Query caches.
|
|
*
|
|
* Safe to call with an inline-literal `eventMap` — the hook only re-subscribes
|
|
* when the SET of event keys actually changes (not when the object identity
|
|
* changes). The latest query-key list is read at event fire-time via a ref.
|
|
*
|
|
* @example
|
|
* useRealtimeInvalidation({
|
|
* 'client:created': [['clients']],
|
|
* 'client:updated': [['clients'], ['clients', clientId]],
|
|
* 'client:archived': [['clients']],
|
|
* });
|
|
*/
|
|
export function useRealtimeInvalidation(eventMap: EventMap) {
|
|
const socket = useSocket();
|
|
const queryClient = useQueryClient();
|
|
|
|
// Stash the latest map in a ref so handlers always see fresh queryKeys
|
|
// without re-subscribing.
|
|
const eventMapRef = useRef(eventMap);
|
|
eventMapRef.current = eventMap;
|
|
|
|
// Re-subscribe ONLY when the set of event names changes. Object identity
|
|
// of `eventMap` flips on every caller render; the joined key signature
|
|
// doesn't.
|
|
const eventKeysSig = Object.keys(eventMap).sort().join('|');
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
// eventMapRef is intentionally not in deps — it's a ref; we only want to
|
|
// re-run when the socket, queryClient, or the event-key SET changes.
|
|
return subscribeRealtimeInvalidations(
|
|
socket,
|
|
eventKeysSig.length > 0 ? eventKeysSig.split('|') : [],
|
|
queryClient,
|
|
() => eventMapRef.current,
|
|
);
|
|
}, [socket, queryClient, eventKeysSig]);
|
|
}
|