同じ通信が同時に何本も飛ぶのを1本に束ねる — 参照カウント付きシングルフライト層の設計

export function buildKey(
  method: "GET" | "HEAD",
  path: string,
  query: Record<string, string | number | undefined> = {},
  subject = "anon",
): string {
  const pairs = Object.entries(query)
    .filter(([, v]) => v !== undefined && v !== "")
    .map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`)
    .sort(); // 並び順の揺れをここで吸収する
  const qs = pairs.length ? `?${pairs.join("&")}` : "";
  return `${subject}|${method} ${path}${qs}`;
}

// entry が controller を持つ形は次節で作ります
export function resetInflight(reason: string) {
  for (const [key, entry] of inflight) {
    entry.controller.abort(); // 待っている側には AbortError が届く
    inflight.delete(key);
  }
  if (__DEV__) console.log(`[coalesce] reset: ${reason}`);
}

const inflight = new Map<string, Promise<unknown>>();
 
function coalesce<T>(key: string, run: () => Promise<T>): Promise<T> {
  const existing = inflight.get(key);
  if (existing) return existing as Promise<T>;
 
  const promise = run().finally(() => {
    // 成功・失敗どちらでも必ず消す。
    // ここを忘れると、失敗が確定した Promise が次回以降にも配られ続ける
    inflight.delete(key);
  });
  inflight.set(key, promise as Promise<unknown>);
  return promise;
}

type Entry<T> = {
  promise: Promise<T>;
  controller: AbortController;
  refs: number;
};
 
const inflight = new Map<string, Entry<unknown>>();
 
export function coalesce<T>(
  key: string,
  run: (signal: AbortSignal) => Promise<T>,
): { promise: Promise<T>; release: () => void } {
  let entry = inflight.get(key) as Entry<T> | undefined;
 
  if (!entry) {
    const controller = new AbortController();
    const promise = run(controller.signal).finally(() => {
      inflight.delete(key); // 罠その一の対策。settle で必ず消す
    });
    entry = { promise, controller, refs: 0 };
    inflight.set(key, entry as Entry<unknown>);
  }
 
  entry.refs += 1;
 
  const release = () => {
    entry!.refs -= 1;
    // 待っている人が誰もいなくなって、かつ自分がまだ現行エントリのときだけ中断する
    if (entry!.refs <= 0 && inflight.get(key) === entry) {
      entry!.controller.abort();
      inflight.delete(key);
    }
  };
 
  return { promise: entry.promise, release };
}

import { useEffect, useRef, useState } from "react";
import { coalesce } from "./request-coalescer";
 
type State<T> =
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: unknown };
 
export function useCoalescedQuery<T>(
  key: string | null,
  fetcher: (signal: AbortSignal) => Promise<T>,
): State<T> {
  const [state, setState] = useState<State<T>>({ status: "loading" });
  const fetcherRef = useRef(fetcher);
  fetcherRef.current = fetcher; // 毎レンダーの最新を参照する
 
  useEffect(() => {
    if (key === null) return;
    let alive = true;
    setState({ status: "loading" });
 
    const { promise, release } = coalesce(key, (signal) =>
      fetcherRef.current(signal),
    );
 
    promise.then(
      (data) => {
        if (alive) setState({ status: "success", data: data as T });
      },
      (error) => {
        // 自分の release で中断したぶんは無視する
        if (alive && (error as { name?: string }).name !== "AbortError") {
          setState({ status: "error", error });
        }
      },
    );
 
    return () => {
      alive = false;
      release();
    };
  }, [key]);
 
  return state;
}

async function fetchEntitlements(signal: AbortSignal) {
  const res = await fetch(`${API}/me/entitlements`, {
    headers: { Authorization: `Bearer ${await getToken()}` },
    signal,
  });
  if (!res.ok) throw new Error(`entitlements ${res.status}`);
  return (await res.json()) as Entitlements;
}

// これはやってはいけない
coalesce("POST /posts", (signal) => createPost(draft, signal));

function refreshAccessToken() {
  const { promise } = coalesce("auth:refresh", async (signal) => {
    const res = await fetch(`${API}/auth/refresh`, {
      method: "POST",
      body: JSON.stringify({ refresh: getRefreshToken() }),
      signal,
    });
    if (!res.ok) throw new Error(`refresh ${res.status}`);
    return (await res.json()) as { access: string };
  });
  // 更新は途中で中断させたくないので release は呼ばない。
  // settle 時の finally が後始末をするので、エントリは残らない
  return promise;
}

const stats = { calls: 0, runs: 0 };
 
export function coalesceStats() {
  const { calls, runs } = stats;
  return { calls, runs, foldRate: calls ? 1 - runs / calls : 0 };
}

it("同じキーの同時呼び出しは1本に束ねられる", async () => {
  let runs = 0;
  const run = () =>
    new Promise<number>((resolve) => {
      runs += 1;
      setTimeout(() => resolve(runs), 10);
    });
 
  const a = coalesce("GET /x", run);
  const b = coalesce("GET /x", run);
  const c = coalesce("GET /x", run);
 
  await Promise.all([a.promise, b.promise, c.promise]);
  expect(runs).toBe(1);
 
  // settle 後は新しい 1 本が走る（罠その一の回帰テスト）
  const d = coalesce("GET /x", run);
  await d.promise;
  expect(runs).toBe(2);
});