React Query Refetch ve Pagination

İlk yazımda React Query'nin ne olduğuna dair bir giriş yapıp temel konseptlerden bahsetmiştim. Bundan sonra ise parça parça çeşitli kullanımlara örnek vermeye çalışacağım.

React Query Başarısız Sorguların Yeniden Denenmesi

Talep edilen çağrı bir çok sebepten dolayı başarısız olabilir. Başarısız sorguların error throw ettiğini varsayarak devam ediyorum.

Eğer fetch() ile API çağrısı yapıyorsanız server durumu hatalarını kendiniz kontrol etmeniz gerekiyor.

Sorgunuz başarısız olduktan sonra reactQuery varsayılan olarak 3 kez daha çağrı denemesi yapar. Güzel olan tarafı ise bunu oldukça kolay yapılandırabilirsiniz. Konfigürasyon ayarlarına aşağıdaki örnekte bakalım.

 import { useQuery } from 'react-query'

// retry = false
// retry = true
// retryDelay: 1000 //her bir deneme için araya 1 saniye koyacaktır.
 const result = useQuery(['todos', 1], fetchTodoListPage, {
   retry: 10, // Hata döndürmeden önce 10 kez deneme yapacaktır ve 10.denemeden sonra hata //dönecektir.
 })

React Query Sayfalı Sorgular

Önceki yazımda array ile eşsiz anahtar üretip sorgulama yapmaktan bahsetmiştim.

 const result = useQuery(['projects', page], fetchProjects)

Fakat bu şekilde sayfalı veriyi çağırmak her yeni sayfada success durumundan isLoading durumuna geçeceği için kullanıcı deneyimi açısından uygun bir yaklaşım olmayacaktır.

Bu noktada React Query bize keepPreviousData seçeneğini sunmakta.

 const result = useQuery(['projects', page], fetchProjects,{keepPreviousData:true})

Bu parametreyi verdiğimiz zaman ise yeni veri gelene kadar eski verinin success durumunu korumaktadır. Burada verinin güncelliğini ise kontrol etmemiz için isPreviousData durumu sağlanıyor.

const {isPreviousData} = result;

isPreviousData Boolean bir değer olup sayfa taleplerine göre değeri değişmektedir.

Bir sonraki React Query özelliğinde görüşmek üzere.