Ankündigung von TanStack Query v5
von Dominik Dorfmeister am 17. Okt. 2023. Vor etwa einem Jahr kündigten wir die Roadmap für TanStack Query v5 an, und das gesamte Team hat seitdem hart an dieser Version gearbeitet. Wir freuen uns daher sehr, heute verkünden zu können, dass der Tag gekommen ist: Nach 91 Alpha-Releases, 35 Betas und 16 Release Candidates ist TanStack Query v5.0.0 endlich da! 🎉
v5 setzt die Reise von v4 fort und versucht, TanStack Query kleiner (v5 ist ~20% kleiner als v4), besser und intuitiver zu machen. Einer der Hauptschwerpunkte dieser Veröffentlichung lag auf der Straffung und Vereinfachung der angebotenen APIs.
Breaking Changes
Als große Breaking Change haben wir die meisten Overloads aus dem Code entfernt und vereinheitlicht, wie Sie useQuery und andere Hooks verwenden. Dies wollten wir bereits für v4 tun, aber eine TypeScript-Einschränkung verhinderte dies. TypeScript hat dieses Problem in TS 4.7 behoben, sodass wir alle Overloads entfernen konnten, die wir für den Aufruf von useQuery mit einer unterschiedlichen Anzahl von Parametern hatten. Dies ist ein großer DX-Gewinn, da Methoden mit Overloads normalerweise recht schlechte TypeScript-Fehlermeldungen aufweisen.
Dies ist die größte Breaking Change in v5, aber wir denken, dass sie es wert ist. Die API ist jetzt viel konsistenter – Sie übergeben immer *ein* Objekt. Um den Schmerz der manuellen Änderung aller Vorkommen zu lindern, haben wir versucht, alle in den letzten Monaten auf diese bevorstehende Änderung vorzubereiten. Die Dokumentation wurde geändert, um die neue API zu verwenden, und wir haben eine auto-fixierbare ESLint-Regel in unserem ESLint-Paket veröffentlicht. Zusätzlich kommt v5 mit einem Codemod, der bei der Umstellung hilft.
Abgesehen davon haben wir cacheTime in gcTime umbenannt, um besser widerzuspiegeln, was es tut, keepPreviousData mit placeholderData zusammengeführt, die loading-Status in pending umbenannt und die Callbacks aus useQuery entfernt. All diese Änderungen machen v5 zur konsistentesten und besten Version für neue Einsteiger.
Um mehr über die Breaking Changes zu erfahren, werfen Sie einen Blick auf unsere Migrationsanleitung.
Neue Funktionen
Natürlich kommt v5 auch mit erstaunlichen neuen Funktionen 🚀
Optimistische Updates vereinfacht
Genießen Sie eine brandneue, vereinfachte Möglichkeit, optimistische Updates durchzuführen, indem Sie die zurückgegebenen variables von useMutation nutzen, ohne Code schreiben zu müssen, der den Cache manuell aktualisiert. Weitere Details finden Sie in der Dokumentation zu optimistischen Updates
Teilbarer Mutationsstatus
Eine häufig nachgefragte Funktion, wie in diesem zwei Jahre alten Issue zu sehen, wird in v5 endlich Realität: Sie können jetzt auf den Status aller Mutationen zugreifen, die dank des neuen useMutationState Hooks über Komponenten hinweg geteilt werden.
1st Class suspense-Unterstützung
Das ist richtig – suspense für Data Fetching ist nicht mehr experimentell, sondern vollständig unterstützt. React Query wird mit neuen Hooks wie useSuspenseQuery, useSuspenseInfiniteQuery und useSuspenseQueries geliefert. Schauen Sie sich die Suspense-Dokumentation an, um die Unterschiede zu den Non-Suspense-Versionen zu erfahren.
Streaming mit React Server Components
v5 kommt auch mit einer experimentellen Integration für Suspense auf dem Server in NextJs, die das Beste aus beiden Welten vereint: Der Adapter react-query-next-experimental ermöglicht es uns, eine einzige useSuspenseQuery zu schreiben, die das Data Fetching so früh wie möglich initiiert: auf dem Server, während SSR. Es wird dann das Ergebnis an den Client streamen, wo es automatisch in den Cache gelegt wird, was uns die gesamte Interaktivität und Datensynchronisation von React Query bietet.
Verbesserte Infinite Queries
Infinite Queries können jetzt mehrere Seiten auf einmal vorab laden, und Sie haben die Möglichkeit, die maximale Anzahl von Seiten anzugeben, die im Cache gespeichert werden.
Neue Devtools
Die Query Devtools wurden von Grund auf neu geschrieben, framework-agnostisch, um sie für alle Adapter verfügbar zu machen. Sie erhielten auch eine UI-Überarbeitung und einige neue Funktionen wie Inline-Cache-Bearbeitung und Light-Mode.
Feingranulare Persistenz
Eine weitere langjährige Diskussion aus dem Jahr 2021 hebt die Bedeutung der feingranularen Persistenz mit Just-in-Time-Restore-Fähigkeiten (insbesondere für die mobile Entwicklung) hervor, die das PersistQueryClient-Plugin nicht hat. Mit v5 haben wir nun ein neues experimental_createPersister Plugin, das es Ihnen ermöglicht, Queries einzeln zu persistieren.
Die queryOptions API
Da wir nun eine einheitliche Möglichkeit haben, useQuery aufzurufen (mit nur einem Objekt als Parameter), können wir auch bessere Abstraktionen darauf aufbauen. Die neue Funktion queryOptions bietet uns eine typsichere Möglichkeit, unsere Query-Definitionen zwischen useQuery und imperativen Methoden wie queryClient.prefetchQuery zu teilen. Darüber hinaus kann sie queryClient.getQueryData ebenfalls typsicher machen.
VIELEN DANK
Wir hoffen, dass Ihnen die Nutzung von v5 genauso viel Spaß machen wird, wie uns der Bau davon gemacht hat. Was bleibt, ist, allen zu danken, die diese Veröffentlichung ermöglicht haben. Egal, ob Sie ein Kernmitwirkender sind, ein Problem von der Roadmap implementiert haben, einen Tippfehler in der Dokumentation behoben oder Feedback zu den Alpha-Versionen gegeben haben: Jeder Beitrag zählt! Es sind die Menschen, die diese Bibliothek großartig machen, und wir sind gesegnet, eine so erstaunliche Community zu haben. ❤️