Eleganter Umgang mit Server-State, Caching und Synchronisation.
TanStack Query übernimmt im Frontend die undankbare Arbeit rund um Server-Daten, also das Laden, Zwischenspeichern und Aktualisieren. Vieles davon schreibt man sonst immer wieder von Hand, fehleranfällig und mühsam, von Lade- und Fehlerzuständen bis zum erneuten Holen veralteter Daten. TanStack Query bündelt all das hinter einem klaren Hook und hält den Cache automatisch frisch. So bleiben die Daten in der Oberfläche verlässlich aktuell, während du dich auf das Wesentliche konzentrierst.
Mehr in der DokumentationSobald eine Oberfläche Daten von einer API zieht, setzen wir auf TanStack Query, statt Lade- und Fehlerlogik immer neu zu schreiben. Der Cache sorgt dafür, dass deine Nutzer keine Ladebalken sehen, wo Daten schon vorliegen. Und beim Schreiben hält die automatische Invalidierung die Ansicht ohne manuelles Zutun aktuell.
import { useQuery } from "@tanstack/react-query";
const { data, isLoading } = useQuery({
queryKey: ["users"],
queryFn: () => fetch("/api/users").then((r) => r.json()),
});Gut zu wissen
Saubere, strukturierte Query-Keys sind der Schlüssel zum gezielten Invalidieren. Wir bauen sie als Tupel auf, etwa nach Ressource und Parametern, damit ein Update nur die wirklich betroffenen Daten neu lädt.
Weitere Werkzeuge, mit denen wir im selben Bereich arbeiten.
React
Unser bevorzugtes UI-Framework für interaktive, komponentenbasierte Oberflächen.
Next.js
Das React-Meta-Framework für SSR, Routing und beste Performance.
Angular
Strukturiertes Framework für große, langlebige Enterprise-Anwendungen.
Vue
Schlankes, zugängliches Framework für schnelle, reaktive UIs.
Svelte & SvelteKit
Kompiliertes Framework für besonders schlanke, schnelle Oberflächen.
Astro
Content-fokussierte Seiten mit minimalem JavaScript und Top-Performance.
Das musst du nicht entscheiden, das ist unser Job. Erzähl uns einfach von deinem Vorhaben.