Prepare v0.1.0 release dependencies

webui/src/api/client.ts

@@ -3,6 +3,17 @@ import type { ApiSettings } from "../types";
 const STORAGE_KEY = "multimailer.apiSettings";
 const SESSION_STORAGE_KEY = "multimailer.session";
 const CSRF_COOKIE_NAME = import.meta.env.VITE_CSRF_COOKIE_NAME ?? "msm_csrf";
+const RECENT_SAFE_REQUEST_TTL_MS = 750;
+const MAX_RECENT_SAFE_REQUESTS = 100;
+
+type RecentSafeRequest = {
+  value: unknown;
+  expiresAt: number;
+};
+
+const inFlightSafeRequests = new Map<string, Promise<unknown>>();
+const recentSafeRequests = new Map<string, RecentSafeRequest>();
+let safeRequestGeneration = 0;
 
 export class ApiError extends Error {
   readonly status: number;
@@ -91,6 +102,63 @@ function isUnsafeMethod(method?: string): boolean {
   return !["GET", "HEAD", "OPTIONS", "TRACE"].includes(normalized);
 }
 
+function canReuseSafeRequest(method: string, init?: RequestInit): boolean {
+  return (method === "GET" || method === "HEAD")
+    && !init?.body
+    && !init?.signal
+    && init?.cache !== "no-store"
+    && init?.cache !== "reload";
+}
+
+function requestHeadersKey(headers: Headers): string {
+  return [...headers.entries()]
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([key, value]) => `${key}:${value}`)
+    .join("\n");
+}
+
+function safeRequestKey(url: string, method: string, headers: Headers, init?: RequestInit): string {
+  return [
+    method,
+    url,
+    init?.credentials ?? "include",
+    init?.mode ?? "",
+    init?.redirect ?? "",
+    requestHeadersKey(headers),
+  ].join("\n\n");
+}
+
+function pruneRecentSafeRequests(now = Date.now()): void {
+  for (const [key, entry] of recentSafeRequests) {
+    if (entry.expiresAt <= now) {
+      recentSafeRequests.delete(key);
+    }
+  }
+
+  while (recentSafeRequests.size > MAX_RECENT_SAFE_REQUESTS) {
+    const oldestKey = recentSafeRequests.keys().next().value;
+    if (!oldestKey) break;
+    recentSafeRequests.delete(oldestKey);
+  }
+}
+
+function recentSafeResponse(key: string): unknown | undefined {
+  const now = Date.now();
+  const recent = recentSafeRequests.get(key);
+  if (!recent) return undefined;
+  if (recent.expiresAt <= now) {
+    recentSafeRequests.delete(key);
+    return undefined;
+  }
+  return recent.value;
+}
+
+function rememberSafeResponse(key: string, value: unknown): void {
+  const now = Date.now();
+  recentSafeRequests.set(key, { value, expiresAt: now + RECENT_SAFE_REQUEST_TTL_MS });
+  pruneRecentSafeRequests(now);
+}
+
 export function authHeaders(settings: ApiSettings): Headers {
   const headers = new Headers();
   if (settings.accessToken) {
@@ -103,6 +171,7 @@ export function authHeaders(settings: ApiSettings): Headers {
 
 export async function apiFetch<T>(settings: ApiSettings, path: string, init?: RequestInit): Promise<T> {
   const headers = new Headers(init?.headers || {});
+  const method = (init?.method || "GET").toUpperCase();
 
   if (!(init?.body instanceof FormData) && !headers.has("Content-Type")) {
     headers.set("Content-Type", "application/json");
@@ -113,27 +182,69 @@ export async function apiFetch<T>(settings: ApiSettings, path: string, init?: Re
   }
 
   const csrf = csrfToken();
-  if (csrf && isUnsafeMethod(init?.method) && !headers.has("X-CSRF-Token")) {
+  if (csrf && isUnsafeMethod(method) && !headers.has("X-CSRF-Token")) {
     headers.set("X-CSRF-Token", csrf);
   }
 
-  const response = await fetch(apiUrl(settings, path), { ...init, headers, credentials: init?.credentials ?? "include" });
-
-  if (!response.ok) {
-    const text = await response.text();
-    throw new ApiError(response.status, response.statusText, text);
+  if (isUnsafeMethod(method)) {
+    safeRequestGeneration += 1;
+    inFlightSafeRequests.clear();
+    recentSafeRequests.clear();
   }
 
-  if (response.status === 204) {
-    return undefined as T;
+  const url = apiUrl(settings, path);
+  const fetchInit = { ...init, headers, credentials: init?.credentials ?? "include" };
+
+  async function runFetch(): Promise<T> {
+    const response = await fetch(url, fetchInit);
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new ApiError(response.status, response.statusText, text);
+    }
+
+    if (response.status === 204) {
+      return undefined as T;
+    }
+
+    const contentType = response.headers.get("content-type") || "";
+    if (!contentType.includes("application/json")) {
+      return (await response.text()) as T;
+    }
+
+    return (await response.json()) as T;
   }
 
-  const contentType = response.headers.get("content-type") || "";
-  if (!contentType.includes("application/json")) {
-    return (await response.text()) as T;
+  if (!canReuseSafeRequest(method, init)) {
+    return runFetch();
   }
 
-  return (await response.json()) as T;
+  const cacheKey = safeRequestKey(url, method, headers, init);
+  const requestGeneration = safeRequestGeneration;
+  const recent = recentSafeResponse(cacheKey);
+  if (recent !== undefined) {
+    return recent as T;
+  }
+
+  const existing = inFlightSafeRequests.get(cacheKey);
+  if (existing) {
+    return existing as Promise<T>;
+  }
+
+  const request = runFetch()
+    .then((value) => {
+      if (requestGeneration === safeRequestGeneration) {
+        rememberSafeResponse(cacheKey, value);
+      }
+      return value;
+    })
+    .finally(() => {
+      if (inFlightSafeRequests.get(cacheKey) === request) {
+        inFlightSafeRequests.delete(cacheKey);
+      }
+    });
+  inFlightSafeRequests.set(cacheKey, request);
+  return request;
 }