Projekte laden und anzeigen

MIT QueryClient (Kapitel 73) und apiClient (Kapitel 74) lässt sich JETZT die ERSTE echte Komponente bauen: eine Projektliste.

Den Typ definieren

src/types/project.ts

export interface Project {
  '@id': string;
  id: number;
  name: string;
  description: string | null;
  priority: number;
  isRecent: boolean;
  createdAt: string;
}

export interface ProjectCollection {
  'hydra:member': Project[];
  'hydra:totalItems': number;
}

MANUELL geschrieben, PASSEND zu project:read (Kapitel 23) – Kapitel 80 ERSETZT das SPÄTER durch AUTOMATISCH generierte Typen, für DIESES Kapitel reicht die manuelle Variante, um die STRUKTUR zu verstehen.

Einen Custom Hook schreiben

src/hooks/useProjects.ts

import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { ProjectCollection } from '../types/project';

export function useProjects() {
  return useQuery({
    queryKey: ['projects'],
    queryFn: async () => {
      const response = await apiClient.get<ProjectCollection>('/projects');

      return response.data;
    },
  });
}

queryKey: ['projects'] identifiziert diesen Query EINDEUTIG im Cache – JEDE Komponente, die useProjects() aufruft, TEILT sich DENSELBEN Cache-Eintrag, statt JEWEILS einen EIGENEN Request zu senden.

Die Komponente bauen

src/pages/ProjectListPage.tsx

import { useProjects } from '../hooks/useProjects';

function ProjectListPage() {
  const { data, isPending, isError, error } = useProjects();

  if (isPending) {
    return <p>Lade Projekte...</p>;
  }

  if (isError) {
    return <p>Fehler: {error.message}</p>;
  }

  return (
    <ul>
      {data['hydra:member'].map((project) => (
        <li key={project.id}>
          {project.name} (Priorität: {project.priority})
        </li>
      ))}
    </ul>
  );
}

export default ProjectListPage;

isPending/isError/data/error übernimmt TanStack Query VOLLSTÄNDIG – KEIN eigener useState-Ladezustand nötig, GENAU der Unterschied zu Kapitel 8.

Achtung: key={project.id} nutzt die DATENBANK-id, NICHT die @id-IRI – React-Keys müssen NUR innerhalb der Liste EINDEUTIG sein, die kürzere numerische id ist dafür VÖLLIG ausreichend.

Tipp: OHNE Authentifizierung schlägt dieser Aufruf FEHL (Kapitel 55: nur eingeloggte Nutzer sehen IHRE Projekte) – DIESES Kapitel demonstriert das MUSTER, Kapitel 76-77 ergänzen die noch FEHLENDE Authentifizierung, damit die Liste WIRKLICH Daten zeigt.