Veri Çekmenin Yeni Trendi useSWR
Günümüz projelerinde veri çekme ve işleme süreçlerinde yaygın olarak kullandığımız iki tane kütüphane mevcut, Fetch API ve Axios. Bu kütüphaneler ile veri ekleme, okuma, güncelleme veya silme gibi işlemleri yapmaktayız.
Projelerin bağımlılıklarını ve performanslarını düşünürsek veriyi önbelleğe alma veya sayfalama gibi geliştirmeler(parçalı veri çekme) bizlere çok daha yüksek performans sağlamaktadır. Halihazırda elimizde var olan bir veriyi tekrar çekmemiz gereksiz yere maliyet olup performans kaybı yaşatacaktır. Bu gibi durumlardan kaçınmak için vercel tarafından geliştirilen hızlı ve düşük boyutlu olan useSWR ı inceleyeceğiz.
useSWR bir react hook kütüphanesi olup isimlendirmesini ise stale-while-revalidate in kısaltmasından almaktadır. Çalışma standardını aşağıdan inceleyebilirsiniz.
useSWR ile veri çekme basit olarak 3 adımdan oluşur.
→ Öncelik önbelleğe alınmış verilerin geri döndürülmesi(stale),
→ Veri çekme isteğinin tekrar gönderilmesi(revalidate),
→ Güncel verinin geri dönmesi
Kütüphanenin beğenilen en önemli özelliklerini listelemek istersek;
- Önbellek mekanizması ve güncel veriler ile bizlere sunması,
- Sayfalama mekanizması(veriyi parçalı olarak çekebilmesi),
- Projenin farklı sekmelerde açık olması ve birinden yapılan bir işlemin diğer tabın aktifleştirildiğinde sayfayı yeniden yüklemeden orada da gerçekleşiyor olması, (https://swr.vercel.app/docs/revalidation)
- Post edilen verinin eklenmesini beklemeyip anlık olarak tekrar sunabilmesi,
- Bağımlılık mekanizması(bağımlı statelerde bir güncelleme olduğunda tekrar istek atması ve güncellemesi),
- Typescript ve React Native desteği.
Bu bilgilerden sonra örnek olması için basit bir react projesi oluşturalım.
npx create-react-app useswr-test-app
cd useswr-test-app
npm startİkinci adım olarak swr ve axios paketimizi kuruyoruz.
npm install swr
npm install axiosVeri çekme işleminde yardımcı bir fetcher fonskiyonu eklememiz gerekmekte ve bunun için de Fetch, Axios veya GraphQL kullanabilmekteyiz. Örnek kullanımları linkten inceleyebilirsiniz.
import axios from 'axios';
const fetcher = url => axios.get(url).then(res => res.data)Örnek çağırım ise aşağıdaki gibidir. useSWR içerisine yukarıda tanımladığımız fetcher fonksiyonunu parametre olarak geçmekteyiz.
const { data, isValidating, revalidate, error } = useSWR(key, fetcher)Bu adımları da ekleyip projemize yerleştirirsek App.js aşağıdaki gibi olmaktadır.
Burada apinin bize dönüş durumuna göre Loading ve Error componentleri de eklenmiştir. Örnek görselleştirme randomuser.me/api kullanılarak UserCard componenti içerisinde yapılmıştır.
İncelediğimizde farklı bir sekmede iken projeye tekrar döndüğümüzde verinin güncellendiğini görmektesiniz. useSWR’ın Auto Revalidation özelliği ile bunu rahatlıkla yapabilmekteyiz.
Sonuç olarak; kullanımı basit ve çok küçük boyutlarda olması, önbellek mekanizması ve güncel veriler ile bizlere sunması, sayfalama gibi özellikler sayesinde günümüzde popüler veri çekme kütüphanelerinden biri olmuştur.
React dünyasında popüler olarak kullanılan react-query ile karşılaştırmasını https://react-query.tanstack.com/comparison ve https://blog.logrocket.com/useswr-vs-react-query linklerinden inceleyebilirsiniz.
Kullanılan kod parçaları için örnek bir proje oluşturdum. İncelemek isterseniz linkten ve projeden ulaşabilirsiniz.
Bu makalede yararlandığım kaynaklar;
