The MOST COMMON interaction in ANY task manager: ONE click to toggle done – A GOOD example of a mutation WITHOUT its own form.

The 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'],
      });
    },
  });
}

The 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} makes the checkbox a CONTROLLED React component – the DISPLAYED state ALWAYS comes from the TanStack Query cache, NEVER from a local useState.

Why no optimistic update here (yet)

IMMEDIATE visual feedback (BEFORE the server response arrives) would be DESIRABLE PRECISELY for THIS interaction – chapter 91 RETROFITS THIS hook SPECIFICALLY with "optimistic updates", AFTER the BASIC principle has been established here WITHOUT the added complexity.