useSWR-Hook: Abrufen, Laden und Fehlerzustände

useSWR(key, fetcher, options) ist der primäre Hook. key ist der Cache-Key (normalerweise eine URL-Zeichenfolge), fetcher ist die asynchrone Funktion, die Daten zurückgibt, und options ist ein optionales Konfigurationsobjekt.

Der Hook gibt ein Objekt mit data, error, isLoading, isValidating und der mutate-Funktion zurück.

Der key kann eine URL-Zeichenfolge, ein Array aus [url, params] oder null sein. String-Keys entsprechen einfachen GET-Anfragen. Array-Keys ermöglichen es, Variablen wie userId oder Filter in die Cache-Identität aufzunehmen.

Wenn Sie null übergeben, wird die Anfrage vollständig deaktiviert. Das ist nützlich für bedingtes Abrufen, wenn benötigte Daten noch nicht verfügbar sind.

Der fetcher erhält den key (oder die Elemente eines Array-Keys als einzelne Argumente) und muss ein Promise zurückgeben. Der aufgelöste Wert wird zu data. Wenn der fetcher einen Fehler auslöst, wird die error-Eigenschaft gesetzt.

Beispiel: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data ist beim erstmaligen Laden undefined und entspricht nach erfolgreichem Abruf dem vom fetcher aufgelösten Wert. error ist undefined, sofern der fetcher keinen Fehler ausgelöst hat. Andernfalls enthält error das ausgelöste Fehlerobjekt.

Prüfen Sie if (error), um eine Fehlermeldung zu rendern, und if (!data), um ein Lade-Skeleton zu rendern und klare Fallback-UIs bereitzustellen.

isLoading ist nur dann true, wenn keine zwischengespeicherten Daten vorhanden sind und eine Anfrage läuft: beim erstmaligen Laden dieses Keys. isValidating ist immer dann true, wenn eine Anfrage läuft, einschließlich Revalidierungen im Hintergrund, wenn bereits zwischengespeicherte Daten vorhanden sind.

Verwenden Sie isLoading für Skeleton-Bildschirme und isValidating für einen unaufdringlichen Spinner, der eine Aktualisierung im Hintergrund anzeigt.

Mit SWRConfig können Sie einen Standard-Fetcher, dedupingInterval, refreshInterval, einen onError-Handler und weitere Optionen für alle useSWR-Aufrufe innerhalb seines Unterbaums festlegen. Dadurch wird die Konfiguration zentralisiert, anstatt die Optionen in jedem Hook zu wiederholen.

Verschachteln Sie mehrere SWRConfig-Provider, um für verschiedene Bereiche Ihrer App unterschiedliche Standardwerte festzulegen.

Übergeben Sie null als Key, um die Anfrage zu überspringen: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR ruft keine Daten ab, bis der Key einen Wert ungleich null annimmt.

Das ist sauberer als die skip-Option in React Query. Der Wechsel des Keys von null zu einer Zeichenfolge löst automatisch den ersten Abruf aus.

Verketten Sie SWR-Hooks für voneinander abhängige Anfragen: const { data: user } = useSWR('/api/me', fetcher) und anschließend const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). Der zweite Hook wartet, bis der erste abgeschlossen ist.

Dieses Muster vermeidet useEffect-Ketten und hält Datenabhängigkeiten deklarativ und übersichtlich.

Wenn eine Header-Komponente und eine Sidebar-Komponente beide useSWR('/api/user', fetcher) aufrufen, sendet SWR nur eine Anfrage und teilt das Ergebnis. Beide Komponenten werden gemeinsam neu gerendert, wenn data oder error aktualisiert wird.

Diese Deduplizierung erfolgt innerhalb des dedupingInterval-Fensters (Standardwert: 2000 ms) automatisch und ohne zusätzliche Konfiguration.

refreshInterval: 5000 ruft alle 5 Sekunden neue Daten ab. refreshWhenHidden: false beendet das Polling, wenn der Tab nicht sichtbar ist. shouldRetryOnError: false deaktiviert automatische Wiederholungen. revalidateOnFocus: false deaktiviert die durch den Fokus ausgelöste Revalidierung.

Kombinieren Sie die Optionen passend zu Ihren Anforderungen an die Datenaktualität: Dashboards verwenden häufig refreshInterval, während statische Inhalte revalidateOnFocus: false setzen.

Bei paginierten Daten nehmen Sie die Seitennummer in den Key auf: useSWR(['/api/items', page], fetcher). Beim Wechsel der Seite wird ein neuer Abruf für diese Seite ausgelöst, während vorherige Seiten im Cache bleiben.

SWR stellt außerdem useSWRInfinite für cursorbasierte Muster oder Infinite Scrolling bereit. Eine getKey-Funktion erstellt dabei Keys anhand des Seitenindex und der Daten der vorherigen Seite.

Was geschieht, wenn Sie null als Key an useSWR übergeben?

useSWR(key, fetcher) gibt data, error, isLoading und isValidating zurück. Null-Keys deaktivieren das Abrufen für bedingte und abhängige Anfragen. isLoading zeigt den ersten Ladevorgang an, isValidating jede laufende Anfrage. SWRConfig zentralisiert Standardwerte, und die Anfragededuplizierung über mehrere Komponenten hinweg erfolgt automatisch.

Optionen wie refreshInterval, revalidateOnFocus und shouldRetryOnError ermöglichen es, das Verhalten hinsichtlich der Datenaktualität pro Hook oder global fein abzustimmen.