Löschen ist UNWIDERRUFLICH (Kapitel 44: cascade: ['remove'] löscht AUCH alle Tasks MIT) – ein Bestätigungsdialog ist HIER BESONDERS wichtig.

Den Delete-Hook schreiben

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../api/client';

export function useDeleteProject() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (id: number) => {
      await apiClient.delete(`/projects/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

GENAU wie Kapitel 10 zeigte: DELETE liefert 204 No Content, KEIN Response-Body – mutationFn gibt entsprechend NICHTS zurück (Promise<void>).

Ein Bestätigungsdialog

function DeleteProjectButton({ projectId }: { projectId: number }) {
  const deleteProject = useDeleteProject();

  function handleClick() {
    const confirmed = window.confirm(
      'Dieses Projekt WIRKLICH löschen? Alle zugehörigen Tasks werden ebenfalls gelöscht.',
    );

    if (confirmed) {
      deleteProject.mutate(projectId);
    }
  }

  return (
    <button onClick={handleClick} disabled={deleteProject.isPending}>
      Löschen
    </button>
  );
}

403 korrekt behandeln

Der Voter aus Kapitel 52-53 kann eine LÖSCHUNG mit 403 ABLEHNEN (z. B. wenn NICHT der Owner löscht) – der GLOBALE 401-Interceptor aus Kapitel 77 greift HIER NICHT (403 ist KEIN Authentifizierungsfehler), isError des Hooks reicht aber AUS, um eine passende Meldung anzuzeigen.