React-Query Nedir ve Nasıl Kullanılır ?
React Query kütüphanesi Reactjs uygulamalarımızda veri çekmeyi , veri göndermeyi , gelen verileri cachelemeyi(ön belleğe alınmasını), gelen veri eğer ön bellekteki veri ile aynı ise ekranımızda ön bellekteki veriyi göstermemizi sağlayan bir kütüphanedir.
Avantajları Neler ? Neden Kullanalım ?
Avantajlarını örnekler üzerinden vermek istiyorum.
- Önbelleğimizde olan veri , backendden dönen response ile aynı ise sayfalarda dolaşırken her seferinde loading ekranlarını görmeyeceğiz çünkü her seferinde ekranımızda olan verileri çekmemiş olacağız.
- Verileri backendden alırken istediğimiz periyotlarla bunu güncelleyebileceğiz bunun için ekstra kod yazmayacağız.
- İsteğimizi attıktan sonra veri için bir state, hata durumu için bir state yada yüklenmesi için ayrı ayrı state tanımlamak zorunda kalmayacağız bunu bize sağlıyor olacak.
Kısaca daha okunabilir ve daha az kod.
Artık nasıl kullanacağına bakabiliriz.
Projemize yüklemek için projemizin bulunduğu dizinde
komutlarını çalıştırmamız yeterli.
Kurulumumuzu yaptıktan sonra App’imizi React Query Provider ile sarmamız gerekiyor.
En basit şekilde projemizde kullanmak için React Query hazır.
İlk get isteğimizi artık atabiliriz.
React Query kütüphanesinde GET methodları için useQuery kullanıyoruz. Örnekte olduğu gibi içine 2 adet parametre alıyor. Bir tanesi unique key(bu verdiğimiz key’e göre verilerimiz önbellekte tutuluyor) bir tanesi ise veri çekme isteğimizin bulunduğu kısım.
Get isteği atarken fetch yerine başka bir kütüphane kullanabilir miyiz ?
Evet , örnek olarak axios ile bir Get isteği yapalım.
Bu şekilde fonksiyonlarımızı başka yerde tanımlayarak da kullanabiliyoruz. Bu sayede api isteklerimiz için yapı kurarken , bu şekilde çok daha temiz ve düzenli görünecek.
Peki ben eşsiz id’ye sahip istekler atacağım bunları nasıl önbellekte tutabilirim ?
Yukarıdaki örnekte sabit bir istek atıyorduk dinamik herhangi bir şey yoktu.
Örnek olarak bir ürünün detayına gitmek istiyoruz. Bu tek bir istekte olacak ürünün id’sini istek atarken unique-key’de belirteceğiz.
Artık eşsiz anahtar ile çektiğimiz veriyi ön belleğimize kaydettik.
İyi güzel çektiğimiz verileri kaydediyoruz da bunları nereden görebiliriz ?
React Query kütüphanesinin Devtools’u bize ekstra bir paket daha yüklemeden bu konuda şahane bir rahatlık sunuyor.
Provider’imizin içine Devtools’u dahil ettikten sonra çağırmak yeterli oluyor.
Peki nasıl görünüyor ?
Projemizin sol alt köşesine React Query logosu ile gelen bir buton ile React Query Devtools artık hazır.
Attığımız istekler belirlediğimiz keyler ile burada tutuluyor.
Key’lere tıkladığımızda en son ne zaman istek atıldığını içerisindeki veriye kadar bize sunuyor.
Detay için örnek fotoğraf.
Birkaç get isteği daha örneklendirip post işlemlerine geçeceğim.
React Query’de Get işlemlerimizin asenkron olduğunu öğrenmiştik , senkron bir işlem yapmak istiyorum nasıl yapabilirim ?
React Query’in enabled parametresini bunun için kullanabiliriz.
Aynı zamanda React Query bizim için pagination ve infinite scroll işlemlerinide yapıyor. Bu konuda da başka kütüphaneleri projemize dahil etmeden bu işlemleri de Query içinde halledebiliyoruz.
React Query ile Get işlemlerimizi yaparken özel bir ayar yapmazsak , her sayfa değiştiğinde yada farklı bir sekmeye gidip sayfamıza geri döndüğümüzde tekrar tekrar istek attığını görürüz. Ekranımızda önbelleğimizdeki verileri kullansa dahi React Query -özel bir ayar yapmadığımız takdirde- sürekli backend’e istek atıyor.
Bu durumun nasıl önüne geçebiliriz ?
Client’i oluşturduğumuz yerde bu ayarları verebiliriz.
Genelde verdiğimiz bu özellikleri isteklere özelde değiştirebiliriz elbette.
Artık POST/PUT/DELETE işlemlerine geçebiliriz. Bu işlemler için useQuery değil useMutation ‘ı kullanacağız.
useMutation içine , isteği yaptığımız bir fonksiyon ve ayarlarımızı alıyor.
İsteklerimize eşsiz bir key verebilir , yaptığımız işlemin başarılı/başarısız olma durumunu yönetebiliriz.
Bu yazımda genel olarak bu kütüphaneye değinmek ve projelerimizde en basit şekilde nasıl kullanabiliriz örneklerle değinmek istedim.
Umarım bu yazı size yardımcı olmuştur. Okuduğunuz için teşekkür ederim.
Kaynakça : https://react-query.tanstack.com/
