TkDodos Blog

Der Maintainer von TanStack Query, TkDodo, hat eine Reihe von Blogbeiträgen über die Verwendung und Arbeit mit der Bibliothek. Einige Artikel zeigen allgemeine Best Practices, aber die meisten haben einen * Meinungs-geprägten* Standpunkt.

#1: Praktisches React Query

Eine fortgeschrittene Einführung in React Query, die praktische Tipps zeigt, die über die Dokumentation hinausgehen. Sie behandelt die Erklärung der Standardwerte (staleTime vs. gcTime), Konzepte wie das Trennen von Server- und Client-Zustand, die Handhabung von Abhängigkeiten und die Erstellung benutzerdefinierter Hooks sowie die Hervorhebung, warum die Option enabled sehr leistungsfähig ist. Weiterlesen...

#2: React Query Daten-Transformationen

Lernen Sie die Möglichkeiten kennen, die recht gängige und wichtige Aufgabe der Transformation Ihrer Daten mit React Query durchzuführen. Von der Transformation in der queryFn bis zur Verwendung der select Option, dieser Artikel beschreibt die Vor- und Nachteile aller verschiedenen Ansätze. Weiterlesen...

#3: React Query Render-Optimierungen

Schauen wir uns an, was Sie tun können, wenn Ihre Komponente bei der Verwendung von React Query zu oft neu rendert. Die Bibliothek ist bereits ziemlich optimiert, aber es gibt immer noch einige optionale Funktionen (wie tracked queries), die Sie verwenden können, um den Übergang von isFetching zu vermeiden. Wir betrachten auch, was structural sharing bedeutet. Weiterlesen...

#4: Status-Checks in React Query

Wir prüfen normalerweise zuerst auf isPending, bevor wir auf isError prüfen, aber manchmal sollte die Prüfung, ob data verfügbar ist, das Erste sein, was wir tun. Dieser Artikel zeigt, wie eine falsche Reihenfolge von Status-Checks die Benutzererfahrung negativ beeinflussen kann. Weiterlesen...

#5: Testen von React Query

Die Dokumentation behandelt bereits recht gut, was Sie für den Einstieg beim Testen von React Query tun müssen. Dieser Artikel zeigt einige zusätzliche Tipps (wie das Deaktivieren von retries oder das Stummschalten der console), die Sie möglicherweise beim Testen benutzerdefinierter Hooks oder von Komponenten, die diese verwenden, befolgen möchten. Er verlinkt auch zu einem Beispiel-Repository mit Tests für Erfolgs- und Fehlerzustände, unterstützt von mock-service-worker. Weiterlesen...

#6: React Query und TypeScript

Da React Query in TypeScript geschrieben ist, hat es eine großartige Unterstützung dafür. Dieser Blogbeitrag erklärt die verschiedenen Generics, wie Sie Typinferenz nutzen können, um zu vermeiden, dass Sie useQuery und ähnliche Funktionen explizit typisieren müssen, was Sie mit unknown Fehlern tun können, wie Typ-Narrowing funktioniert und mehr! Weiterlesen...

#7: Verwendung von WebSockets mit React Query

Eine Schritt-für-Schritt-Anleitung, wie Sie Echtzeitbenachrichtigungen mit React Query zum Laufen bringen, entweder mit ereignisbasierten Abonnements oder durch Übertragung vollständiger Daten direkt an den Client. Anwendbar auf alles, von der nativen WebSocket-API des Browsers über Firebase bis hin zu GraphQL-Abonnements. Weiterlesen...

#8: Effektive React Query Keys

Die meisten Beispiele verwenden nur einen einfachen String oder Array als Query Key, aber wie organisieren Sie Ihre Keys effektiv, wenn Ihre App über eine To-Do-Liste hinauswächst? Dieser Artikel zeigt, wie Co-Location und Query Key Factories das Leben einfacher machen können. Weiterlesen...

#8a: Nutzung des Query Function Context

In dieser Ergänzung zum vorherigen Blogbeitrag sehen wir uns an, wie wir den Query Function Context und Object Query Keys für maximale Sicherheit nutzen können, wenn unsere App wächst. Weiterlesen...

#9: Platzhalter und initiale Daten in React Query

Platzhalter- und Initialdaten sind zwei ähnliche, aber unterschiedliche Konzepte, um synchron Daten anstelle eines Lade-Spinners anzuzeigen, um die Benutzererfahrung einer Anwendung zu verbessern. Dieser Blogbeitrag vergleicht die beiden und beschreibt die Szenarien, in denen jede am besten geeignet ist. Weiterlesen...

#10: React Query als State Manager

React Query holt keine Daten für Sie ab – es ist ein Datensynchronisationstool, das sich hervorragend für Server-Zustände eignet. Dieser Artikel enthält alles, was Sie wissen müssen, um React Query zu Ihrem einzigen State Manager für Ihren asynchronen Zustand zu machen. Sie lernen, wie Sie React Query seine Magie wirken lassen und warum die Anpassung von staleTime möglicherweise alles ist, was Sie brauchen. Weiterlesen...

#11: Fehlerbehandlung in React Query

Die Fehlerbehandlung ist ein integraler Bestandteil der Arbeit mit asynchronen Daten, insbesondere beim Datenabruf. Wir müssen uns dem stellen: Nicht alle Anfragen werden erfolgreich sein und nicht alle Promises werden erfüllt werden. Dieser Blogbeitrag beschreibt verschiedene Möglichkeiten, mit Fehlern in React Query umzugehen, wie z. B. die Fehler-Eigenschaft, die Verwendung von Error Boundaries oder onError-Callbacks, damit Sie Ihre Anwendung auf Fälle vorbereiten können, in denen "etwas schiefgelaufen ist". Weiterlesen...

#12: Mutationen in React Query meistern

Mutationen sind der wichtige, zweite Teil, der für die Arbeit mit Serverdaten erforderlich ist – für Situationen, in denen Sie diese aktualisieren müssen. Dieser Blogbeitrag behandelt, was Mutationen sind und wie sie sich von Queries unterscheiden. Sie lernen den Unterschied zwischen mutate und mutateAsync kennen und wie Sie Queries und Mutationen miteinander verknüpfen können. Weiterlesen...

#13: Offline React Query

Es gibt viele Möglichkeiten, Promises zu erzeugen – was alles ist, was React Query benötigt –, aber bei weitem der größte Anwendungsfall ist der Datenabruf. Sehr oft erfordert dies eine aktive Netzwerkverbindung. Aber manchmal, besonders auf Mobilgeräten, wo die Netzwerkverbindung unzuverlässig sein kann, müssen Sie, dass Ihre App auch ohne sie funktioniert. In diesem Artikel erfahren Sie mehr über die verschiedenen Offline-Strategien, die React Query bietet. Weiterlesen...

#14: React Query und Formulare

Formulare neigen dazu, die Grenze zwischen Server-Zustand und Client-Zustand zu verwischen. In den meisten Anwendungen möchten wir nicht nur den Zustand anzeigen, sondern dem Benutzer auch ermöglichen, damit zu interagieren. Dieser Artikel zeigt zwei verschiedene Ansätze sowie einige Tipps und Tricks zur Verwendung von React Query mit Formularen. Weiterlesen...

#15: React Query FAQs

Dieser Artikel versucht, die am häufigsten gestellten Fragen zu React Query zu beantworten. Weiterlesen...

#16: React Query trifft React Router

Remix und React Router verändern das Spiel, wenn es darum geht, *wann* Daten abgerufen werden. Dieser Artikel geht darauf ein, warum React Query und Router, die das Datenladen unterstützen, eine himmlische Kombination sind. Weiterlesen...

#17: Den Query Cache füllen

Dieser Blogbeitrag zeigt verschiedene Möglichkeiten, Daten in Ihren Query Cache zu bekommen, *bevor* Sie mit dem Rendern beginnen, um die Anzahl der Lade-Spinner in Ihrer App zu minimieren. Die Optionen reichen vom Vorabruf auf dem Server oder in Ihrem Router bis zum Füllen von Cache-Einträgen über setQueryData. Weiterlesen...

#18: Einblick in React Query

Wenn Sie sich jemals gefragt haben, wie React Query unter der Haube funktioniert – dieser Beitrag ist für Sie. Er erklärt die Architektur (einschließlich Grafiken), beginnend mit dem agnostischen Query Core und wie er mit den Framework-spezifischen Adaptern kommuniziert. Weiterlesen...

#19: Typsicheres React Query

Es gibt einen großen Unterschied zwischen "Typen haben" und "typsicher sein". Dieser Artikel versucht, diese Unterschiede darzulegen und zeigt, wie Sie die bestmögliche Typsicherheit erzielen, wenn Sie React Query zusammen mit TypeScript verwenden. Weiterlesen...

#20: Sie brauchen vielleicht kein React Query

Wenn Ihre Anwendung nicht auf clientseitigen Datenabruf angewiesen ist, insbesondere bei Frameworks wie Next.js oder Remix mit integrierten Serverkomponenten, ist React Query möglicherweise unnötig. Dennoch glänzt es weiterhin in hybriden Anwendungsfällen (wie unendliches Scrollen oder Offline-Unterstützung), wo sein intelligentes Caching und seine Revalidierung von unschätzbarem Wert sein können. Weiterlesen...

#21: Denken in React Query

React Query ist keine Datenabrufbibliothek – es ist ein asynchroner State Manager, der entwickelt wurde, um Parameter als Abhängigkeiten zu behandeln, das Refetch-Verhalten über staleTime zu optimieren und deklarative Muster zu fördern, bei denen queryKey den Cache und Updates steuert. Eine kleine Änderung der Denkweise kann die Verwendung von React Query drastisch vereinfachen. Weiterlesen...

#22: React Query und React Context

React Query ermöglicht es Komponenten, ihre eigenen Daten unabhängig zu verwalten, was sie eigenständig und widerstandsfähig macht. Wenn jedoch gemeinsam genutzte Daten (wie Benutzerinformationen, die weiter oben abgerufen wurden) tiefer im Baum benötigt werden, kann React Context diese implizite Abhängigkeit explizit und sicherer machen. Weiterlesen...

#23: Warum Sie React Query wollen

Während der Datenabruf mit fetch innerhalb von useEffect einfach erscheinen mag, verheddert er sich schnell mit Fehlern wie Race Conditions, fehlenden Ladezuständen, veralteten Daten und Strict Mode-Eigenheiten – was das Management asynchroner Zustände weitaus komplexer macht, als es scheint. Weiterlesen...

#24: Die Query Options API

React Query v5 führt eine einheitliche "Query Options"-API ein – bei der alle Funktionen wie useQuery, invalidateQueries und imperative Aufrufe ein einzelnes Objekt akzeptieren – was die Benutzeroberfläche vereinfacht und die Wiederverwendung über verschiedene Query-Kontexte hinweg erleichtert und gleichzeitig die Typsicherheit verbessert. Weiterlesen...

#25: Automatische Query-Invalidierung nach Mutationen

React Query verknüpft Mutationen nicht automatisch mit Queries – aber Sie können "globale Cache-Callbacks" in einem zentralen MutationCache nutzen, um gemeinsame Verhaltensweisen zu definieren, wie z. B. das Invalidieren von Queries bei jeder Mutation. Weiterlesen...

#26: Wie Infinite Queries funktionieren

Dieser Blogbeitrag ist ein tiefgehender Einblick in das Design und die Funktionsweise von Infinite Queries im Hintergrund. Interessanterweise gibt es keine separate Darstellung von InfiniteQuery – nur ein anderes "Verhalten", das mit regulären Queries verbunden ist. Weiterlesen...

#27: React Query API Design - Gelernte Lektionen

In diesem Vortrag führt Dominik uns durch einige der API-Designentscheidungen, die in React Query getroffen wurden, um seine zweifellos gute Entwicklererfahrung zu erzielen. Sie hören Geschichten über Dinge, die gut gelaufen sind, aber auch über Kompromisse und Fehler, die gemacht wurden, und welche Lektionen wir alle daraus lernen können. Weiterlesen...

#28: React Query - Die schlechten Teile

In diesem Vortrag untersucht Dominik die weniger schmeichelhaften Aspekte von React Query und Situationen, in denen es möglicherweise nicht die beste Wahl ist. Keine Bibliothek ist perfekt; jede Entscheidung beinhaltet Kompromisse. Am Ende dieses Vortrags werden Sie ein besseres Verständnis für die Grenzen von React Query haben und warum es trotz dieser Einschränkungen eine überzeugende Wahl bleibt. Weiterlesen...

#29: Gleichzeitige optimistische Updates in React Query

Optimistische Updates in React Query können bei gleichzeitiger Ausführung mehrerer Mutationen zu Race Conditions führen, was zu inkonsistenten UI-Zuständen führt. Das Abbrechen von laufenden Queries hilft, aber überlappende Invalidierungen können immer noch neuere Updates überschreiben. Weiterlesen...

#30: React Query Selectors, Supercharged

Die select-Option von React Query ermöglicht es Komponenten, nur an den spezifischen Teil der Daten einer Query gebunden zu sein, der sie interessiert – sodass die Aktualisierung eines Feldes nicht unnötig zu irrelevanten UI-Neuerenderungen führt. Dieser feingranulare Ansatz hält vollständige Antworten im Cache, optimiert aber gleichzeitig die Komponent-Updates für die Leistung. Weiterlesen...