React 入力フォームを作る④ API接続とエラー表示

{
  "status": 400,
  "title": "入力内容を確認してください。",
  "code": "validation_failed",
  "errors": {
    "displayName": ["表示名は1〜40文字で入力してください。"],
    "weeklyGoal": ["目標は半角数字の1〜7、または空欄にしてください。"]
  }
}

import { SaveError, type FieldErrors, type Profile, type SaveInput } from './profileTypes';
const url = '/api/me/profile';

export function readFieldErrors(value: unknown): FieldErrors {
  const result: FieldErrors = {};
  if (!value || typeof value !== 'object') return result;
  const errors = (value as { errors?: unknown }).errors;
  if (!errors || typeof errors !== 'object') return result;
  for (const key of ['displayName', 'bio', 'weeklyGoal'] as const) {
    const messages = (errors as Record<string, unknown>)[key];
    if (Array.isArray(messages) && messages.every(m => typeof m === 'string'))
      result[key] = messages;
  }
  return result;
}

export async function getProfile(signal?: AbortSignal): Promise<Profile> {
  const response = await fetch(url, { credentials: 'same-origin', cache: 'no-store', signal });
  if (!response.ok) throw new Error('プロフィールを取得できませんでした。');
  return response.json() as Promise<Profile>;
}

export async function saveProfile(input: SaveInput): Promise<Profile> {
  try {
    const csrf = await fetch(`${url}/csrf`, { credentials: 'same-origin', cache: 'no-store' });
    if (csrf.status === 401) throw new SaveError('session', 'ログインし直してください。');
    if (!csrf.ok) throw new SaveError('unknown', '保存の準備に失敗しました。');
    const { token }: { token: string } = await csrf.json();
    const response = await fetch(url, {
      method: 'PUT', credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token },
      body: JSON.stringify(input),
    });
    if (response.status === 400) {
      const body: unknown = await response.json().catch(() => null);
      throw new SaveError('invalid', '入力内容を確認してください。項目に表示がない場合は画面の再取得もお試しください。', readFieldErrors(body));
    }
    if (response.status === 409)
      throw new SaveError('conflict', '別の画面で更新されています。最新の内容と比較してください。');
    if (response.status === 401)
      throw new SaveError('session', 'ログインし直してください。');
    if (!response.ok) throw new SaveError('unknown', '保存結果を確認できませんでした。');
    return await response.json() as Profile;
  } catch (error) {
    if (error instanceof SaveError) throw error;
    throw new SaveError('unknown', '通信が完了しませんでした。再送する前に最新の内容を確認してください。');
  }
}

import { useEffect, useState } from 'react';
import { ProfileForm } from './ProfileForm';
import { getProfile, saveProfile } from './profileApi';
import type { Profile } from './profileTypes';

export function ProfilePage() {
  const [profile, setProfile] = useState<Profile | null>(null);
  const [failed, setFailed] = useState(false);
  const [attempt, setAttempt] = useState(0);
  useEffect(() => {
    const controller = new AbortController();
    let ignore = false;
    setFailed(false);
    getProfile(controller.signal)
      .then(value => { if (!ignore) setProfile(value); })
      .catch(() => { if (!ignore) setFailed(true); });
    return () => { ignore = true; controller.abort(); };
  }, [attempt]);
  if (profile) return <ProfileForm initial={profile} save={saveProfile} loadLatest={getProfile} />;
  if (failed) return <div><p>取得できませんでした。ログイン状態を確認してください。</p>
    <button type="button" onClick={() => setAttempt(n => n + 1)}>再取得する</button></div>;
  return <p>読み込み中…</p>;
}

<ProfilePage key={currentUser.id} />