Photo by Toa Heftiba on Unsplash

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.

Frontend Development With JS
3 min readNov 13, 2023

--

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.

https://twitter.com/t3dotgg/status/1647451137652686848

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

--

--

No responses yet