UseSWR’ye başlarken

Adım adım UseSWR nedir ve örnek kullanım

UseSWR, Next.js’nin yaratıcısı vercel ekibi tarafından veri yakalama için geliştirilmiş bir React Hook kütüphanesi.

Photo by Lautaro Andreani on Unsplash

React ile önceden çalışmış olanlar bilir ki veri yakalama için fetch, axios gibi kütüphanelerden yardım alırız fakat bunlar sadece veriyi getirir ve başka hiç bir işleme girmez. İşte tam burada veriyi yakalayıp getirmesinin yanında bize güzel özellikler de sağlayan useSWR devreye giriyor.

Açılımı Stale-While-Revalidate. Bayat veriyi al günceli yerine koy gibi bir anlamı var :)

useSWR temel olarak, 3 adımda veri almayı gerçekleştiriyor.

1. Önce önbelleğe alınmış verileri döndürür. (stale)

2. Getirme isteğini gönderir. (revalidate)

3. Güncel verileri döndürür.

Ne gibi özelliklere sahip ?

• Transport and protocol agnostic: Protokol bağımsız veri yakalama
• Fast, lightweight and reusable data fetching: Veriler önbellekten işlendiği anda, SWR kaynaktan gelen verileri hemen tekrar getirir.
• Built-in cache and request deduplication
• Real-time experience
• Revalidation on focus : Bir sayfaya yeniden odaklandığınızda veya tarayıcıdaki sekmeler arasında geçiş yaptığınızda SWR verileri otomatik olarak yeniden çeker.

https://swr.vercel.app/docs/revalidation

• Revalidation on network recovery
• Polling
• Pagination and scroll position recovery
• SSR and SSG
• Local mutation (Optimistic UI): Değişikliklerin yerel olarak verilere uygulanması, yani her zaman en son verilere güncellenmesi.
• Built-in smart error retry
• Suspense mode: TypeScript ile birlikte kullanılabilir

Daha fazla ayrıntı için documentation (https://swr.vercel.app/) sayfasına bakabilirsiniz.

SWR’nin React’te örnek kullanımı

Artık SWR’yi öğrendiğimize göre, onu bir React uygulamasında kullanalım.

Adım 1: Paketi yükleyin

React uygulamamızda, aşağıdakileri çalıştırarak paketi yükleyin:

npm install swr

Adım 2: useSWR’yi import edelim

import useSWR from ‘swr’

SWR, useSWR adında bir Hook’a sahiptir. Bunu şöyle bir React bileşenine aktaralım:

useSWR hooku genelde çok kullanılan 2 değer döndürür: veri ve hata

const { data, error } = useSWR(‘/api/123’, fetcher)

Adım 3: Bir fetcher fonksiyonu yazalım

Fetcher asenkron bi şekilde yazmak için herhangi bir data-fetching kütüphanesi kullanabilirsiniz.

Örneğin, bu, Axios kullanan bir fetcher fonksiyonu:

import axios from 'axios'
const fetcher = url => axios.get(url).then(res => res.data)

Daha fazla bilgiyi SWR belgelerinde bulabilirsiniz.

  const fetcher = (...args) => fetch(...args).then(res =>. 
          res.json())
  //...
}

Adım 4: Datayı hazırlayalım

Şimdi bazı verileri almaya hazırız. Bu örnekte, bazı mock verileri almak için JSONPlaceholder API’sini kullanacağım.

Veriler tanımsız iken (getirilirken), Loading mesajı gösterebiliriz ve bir hata döndürülürse uygun UI’yi gösterebiliriz.

import useSWR from 'swr'
function App () {
  const fetcher = (...args) => fetch(...args).then(res =>      
      res.json())// Add these lines
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/1', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>// render data below
}

Adım 5: Verileri Görüntüleyelim

Son olarak, bileşen alındıktan sonra verileri döndürebilir. Bu örnekteki mock veriler aşağıdaki biçimdedir:

{
“userId”: 1,
“id”: 1,
“title”: “delectus aut autem”,
“completed”: false
}

Son hali şöyle görünecek:

import useSWR from "swr";
import "./App.css";
function App() {
  const fetcher = (...args) => fetch(...args).then((res) =>       
  res.json());// fetch data
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/todos/1",fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;// render data
  return (
    <div className="App">
      <h2>{data.title}</h2>
      <p>UserId: {data.userId}</p>
      <p>Id: {data.id}</p>
      {data.completed? <p>Completed</p> : <p>Not Completed</p>}
    </div>
  );
}export default App;

Uygulamamızı test etmek için npm start diyip tarayıcımıza gidelim;

Bu makalede, useSWR Hook’un React’te veri almak için neden iyi bir seçim olabileceğinin bazı özelliklerini inceledik. Önbelleğe alma, sayfalandırma ve otomatik yeniden getirme özellikleri ile kullanıcı deneyimini iyileştirebiliyoruz.

useSWR basit ve arka uçtan bağımsız ve bu da her türlü API veya veritabanından hızlı ve kolay bir şekilde veri alınmasına olanak tanıyor.

Okuduğunuz için teşekkürler. Umarım SWR’ye ve onu React uygulamalarınızda nasıl kullanacağınıza dair faydalı bir giriş olmuştur.

Kaynaklar

React Hooks for Data Fetching - SWR

GitHub - vercel/swr: React Hooks for Data Fetching