React 二重送信に強いAPIを作る③ 同じ操作をReactから再送する

export type InquiryBody = Readonly<{ subject: string; message: string }>;
export type PendingInquiry = Readonly<{ key: string; body: InquiryBody }>;
export type ReceiptResult = { receiptId: string; receivedAt: string };

export function createPending(body: InquiryBody): PendingInquiry {
  return Object.freeze({ key: crypto.randomUUID(), body: Object.freeze({ ...body }) });
}

export async function sendInquiry(pending: PendingInquiry): Promise<ReceiptResult> {
  const csrf = await fetch('/api/inquiries/csrf', {
    credentials: 'same-origin', cache: 'no-store',
  });
  if (!csrf.ok) throw new Error('認証と通信状態を確認してください。');
  const { token }: { token: string } = await csrf.json();
  const response = await fetch('/api/inquiries', {
    method: 'POST', credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json', 'X-CSRF-TOKEN': token,
      'Idempotency-Key': pending.key,
    },
    body: JSON.stringify(pending.body),
  });
  if (response.status === 409)
    throw new Error('操作キーと内容が一致しません。新しいキーで送り直さず、受付状況を確認してください。');
  if (response.status === 401)
    throw new Error('ログイン状態を確認してください。');
  if (!response.ok)
    throw new Error('受付結果を確認できませんでした。入力や通信状態を確認してください。');
  const result: unknown = await response.json();
  if (!result || typeof result !== 'object' ||
      !('receiptId' in result) || typeof result.receiptId !== 'string' ||
      !('receivedAt' in result) || typeof result.receivedAt !== 'string')
    throw new Error('受付結果を読み取れませんでした。');
  return { receiptId: result.receiptId, receivedAt: result.receivedAt };
}

import { useRef, useState, type FormEvent } from 'react';
import { createPending, sendInquiry, type PendingInquiry, type ReceiptResult } from './inquiryApi';

export function InquiryForm() {
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [pending, setPending] = useState<PendingInquiry | null>(null);
  const [result, setResult] = useState<ReceiptResult | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const running = useRef(false);
  const operation = useRef<PendingInquiry | null>(null);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (running.current || result) return;
    running.current = true;
    setBusy(true); setError('');
    try {
      if (!operation.current) {
        const body = {
          subject: subject.trim(),
          message: message.replace(/\r\n?/g, '\n').trim(),
        };
        if (!body.subject || body.subject.length > 100 ||
            !body.message || body.message.length > 2000)
          throw new Error('件名は1〜100文字、本文は1〜2000文字で入力してください。');
        operation.current = createPending(body);
        setPending(operation.current);
      }
      setResult(await sendInquiry(operation.current));
    } catch (e) {
      setError(e instanceof Error ? e.message : '結果を確認できませんでした。');
    } finally {
      running.current = false; setBusy(false);
    }
  }
  return <section>
    <form onSubmit={submit}>
      <fieldset disabled={busy || pending !== null || result !== null}>
        <legend>問い合わせ内容</legend>
        <label>件名<input value={subject} maxLength={100}
          onChange={e => setSubject(e.target.value)} /></label>
        <label>本文<textarea value={message} maxLength={2000}
          onChange={e => setMessage(e.target.value)} /></label>
      </fieldset>
      {!result && <button type="submit" disabled={busy}>
        {busy ? '確認中…' : pending ? '同じ内容で受付結果を確認する' : '送信する'}
      </button>}
    </form>
    <p role="status">{error}</p>
    {pending && !result && <p>送信内容を保持しています。この画面を閉じる前に受付結果を確認してください。</p>}
    {result && <>
      <p role="status">受け付けました。受付番号：{result.receiptId}</p>
      <button type="button" onClick={() => {
        operation.current = null; setPending(null); setResult(null);
        setSubject(''); setMessage(''); setError('');
      }}>別の問い合わせを作成する</button>
    </>}
  </section>;
}

<InquiryForm key={currentUser.id} />