Vergleich | React Query vs SWR vs Apollo vs RTK Query vs React Router

Diese Vergleichstabelle versucht, so genau und unparteiisch wie möglich zu sein. Wenn Sie eine dieser Bibliotheken verwenden und der Meinung sind, dass die Informationen verbessert werden könnten, können Sie gerne Änderungen (mit Hinweisen oder Beweisen für Behauptungen) über den Link "Diese Seite auf Github bearbeiten" am unteren Ende dieser Seite vorschlagen.

Merkmal-/Fähigkeitsschlüssel

• ✅ Erstklassig, integriert und sofort einsatzbereit ohne zusätzliche Konfiguration oder Code
• 🟡 Unterstützt, aber als inoffizielle 3rd-Party- oder Community-Bibliothek/Beitrag
• 🔶 Unterstützt und dokumentiert, erfordert aber zusätzlichen Benutzercode zur Implementierung
• 🛑 Nicht offiziell unterstützt oder dokumentiert.

	React Query	SWR (Website)	Apollo Client (Website)	RTK-Query (Website)	React Router (Website)
Github Repo / Sterne
Plattformanforderungen	React	React	React, GraphQL	Redux	React
Ihr Vergleich		(keine)	(keine)	Vergleich	(keine)
Unterstützte Abfragesyntax	Promise, REST, GraphQL	Promise, REST, GraphQL	GraphQL, Beliebig (Reaktive Variablen)	Promise, REST, GraphQL	Promise, REST, GraphQL
Unterstützte Frameworks	React	React	React + Andere	Beliebig	React
Caching-Strategie	Hierarchischer Schlüssel -> Wert	Eindeutiger Schlüssel -> Wert	Normalisiertes Schema	Eindeutiger Schlüssel -> Wert	Verschachtelte Route -> Wert
Cache-Schlüssel-Strategie	JSON	JSON	GraphQL-Abfrage	JSON	Routenpfad
Cache-Änderungserkennung	Tiefer Vergleich von Schlüsseln (stabile Serialisierung)	Tiefer Vergleich von Schlüsseln (stabile Serialisierung)	Tiefer Vergleich von Schlüsseln (instabile Serialisierung)	Schlüsselreferenzielle Gleichheit (===)	Routenänderung
Datenänderungserkennung	Tiefer Vergleich + Strukturelle Teilung	Tiefer Vergleich (via stable-hash)	Tiefer Vergleich (instabile Serialisierung)	Schlüsselreferenzielle Gleichheit (===)	Loader-Ausführung
Datenspeicherung (Memoization)	Volle strukturelle Teilung	Identität (===)	Normalisierte Identität	Identität (===)	Identität (===)
Bundle-Größe					+
API-Definitionsort	Komponente, Externe Konfiguration	Komponente	GraphQL-Schema	Externe Konfiguration	Routenbaumkonfiguration
Queries	✅	✅	✅	✅	✅
Cache-Persistenz	✅	✅	✅	✅	🛑 Nur aktive Routen 8
Devtools	✅	✅	✅	✅	🛑
Polling/Intervalle	✅	✅	✅	✅	🛑
Parallele Queries	✅	✅	✅	✅	✅
Abhängige Queries	✅	✅	✅	✅	✅
Paginierte Queries	✅	✅	✅	✅	✅
Unendliche Queries	✅	✅	✅	✅	🛑
Bidirektionale unendliche Abfragen	✅	🔶	🔶	✅	🛑
Unendliches Abfrage-Neuladen	✅	✅	🛑	✅	🛑
Verzögerte Abfragedaten1	✅	✅	✅	✅	✅
Selektoren	✅	🛑	✅	✅	N/A
Initiale Daten	✅	✅	✅	✅	✅
Scroll-Wiederherstellung	✅	✅	✅	✅	✅
Cache-Manipulation	✅	✅	✅	✅	🛑
Veraltete Abfrageablehnung	✅	✅	✅	✅	✅
Render-Batching & Optimierung2	✅	✅	🛑	✅	✅
Automatische Garbage Collection	✅	🛑	🛑	✅	N/A
Mutations-Hooks	✅	✅	✅	✅	✅
Offline-Mutationsunterstützung	✅	🛑	🟡	🛑	🛑
Prefetching-APIs	✅	✅	✅	✅	✅
Query-Abbruch	✅	🛑	🛑	🛑	✅
Teilweises Abgleich von Abfragen3	✅	🔶	✅	✅	N/A
Stale While Revalidate	✅	✅	✅	✅	🛑
Konfiguration der veralteten Zeit (Stale Time)	✅	🛑7	🛑	✅	🛑
Abfrage-/Mutationskonfiguration vor der Verwendung4	✅	🛑	✅	✅	✅
Neuabfrage bei Fensterfokus	✅	✅	🛑	✅	🛑
Netzwerkstatus-Neuladen	✅	✅	✅	✅	🛑
Allgemeine Cache-Dehydrierung/Rehydrierung	✅	🛑	✅	✅	✅
Offline-Caching	✅	🛑	✅	🔶	🛑
React Suspense	✅	✅	✅	🛑	✅
Abstrahiertes/agnostisches Kernstück	✅	🛑	✅	✅	🛑
Automatisches Neuladen nach Mutation5	🔶	🔶	✅	✅	✅
Normalisiertes Caching6	🛑	🛑	✅	🛑	🛑

¹ Verzögerte Abfragedaten - React Query bietet eine Möglichkeit, weiterhin die vorhandenen Daten einer Abfrage anzuzeigen, während die nächste Abfrage geladen wird (ähnlich der gleichen Benutzererfahrung, die Suspense bald nativ bieten wird). Dies ist äußerst wichtig beim Schreiben von Paginierungs- oder unendlichen Lade-UIs, bei denen Sie keinen harten Ladezustand anzeigen möchten, wenn eine neue Abfrage angefordert wird. Andere Bibliotheken verfügen nicht über diese Funktion und zeigen einen harten Ladezustand für die neue Abfrage an (sofern diese nicht vorab geladen wurde), während die neue Abfrage geladen wird.

² Render-Optimierung - React Query verfügt über eine hervorragende Rendering-Leistung. Standardmäßig verfolgt es automatisch, welche Felder abgerufen werden, und rendert neu, nur wenn sich eines davon ändert. Wenn Sie diese Optimierung abwählen möchten, setzen Sie notifyOnChangeProps auf 'all', um Ihre Komponenten neu zu rendern, wenn die Abfrage aktualisiert wird. Zum Beispiel, weil sie neue Daten hat oder um anzuzeigen, dass sie gerade abfragt. React Query fasst auch Updates zusammen, um sicherzustellen, dass Ihre Anwendung nur einmal neu rendert, wenn mehrere Komponenten dieselbe Abfrage verwenden. Wenn Sie nur an den Eigenschaften data oder error interessiert sind, können Sie die Anzahl der Renderings noch weiter reduzieren, indem Sie notifyOnChangeProps auf ['data', 'error'] setzen.

³ Teilweises Abgleichen von Abfragen - Da React Query eine deterministische Serialisierung von Abfrageschlüsseln verwendet, können Sie variable Gruppen von Abfragen manipulieren, ohne jeden einzelnen Abfrageschlüssel kennen zu müssen, den Sie abgleichen möchten. z.B. können Sie jede Abfrage neu laden, die in ihrem Schlüssel mit todos beginnt, unabhängig von Variablen, oder Sie können bestimmte Abfragen mit (oder ohne) Variablen oder verschachtelten Eigenschaften ansprechen und sogar eine Filterfunktion verwenden, um nur Abfragen abzugleichen, die Ihre spezifischen Bedingungen erfüllen.

⁴ Abfragekonfiguration vor der Verwendung - Dies ist einfach ein schicker Name dafür, dass man konfigurieren kann, wie Abfragen und Mutationen funktionieren, bevor sie verwendet werden. Zum Beispiel kann eine Abfrage im Voraus vollständig mit Standardwerten konfiguriert werden, und wenn es an der Zeit ist, sie zu verwenden, ist nur useQuery({ queryKey }) erforderlich, anstatt bei jeder Verwendung den Fetcher und/oder die Optionen übergeben zu müssen. SWR hat eine Teilform dieser Funktion, indem es erlaubt, einen Standard-Fetcher vorab zu konfigurieren, aber nur als globalen Fetcher, nicht auf Abfragebasis und definitiv nicht für Mutationen.

⁵ Automatisches Neuladen nach Mutation - Damit ein wirklich automatisches Neuladen nach einer Mutation erfolgen kann, ist ein Schema erforderlich (wie das, das GraphQL bietet) zusammen mit Heuristiken, die der Bibliothek helfen, einzelne Entitäten und Entitätstypen in diesem Schema zu identifizieren.

⁶ Normalisiertes Caching - React Query, SWR und RTK-Query unterstützen derzeit kein automatisches normalisiertes Caching, das die Speicherung von Entitäten in einer flachen Architektur beschreibt, um eine gewisse Duplizierung von Daten auf hoher Ebene zu vermeiden.

⁷ SWR's Unveränderlicher Modus - SWR wird mit einem "unveränderlichen" Modus geliefert, der es Ihnen ermöglicht, eine Abfrage nur einmal für die Lebensdauer des Caches abzurufen, aber er hat immer noch nicht das Konzept von Stale-Time oder bedingter automatischer Neuanzeige.

⁸ React Router Cache-Persistenz - React Router speichert Daten nicht über die aktuell passenden Routen hinaus im Cache. Wenn eine Route verlassen wird, gehen ihre Daten verloren.