TanStack Router und TanStack Query bringen frischen Wind in React-Anwendungen. Beispiele zeigen ihren Einsatz für Darstellung, Datenspeicherung und mehr.
gezeigt. In diesem zweiten und letzten Teil geht es um darauf aufbauende Features, die Anwendungen nutzen können, um ihre Darstellung zu optimieren, Daten zu speichern und die URL zum Speichern globaler Informationen zu verwenden.
Nils Hartmann ist freiberuflicher Softwareentwickler und Coach mit den Schwerpunkten Java im Backend und React im Frontend, wozu er auch Workshops und Trainings gibt. Die Detailansicht eines Tasks zeichnet sich durch zwei technische Besonderheiten aus. Zum einen enthält der Pfad zu der Route einen variablen Platzhalter, der zur Laufzeit mit einer Task-Id befüllt werden muss . Zum anderen müssen zur vollständigen Darstellung des Tasks Daten aus zwei verschiedenen Endpunkten gelesen werden.), da die Id des darzustellenden Tasks nicht zur Entwicklungszeit, sondern erst zur Laufzeit beim Aufrufen der Route bekannt ist. Der Name der Routendatei muss aus diesem Grund mit einem $-Zeichen beginnen, zum Beispiel tasks/$taskId.tsx. Die generierten TypeScript-Typen für diese Route stellen sicher, dass beim Erstellen eines Links zu dieser Route der Wert für den Platzhalter korrekt angegeben wird. Dasselbe gilt für den Zugriff auf den Wert aus der URL zur Laufzeit. Das Laden der Daten für die Detaildarstellung kann grundsätzlich genauso erfolgen wie das Laden der Liste mit den Tasks. Allerdings soll hier exemplarisch das Suspense-Feature von React demonstriert werden, mit dem Zusammenspiel von TanStack Router und TanStack Query.Um mit dem Laden der Daten für eine Route so frühzeitig wie möglich zu beginnen, können die Daten bereits in der-Methode einer Route geladen werden. Diese Methode lässt sich in der Routenkonfiguration angeben. Ist sie gesetzt, ruft der Router sie bereits vor dem Rendern der Route auf, um Daten für die Route zu ermitteln. In welcher Form sie das tut, und ob sie synchron oder asynchron arbeitet, bleibt der Methode überlassen. Komponenten können auf die Daten dann über den. Da dieser ein globales Objekt ist, lässt er sich aus einem Modul exportieren und in den jeweiligen Routendateien importieren. Alternativ bietet der Router einen eigenendie angeforderten Daten aus dem Cache zurück. Sind sie dort nicht vorhanden, ruft TanStack Query die angegebene Query-Funktion auf. // /src/routes/tasks/$taskId.tsx export const Route=createFileRoute=>Loading Task Details..., async loader { const taskId=params.taskId; return context.queryClient.ensureQueryData { return fetch....; } }); } }); function RouteComponent { const task=Route.useLoaderData; return } Die Routenkomponente greift auf die gelesenen Daten zu, um den Task darzustellen. Der TypeScript-Typ für den Rückgabewert ergibt sich automatisch aus dem Rückgabewert dererscheint visuelles Feedback während der Wartezeit. In der Beispielanwendung benötigt die Route allerdings nicht eine Query, sondern zwei. Denn zu jedem Task gibt es noch sogenannte Insights. Das sind Ergänzungen oder Hinweise, die andere Benutzer an einen Task hängen können. Die Insights stellt das Backend über einen separaten Endpunkt zur Verfügung, sodass das Frontend bei der Task-Darstellung nun auch auf diesen Endpunkt zugreifen muss. Grundsätzlich ist es kein Problem, die-Methode anzupassen, und dort auch einen zweiten Request durchzuführen. Der Router würde dann auf das Ergebnis beider Requests warten, bevor er die Routenkomponente rendert. Allerdings soll das Rendern bereits geschehen, sobald die Daten für die Task-Details vorliegen – denn diese sind die wichtigsten Informationen der Seite, die schnellstmöglich erscheinen sollen und auch ohne die Insights bereits einen Mehrwert für Anwenderinnen und Anwender bedeuten. Dauert der Request für die Insights länger als das Lesen der Task-Details, soll an der Stelle in der Komponente bis zum Laden der Insights ein Platzhalter ausgegeben werden. Umgekehrt sollen allerdings die Insights in keinem Fall vor den Task-Details erscheinen, da dies verwirren würde. -Aufrufe, wartet aber nicht auf deren Ergebnisse und gibt auch nichts zurück. Aus Sicht des Routers kann dieser also unmittelbar mit dem Rendern der Komponente beginnen. Das nächste Listing zeigt die überarbeitete// /src/routes/tasks/$taskId.tsx import { Suspense } from "react"; import { useSuspenseQuery } from "@tanstack/react-query"; // ... export const Route=createFileRoute=>Loading Task, loader { const taskId=params.taskId; // Starten der beiden Requests parallel, ohne auf das // Ergebnis zu warten context.queryClient.ensureQueryData { /* ... */ }, }); context.queryClient.ensureQueryData: { /* ... */ } } }); function RouteComponent { const taskId=Route.useParams; return ; } function TaskDetails { const task=useSuspenseQuery { /* ... */ }, }); return /* Task-Daten darstellen */; } function InsightList { const insights=useSuspenseQuery { /* ... */ }, }); return /* Insight-Daten darstellen */ }-Komponente denselben Query Key verwenden, stellt TanStack Query sicher, dass nur ein Server Request läuft beziehungsweise die Daten aus dem Cache gegeben werden, sofern sie unter dem Key dort schon vorhanden sind. DieSind die Daten aber noch nicht vorhanden, unterbricht React das Rendern der Komponente an dieser Stelle und sucht stattdessen in der Komponentenhierarchie oberhalb nach einer sogenannten Suspense Boundary. Diese Komponente kann einen Platzhalter ausgeben, solange das Rendern des Komponentenbaums unterbrochen ist. Dieses Verhalten ist in etwa vergleichbar mit einem Fehler, den eine Funktion wirft: Der Fehler wird im Callstack so weit nach oben gereicht, bis ein-Handler gefunden wird. Im Fall von React wird nicht nach einem Try-Catch-Handler gesucht, sondern nach der React-Suspense-Komponente. Die Routenkomponente, die die-Komponente rendert, verwendet aber keine Suspense-Komponente. Die nächsthöhere Suspense-Komponente in der Komponentenhierarchie stellt der Router bereit. Sie sorgt für das Anzeigen der-Aufruf durchführt. Hier gilt das gleiche Prinzip: Wenn die Daten noch nicht vorhanden sind, unterbricht React auch hier das Rendern und sucht nach der nächsthöheren Suspense-Komponente. In diesem Fall wird React in der Routenkomponente fündig, denn die-Komponente bleibt dennoch sichtbar. Mit den Suspense-Komponenten lassen sich einzelne Teile der Oberfläche also präzise priorisieren, da Entwicklerinnen und Entwickler festlegen können, an welchen Stellen das Rendern pausieren soll, sofern noch Daten fehlen.-Funktion: In der gezeigten Implementierung startet sie die beiden Requests parallel, um die Wartezeit so gering wie möglich zu halten. Ohne dieangezeigt wird. Es käme hier zum sequenziellen Ausführen von Requests und damit zu einer langsameren Anwendung beziehungsweise einer unnötig verspäteten Darstellung der-Funktionen schon vor dem Aktivieren der Route auszuführen. Dazu lässt sich mit der Link-Komponente eine Preload-Strategie festlegen. Diese definiert, ob und wann die Daten einer Route im Voraus zu laden sind. Mögliche Werte sind zum Beispiel. Im ersten Fall läuft der Loader einer Route bereits dann, wenn sich der Maus-Cursor über dem Link befindet, sodass der Router davon ausgeht, dass die Anwenderin oder der Anwender wahrscheinlich auf den Link klicken wird. Ein Link, der die Preload-Strategiegesetzt hat, führt dazu, dass die Daten vorgeladen werden, sobald der Link im Viewport des Browsers sichtbar wird. Das Listing zeigt diefunction TaskTableRow { return {task.title} { /* ... */ } }findet am 7. und 8. Mai in Mannheim statt. Die Konferenz bietet einen umfassenden Blick auf die JavaScript-gestützte Enterprise-Welt. Der Fokus liegt nicht nur auf den Programmiersprachen JavaScript und TypeScript selbst, sondern auch auf Frameworks und Tools, Accessibility, Praxisberichten, UI/UX und Security.
Deutschland Neuesten Nachrichten, Deutschland Schlagzeilen
Similar News:Sie können auch ähnliche Nachrichten wie diese lesen, die wir aus anderen Nachrichtenquellen gesammelt haben.
Unsichere Router: Hersteller rät zur EntsorgungManchmal ist alt wohl zu alt. Das denkt zumindest ein Routerhersteller und will Sicherheitslücken für einige ältere Geräte nicht schließen. Besitzer sollen sie entsorgen oder nach außen abschotten.
Weiterlesen »
OpenWrt 24.10: Neue Hauptversion des Router-OS bietet viele NeuerungenMit Version 24.10 steht ein neues Stable Release zur Verfügung, welches neben einigen neuen Funktionen auch noch mehr Hardware unterstützt.
Weiterlesen »
FritzOS-Updates: Wenn 8.03 auf 8.01 folgtDie FritzBox 5690 Pro der erste AVM-Router, für den das Bugfix-Update 8.03 bereit steht.
Weiterlesen »
JavaScript-Bibliothek React: Neue Umfrage zum Ökosystem zeigt die TrendsLaut einer Umfrage haben React-Developer weiterhin mit den gleichen APIs und Hooks zu kämpfen. TanStack Query erhält positive Bewertungen und überholt Next.js.
Weiterlesen »
Formularverwaltung mit TanStack Form 1.0 in React, Angular, Vue & Co.Die neue Open-Source-Library schickt sich an, Entwicklerinnen und Entwicklern eine umfassende, typsichere Verwaltung von Webformularen zu ermöglichen.
Weiterlesen »
React-Deep-Dive: TanStack Router und TanStack QueryTanStack Router und Query bringen frischen Wind bei Routing und Data Fetching und eignen sich sogar als Alternative zu klassischen State-Management-Werkzeugen.
Weiterlesen »