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

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;
}