Kapitel 41 zeigte ZWEI Wege, eine Task zu erstellen: die FLACHE /api/tasks-Resource MIT explizitem project-IRI-Feld, oder den verschachtelten Endpunkt. Das Frontend nutzt HIER den ERSTEN Weg, da die IRI-Konstruktion EXPLIZIT und NACHVOLLZIEHBAR bleibt.

Den Create-Task-Hook

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

interface CreateTaskInput {
  title: string;
  projectId: number;
}

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

  return useMutation({
    mutationFn: async ({ title, projectId }: CreateTaskInput) => {
      const response = await apiClient.post<Task>('/tasks', {
        title,
        project: `/projects/${projectId}`,
      });

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

project: \`/projects/${projectId}\` baut die IRI MANUELL aus der numerischen id zusammen – GENAU das Format, das Kapitel 37 als ERFORDERLICH für Beziehungs-Felder ETABLIERTE.

Das Formular auf der Detailseite

function CreateTaskForm({ projectId }: { projectId: number }) {
  const [title, setTitle] = useState('');
  const createTask = useCreateTask();

  function handleSubmit(event: FormEvent) {
    event.preventDefault();
    createTask.mutate(
      { title, projectId },
      { onSuccess: () => setTitle('') },
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button type="submit">Task hinzufügen</button>
    </form>
  );
}

GENAU dasselbe Zwei-Callback-Muster wie Kapitel 78 (onSuccess im Hook FÜR den Cache, onSuccess beim Aufruf FÜR das Formular selbst) – EIN wiederkehrendes, KONSISTENTES Muster über ALLE Create-Formulare dieser Schulung hinweg.