Ein neues Projekt erstellen (Mutation)

Kapitel 76 zeigte useMutation bereits FÜR den Login – dieses Kapitel zeigt das ZWEITE, ebenso WICHTIGE Muster: eine Mutation, die den CACHE einer BESTEHENDEN Query AKTUALISIERT.

Den Create-Hook schreiben

src/hooks/useCreateProject.ts

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

interface CreateProjectInput {
  name: string;
  description?: string;
}

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

  return useMutation({
    mutationFn: async (input: CreateProjectInput) => {
      const response = await apiClient.post<Project>('/projects', input);

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

invalidateQueries({ queryKey: ['projects'] }) ist der ENTSCHEIDENDE Schritt: NACH erfolgreichem Erstellen markiert TanStack Query den Cache-Eintrag aus Kapitel 75 als VERALTET, was einen AUTOMATISCHEN Neu-Abruf auslöst – die Liste zeigt das NEUE Projekt, OHNE dass ProjectListPage IRGENDETWAS davon wissen muss.

Das Formular bauen

src/components/CreateProjectForm.tsx

import { useState, type FormEvent } from 'react';
import { useCreateProject } from '../hooks/useCreateProject';

function CreateProjectForm() {
  const [name, setName] = useState('');
  const createProject = useCreateProject();

  function handleSubmit(event: FormEvent) {
    event.preventDefault();
    createProject.mutate(
      { name },
      { onSuccess: () => setName('') },
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Projektname"
      />
      <button type="submit" disabled={createProject.isPending}>
        {createProject.isPending ? 'Wird erstellt...' : 'Projekt erstellen'}
      </button>
    </form>
  );
}

export default CreateProjectForm;

mutate(input, { onSuccess }) akzeptiert einen ZWEITEN, AUFRUF-SPEZIFISCHEN Callback ZUSÄTZLICH zum onSuccess im Hook SELBST (Kapitel-weit) – BEIDE werden AUSGEFÜHRT, der Hook-Callback ZUERST.

owner wird automatisch gesetzt

KEIN owner-Feld im Formular – GENAU wie in Kapitel 54 geplant, übernimmt ProjectOwnerProcessor das AUTOMATISCH auf Server-Seite, das Frontend muss sich UM diese Logik NICHT kümmern.

Tipp: invalidateQueries ist die EINFACHSTE, aber NICHT immer EFFIZIENTESTE Strategie – TanStack Query bietet AUCH "optimistic updates" (den Cache SOFORT, VOR der Server-Antwort, aktualisieren), was FÜR UNSER Projekt NICHT nötig ist, aber bei SEHR interaktiven UIs den gefühlten Performance-Unterschied ausmacht.