React Query
React Query 4 → 5
React Query’nin yeni versiyonu ile birlikte karşımıza ne gibi değişiklikler ve ne gibi yenilikler çıkıyor.
TanStack Query yani React Query 4ncü sürümünden → 5nci sürümüne geçerken ne gibi değişiklikler bizi bekliyor.
Aşağıdaki linkte değişikliklerin özetini bulabilirsiniz;
https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5
1. Supports a single signature, one object
Bu özellikle birlikte tüm ReactQuery fonksiyonları object tipinde değerler alacak hale geldi.
ReactQuery Hooks
QueryClient
Query Cache
Tüm bu yukarıdaki yapılara bir örnek teşkil etmesi açısından
Önceden bu şekilde iken;
Yaptığımız şey bunu {} object yapısı içerisine almak
2. Rename cacheTime
to gcTime
CacheTime yerine GarbageCollection ifade eden gcTime kullanıma geçilmiştir. Burada inactiveQuery’lerin cache’den temizlenme zamanını belirtir, Bunun yerine gcTime tercih edilmeye başlanmıştır
Not: State Time ise verinin cache sağlıklı olup olmadığı ile ilgili tutulan zamandır, veri bayatladığında bir sonraki query’de artık veri cache’den değil , network üzerinden tekrar çekilecektir.
3. Callbacks on useQuery (and QueryObserver) have been removed
Bu konuda baya bir tartışma konuşma dönmüş durumda, yukarıdaki blog’da kötü API tasarımdan dolayı, useEffect ile birlikte kullanımların hataya yol açtığı, bunu önlemek için ve kullanım gereksinimi olmamasından dolayı useQuery’deki callback fonksiyonları kaldırılmıştır.
İlk önce bende useMutation’dan da kalktı sanmıştım. Ama öyle bir durum yok.
4. The refetchInterval
callback function only gets query
passed
Window focus kaybolunca, veya mount olunca, veya network tekrar bağlantı kurunca burada refetch işleminin otomatik olarak çalıştırılmasını isteyebiliriz
Bunu DefaultConfig veya useQuery metodlara eklediğinizde bu flaglar üzerinden yönetebilme imkanı sunar.
refetchInterval’ da bu fonksiyonlardan bunu sayı, true/false veya bir fonksiyona bağlı gerçekleştirebilirsiniz. Artık bu callback fonksiyonu sadece Query destekleyecek şekle getirilmiştir.
5. The remove
method has been removed from useQuery
6. The isDataEqual
option has been removed from useQuery
7. The useErrorBoundary
option has been renamed to throwOnError
Bu konuda thrownOnError kullanabilirsiniz.
8. Simplified optimistic updates
Optimistic Update sunucudan cevap gelmeden bir takım işlemleri başarılıymış gibi yapmak gelen sonuca göre eğer aksi bir durum olursa yapılan işlemi geri alma akışıdır.
ReactQuery’de bu akış için isPending state eklemiş, ne zamanki pending bitiyor buna göre UI artık bu optimistic update durumundan gerçek duruma geliyor.
Diğer Değişiklikler
Bunun benzeri React Query5 ile gelen bir çok yeniliği aşağıdaki linkten erişebilirsiniz. https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5