Frontend Academy · Lektion

SWR und React Query für Daten-Caching

Lektion 4 von 414 Schritte

SWR und React Query für Daten-Caching ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Serverzustand ist etwas anderes

Netzwerkdaten sind nicht einfach gewöhnlicher Zustand. Sie benötigen Caching, Deduplizierung, Aktualisierung im Hintergrund, Lade- und Fehlerstatus sowie Wiederholungslogik. Manuelle Fetch-Muster mit useEffect und useState implementieren diese Funktionen nur unzureichend neu.

SWR vs. TanStack Query

SWR (Vercel): klein, einfach und ausschließlich auf Hooks ausgerichtet. TanStack Query (früher React Query): umfangreicher und funktionsreicher (Mutations, unendliche Abfragen, Prefetching, Devtools). Beide sind hervorragend.

SWR – grundlegende Verwendung

useSWR(key, fetcher) gibt Daten, Fehler und Ladezustand zurück. Die Daten werden nach dem Schlüssel gecacht und über Komponenten hinweg dedupliziert.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR – Verhalten bei der Revalidierung

Standardmäßig revalidiert SWR beim Fokussieren (wenn das Tab wieder den Fokus erhält) und nach einer erneuten Verbindung. Der gecachte Wert („stale“) wird sofort zurückgegeben und im Hintergrund aktualisiert („while-revalidate“).

SWR – Mutation

mutate(key) revalidiert eine gecachte Abfrage. Übergeben Sie neue Daten als zweites Argument, um sie optimistisch zu aktualisieren.

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query – Einrichtung

Umschließen Sie Ihre App mit einem QueryClientProvider, der einen konfigurierten QueryClient verwendet.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn }) ruft Daten ab und cached sie.

import { useQuery } from '@tanstack/react-query';

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

useMutation für Schreibzugriffe

useMutation verarbeitet POST/PUT/DELETE mit integriertem Status für ausstehende und fehlgeschlagene Vorgänge sowie einem onSuccess-Hook zum Ungültigmachen von Caches.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

Abfragen ungültig machen

Machen Sie nach einer Mutation zugehörige Abfragen ungültig, um einen erneuten Abruf auszulösen. queryClient.invalidateQueries({ queryKey: ['users'] }) markiert sie als veraltet und ruft sie erneut ab, wenn sie eingebunden sind.

Optimistische Aktualisierungen

TanStack Query bietet erstklassige Unterstützung für optimistische Aktualisierungen mit onMutate, onError und onSettled.

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

Unendliche Abfragen

useInfiniteQuery verarbeitet paginierte Listen und Listen mit Infinite Scroll, stellt fetchNextPage bereit und verfolgt alle geladenen Seiten.

React Query Devtools

Fügen Sie @tanstack/react-query-devtools hinzu, um ein schwebendes Panel anzuzeigen, das alle gecachten Abfragen und deren Zustand zeigt und manuelles Ungültigmachen ermöglicht.

Kurzer Wissenstest

Was ist der wichtigste Vorteil von SWR oder TanStack Query gegenüber manuellem useEffect plus fetch?

Beantworte es in der interaktiven Lektion

Zusammenfassung: SWR und React Query

Serverzustand benötigt Caching, Deduplizierung und Revalidierung. SWR ist klein und einfach. TanStack Query bietet mehr Funktionen (Mutations, unendliche Abfragen, Devtools). Verwenden Sie useQuery für Lesezugriffe und useMutation für Schreibzugriffe. Rufen Sie nach Mutations invalidateQueries auf. Optimistische Aktualisierungen erfolgen mit onMutate/onError. Beide machen manuelles useEffect plus fetch in Produktions-Apps überflüssig.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „SWR und React Query für Daten-Caching“ kostenlos?

Ja — der vollständige Text von „SWR und React Query für Daten-Caching“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „SWR und React Query für Daten-Caching“?

Verwenden Sie SWR oder TanStack Query, um Serverdaten abzurufen, zwischenzuspeichern, doppelte Anfragen zu vermeiden und erneut zu validieren, statt Abrufmuster mit manuellen useEffect-Aufrufen zu ve… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „SWR und React Query für Daten-Caching“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy