Der HÄUFIGSTE Interaktion in JEDEM Task-Manager: EIN Klick, um done umzuschalten – EIN GUTES Beispiel für eine Mutation OHNE eigenes Formular.

Den Toggle-Hook

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

interface ToggleTaskInput {
  taskId: number;
  done: boolean;
  projectId: number;
}

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

  return useMutation({
    mutationFn: async ({ taskId, done }: ToggleTaskInput) => {
      const response = await apiClient.patch<Task>(
        `/tasks/${taskId}`,
        { done },
        { headers: { 'Content-Type': 'application/merge-patch+json' } },
      );

      return response.data;
    },
    onSuccess: (_data, variables) => {
      queryClient.invalidateQueries({
        queryKey: ['projects', variables.projectId, 'tasks'],
      });
    },
  });
}

Das Checkbox-Element

function TaskItem({ task, projectId }: { task: Task; projectId: number }) {
  const toggleDone = useToggleTaskDone();

  return (
    <li>
      <input
        type="checkbox"
        checked={task.done}
        disabled={toggleDone.isPending}
        onChange={(e) =>
          toggleDone.mutate({
            taskId: task.id,
            done: e.target.checked,
            projectId,
          })
        }
      />
      {task.title}
    </li>
  );
}

checked={task.done} macht die Checkbox zu einer KONTROLLIERTEN React-Komponente – der ANGEZEIGTE Zustand kommt IMMER aus dem TanStack-Query-Cache, NIEMALS aus einem lokalen useState.

Warum kein optimistic update hier (noch)

EIN sofortiges visuelles Feedback (BEVOR die Server-Antwort eintrifft) wäre GERADE bei DIESER Interaktion WÜNSCHENSWERT – Kapitel 91 rüstet DIESEN Hook GEZIELT mit "optimistic updates" NACH, NACHDEM das GRUNDPRINZIP hier OHNE die zusätzliche Komplexität etabliert wurde.