Browse Source
Multiple node instances (GenerateImageNode, GenerateVideoNode, etc.) were each making their own /api/models requests when mounted, causing N duplicate network requests when N nodes existed on the canvas. This fix: - Adds deduplicatedFetch utility that shares in-flight requests to the same URL - Adds useProviderApiKeys() hook with shallow equality for stable API key refs - Updates all components to use primitive dependencies instead of object refs - Uses deduplicatedFetch for all model-fetching operations Expected result: 1 request instead of N when multiple nodes need the same data. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>handoff-20260429-1057
lapoaiscalers
5 months ago
6 changed files with 216 additions and 58 deletions
@ -0,0 +1,123 @@ |
|||||
|
/** |
||||
|
* Deduplicated fetch utility. |
||||
|
* |
||||
|
* When multiple callers request the same URL concurrently, this utility |
||||
|
* ensures only one actual network request is made. All callers receive |
||||
|
* the same response data once the request completes. |
||||
|
* |
||||
|
* This is useful for components that mount multiple instances (e.g., nodes) |
||||
|
* and all need to fetch the same models list - instead of N requests, |
||||
|
* only 1 request is made. |
||||
|
*/ |
||||
|
|
||||
|
// Map of URL -> in-flight promise
|
||||
|
const inFlightRequests = new Map<string, Promise<Response>>(); |
||||
|
|
||||
|
// Map of URL -> cloned response data (since Response body can only be read once)
|
||||
|
const responseCache = new Map<string, { data: unknown; timestamp: number }>(); |
||||
|
|
||||
|
// Cache TTL in milliseconds (5 seconds - short enough to get fresh data, long enough to dedupe)
|
||||
|
const CACHE_TTL = 5000; |
||||
|
|
||||
|
/** |
||||
|
* Generate a cache key from URL and headers |
||||
|
*/ |
||||
|
function getCacheKey(url: string, headers?: HeadersInit): string { |
||||
|
if (!headers) return url; |
||||
|
|
||||
|
// Sort header keys for consistent key generation
|
||||
|
const headerObj = headers instanceof Headers |
||||
|
? Object.fromEntries(headers.entries()) |
||||
|
: Array.isArray(headers) |
||||
|
? Object.fromEntries(headers) |
||||
|
: headers; |
||||
|
|
||||
|
const sortedHeaders = Object.keys(headerObj) |
||||
|
.sort() |
||||
|
.map((k) => `${k}:${headerObj[k]}`) |
||||
|
.join("|"); |
||||
|
|
||||
|
return `${url}|${sortedHeaders}`; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Fetch with request deduplication. |
||||
|
* |
||||
|
* Multiple concurrent calls to the same URL (with same headers) will |
||||
|
* share a single network request. The response is cloned for each caller. |
||||
|
* |
||||
|
* @param url - The URL to fetch |
||||
|
* @param options - Fetch options (headers, etc.) |
||||
|
* @returns Promise resolving to the fetch Response |
||||
|
*/ |
||||
|
export async function deduplicatedFetch( |
||||
|
url: string, |
||||
|
options?: RequestInit |
||||
|
): Promise<Response> { |
||||
|
const cacheKey = getCacheKey(url, options?.headers); |
||||
|
|
||||
|
// Check if we have a recent cached response
|
||||
|
const cached = responseCache.get(cacheKey); |
||||
|
if (cached && Date.now() - cached.timestamp < CACHE_TTL) { |
||||
|
// Return a synthetic response with the cached data
|
||||
|
return new Response(JSON.stringify(cached.data), { |
||||
|
status: 200, |
||||
|
headers: { "Content-Type": "application/json" }, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Check if there's already an in-flight request for this URL
|
||||
|
const existingRequest = inFlightRequests.get(cacheKey); |
||||
|
if (existingRequest) { |
||||
|
// Wait for the existing request and clone it for this caller
|
||||
|
const response = await existingRequest; |
||||
|
// The response body may have been consumed, so we rely on the cache
|
||||
|
const cachedData = responseCache.get(cacheKey); |
||||
|
if (cachedData) { |
||||
|
return new Response(JSON.stringify(cachedData.data), { |
||||
|
status: response.status, |
||||
|
headers: { "Content-Type": "application/json" }, |
||||
|
}); |
||||
|
} |
||||
|
// Fallback: this shouldn't happen, but return an error response
|
||||
|
return new Response(JSON.stringify({ error: "Cache miss" }), { |
||||
|
status: 500, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Create new request
|
||||
|
const requestPromise = fetch(url, options) |
||||
|
.then(async (response) => { |
||||
|
// Clone and cache the response data before returning
|
||||
|
if (response.ok) { |
||||
|
try { |
||||
|
const data = await response.clone().json(); |
||||
|
responseCache.set(cacheKey, { data, timestamp: Date.now() }); |
||||
|
} catch { |
||||
|
// Response wasn't JSON, that's fine
|
||||
|
} |
||||
|
} |
||||
|
return response; |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
// Clean up in-flight request after a short delay
|
||||
|
// (allows concurrent calls that started just after to still benefit)
|
||||
|
setTimeout(() => { |
||||
|
inFlightRequests.delete(cacheKey); |
||||
|
}, 50); |
||||
|
}); |
||||
|
|
||||
|
// Store the in-flight request
|
||||
|
inFlightRequests.set(cacheKey, requestPromise); |
||||
|
|
||||
|
return requestPromise; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Clear all cached responses. |
||||
|
* Useful for testing or when settings change. |
||||
|
*/ |
||||
|
export function clearFetchCache(): void { |
||||
|
responseCache.clear(); |
||||
|
inFlightRequests.clear(); |
||||
|
} |
||||
Loading…
Reference in new issue