fix(api): kill currentPortId persist race + dedupe admin/ports stampede
The dashboard and residential interest smoke tests were intermittently
failing with the page rendering empty/skeleton state. Root causes:
1. ui-store persisted currentPortId/Slug, but those are URL-derived state.
After login lands on /<first-port-by-name>/dashboard, localStorage holds
that port. Hard-navigating to /port-nimara/... rehydrated the store with
the stale id, and useQuery fired with the wrong port before
PortProvider's URL-sync useEffect could correct it. Drop both fields
from partialize — PortProvider re-derives them from the route every
navigation.
2. apiFetch's slug-to-port fallback fired N parallel /api/v1/admin/ports
calls when N components mounted simultaneously with an empty store.
Dedupe in-flight lookups so a stampede collapses into one round-trip.
Also tightened four flaky smoke tests that depended on a fixed 3s wait or
non-waiting isVisible({timeout}) — replaced with expect(...).toBeVisible
or expect.poll so they handle dev-mode JIT cold-start delays cleanly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,21 +10,33 @@ export interface ApiFetchOptions extends Omit<RequestInit, 'body'> {
|
||||
* Avoids re-fetching `/api/v1/admin/ports` on every request when the Zustand
|
||||
* store hasn't hydrated yet (fresh browser context, e2e tests, hard reload). */
|
||||
const slugToIdCache = new Map<string, string>();
|
||||
/** Dedupe in-flight admin/ports lookups so a stampede of parallel apiFetch
|
||||
* calls (typical on dashboard mount) collapses into a single network round-
|
||||
* trip instead of N. */
|
||||
let inFlightPortsLookup: Promise<Array<{ id: string; slug: string }> | null> | null = null;
|
||||
|
||||
async function resolvePortIdFromSlug(slug: string): Promise<string | null> {
|
||||
const cached = slugToIdCache.get(slug);
|
||||
if (cached) return cached;
|
||||
try {
|
||||
const res = await fetch('/api/v1/admin/ports', { credentials: 'include' });
|
||||
if (!res.ok) return null;
|
||||
const body = (await res.json()) as { data?: Array<{ id: string; slug: string }> };
|
||||
const port = body.data?.find((p) => p.slug === slug);
|
||||
if (!port) return null;
|
||||
slugToIdCache.set(slug, port.id);
|
||||
return port.id;
|
||||
} catch {
|
||||
return null;
|
||||
if (!inFlightPortsLookup) {
|
||||
inFlightPortsLookup = (async () => {
|
||||
try {
|
||||
const res = await fetch('/api/v1/admin/ports', { credentials: 'include' });
|
||||
if (!res.ok) return null;
|
||||
const body = (await res.json()) as { data?: Array<{ id: string; slug: string }> };
|
||||
return body.data ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
})().finally(() => {
|
||||
inFlightPortsLookup = null;
|
||||
});
|
||||
}
|
||||
const ports = await inFlightPortsLookup;
|
||||
const port = ports?.find((p) => p.slug === slug);
|
||||
if (!port) return null;
|
||||
slugToIdCache.set(slug, port.id);
|
||||
return port.id;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user