【実装】TanStack QueryでuseEffect/useStateパターンを撲滅する

// 典型的なuseEffect/useStateパターン（問題だらけ）
function useChat() {
  const [messages, setMessages] = useState([]);
  const [isSessionLoading, setIsSessionLoading] = useState(true);

  useEffect(() => {
    if (!userId) return;
    let cancelled = false;  // 手動キャンセルフラグ

    async function loadSession() {
      setIsSessionLoading(true);
      try {
        const character = await getCharacterBySlug(slug);
        if (!character || cancelled) return;
        const session = await getOrCreateTodaySession(userId, character.id);
        if (cancelled) return;
        setMessages(session.messages);
      } catch (error) {
        console.error(error);  // エラーハンドリング手動
      } finally {
        if (!cancelled) setIsSessionLoading(false);
      }
    }

    loadSession();
    return () => { cancelled = true; };  // クリーンアップ手動
  }, [userId, slug]);
}

// queryFnにロジックを切り出し
async function fetchTodaySession(userId: string, slug: string) {
  const character =
    (await getCharacterBySlug(slug)) ??
    (await getCharacterBySlug(DEFAULT_CHARACTER_SLUG));
  if (!character) return null;

  const session = await getOrCreateTodaySession(userId, character.id);
  return {
    id: session.id,
    lastResponseId: session.lastResponseId,
    messages: session.messages.map((m) => ({
      id: m.id,
      role: m.role,
      content: m.content,
      timestamp: new Date(m.createdAt),
    })),
  };
}

function useChat() {
  const { data: chatSession, isLoading: isSessionLoading } = useQuery({
    queryKey: ["chatSession", userId, selectedSlug],
    queryFn: () => fetchTodaySession(userId!, selectedSlug),
    enabled: !!userId,       // userIdがないときはフェッチしない
    staleTime: Infinity,     // 手動でinvalidateするまでキャッシュ有効
  });

  // queryのdataが変わったらローカルstateに同期
  useEffect(() => {
    if (!chatSession) return;
    sessionIdRef.current = chatSession.id;
    setMessages(chatSession.messages);
  }, [chatSession]);
}

// キャラ一覧取得もenabledで制御
const { data: characters = FALLBACK } = useQuery({
  queryKey: ["characters", session?.user?.id],
  queryFn: () => getCharacters(session?.user?.id),
  staleTime: 5 * 60 * 1000,  // 5分キャッシュ
  enabled: !!session?.user?.id,
});