Tepki sorgusu ve tepki-önyükleme-tablosu sonraki (en iyi uygulama) kullanılarak sunucu tarafı sıralama ve sayfalandırma – Josh Software

In: Genel


Bu blogda, kullanarak sunucu tarafı sıralama ve sayfalandırmayı ele alacağım. tepki sorgusu ve tepki-önyükleme-tablo-sonraki.

Genel olarak, verileri sunucudan almak için useQuery kullanmayı tercih ederim,

React Query, sorgu anahtarlarına dayalı olarak sorgu önbelleğe almayı yönetir. Sorgu anahtarları, bir dize kadar basit veya çok sayıda dize ve iç içe nesne dizisi kadar karmaşık olabilir. Sorgu anahtarı, seri hale getirilebilir ve sorgunun verilerine benzersiz olduğu sürece kullanabilirsiniz. “asyncFunction”, sunucudan veri almaktan sorumludur.

Burada, kullanıcının bir sonraki gidebileceği senaryoyu varsayalım. Bu durumda, verileri alırken kullanıcıya yükleyiciyi göstermek yerine, önbelleğe alınmış verileri kullanıcıya gösterebilirsem ne olur? Bu, kullanıcı deneyimini artıracaktır.

Yukarıdaki kavramı bir örnekle anlayalım, Tablo sayfalandırmasında, çoğunlukla kullanıcının bir sonraki sayfaya gidebileceğini tahmin edebilirim, o zaman neden kullanıcının 2. sayfa düğmesine tıklayıp aramasını beklemem gerekiyor? API. bu, yükleyicinin kullanıcı arayüzünde görünmesine neden olur veya API’den 2. sayfa verilerini aşağıdaki gibi alana kadar önceki sayfa bilgisini bile tutabilirim.

Ama sonuçta, bunun tıklama olayından sonra kullanıcı arayüzüne yansıması zaman alacak.

Bu yüzden prefetchQuery kullanacağım, bu, sunucudan veri aldığımız ve önbellekte sakladığımız queryClient yöntemidir.

Bu, verileri asyncFunction kullanarak sunucudan alacak ve sorgu anahtarlarına karşı önbellekte depolayacaktır.

Şimdi demo ile başlayalım.

Kullanarak bir tepki uygulaması oluşturun oluştur-tepki-uygulaması

app.js dosyamızda değişiklik yapalım

Aşağıdaki gibi uygulamamıza bir QueryClient bağlamak ve sağlamak için QueryClientProvider bileşenini kullanın.

özel tablo bileşenimizi oluşturalım

Sahne malzemelerini bu bileşene şu şekilde aktarıyorum –

veri — API çağrısından sonra sunucudan aldığımız yanıt verileri.
sütunlar — Tablonun sütun adıdır
sayfa — Tablonun aktif sayfa numarası
toplam boyut — Sunucuda bulunan toplam kayıt sayısıdır.
tutamaçTabloDeğiştir – Sayfalandırmayı ve sıralamayı idare edecek işleyici,

daha fazla ayrıntı için keşfedin sayfalandırma.

Bir denetleyici oluşturun.

Burada üç durum değişkeni aldım – sayfa, sıralama alanı, sıralama düzeni sayfalandırmayı yönetmek ve sıralamak için. Sayfanın varsayılan değeri 1’dir ve ardından bu parametrelerle API’yi çağırmak için bu değişkenleri özel kancalarımıza iletti.

UseGetData özel kancasından veri almak ve durumu yüklemek için yanıt nesnesini yok ettim.
Bu örnekte, verilerin yapısı aşağıdaki gibidir

Lütfen, Tablo Eklentisine sayfalandırma ve sıralamanın uzaktan gerçekleştirileceği anlamına gelen bir uzak parametre eklediğimi ve adında bir tutamaç işlevi oluşturduğumu unutmayın. tutamaçTabloDeğiştir bu, sayfalandırma ve sıralama düğmesinin her tıklamasında bir çağrı alacak.
bu tutamaç işlevi iki parametre alıyor –
1. type — Bir eylem türüdür. Bizim durumumuzda, ya sayfalandırma ya da sıralama olurdu
2. nesne — Sayfa, sortField ve sortOrder gibi belirli değerleri içerir.
türüne göre API çağrılarına neden olan durum değişkenlerini değiştiriyorum ve şimdi bunun üzerinde konuşalım…

İşte benim özel kancam

Bağımlılık dizisinin nasıl çalıştığının farkındayız. kullanım Etkisi davranır. Aynı düşünce burada da işe yarıyor, sorgu anahtarlarının bir parçası olarak page, sortField ve sortColumn’u geçtim ve bir bağımlılık dizisi gibi davranacak. Yani bu değerlerden herhangi birinin değişmesi durumunda sağlanan geri arama fonksiyonu yardımıyla yeni API çağrısına neden olacaktır.

Bu, tepki-önyükleme-tablo-ileri ve tepki-sorgu kullanılarak sunucu tarafı sayfalandırma ve sıralamanın temel uygulamasıdır.

Ancak bu, sorunumuza uygun bir çözüm değil.
Bir kullanıcı herhangi bir sayfalandırma veya sıralama düğmesine tıkladığında, yeni bir API çağrısı ile sonuçlanacak ve bu nedenle, yanıt olarak yeni verileri alana kadar yükleyici ekranda gösterilecektir ve evet, bu konuda zaten tartışmıştık, biraz değiştirmem gerekiyor useGetData kancamız aşağıdaki gibi –

Ancak tartışıldığı gibi, kullanıcının tıklama olayından sonra kullanıcı arayüzüne yansıması yine zaman alacaktır.
Şimdi bir sonraki sayfa için APIcall yapmak ve bu verileri önbellekte saklamak için queryClient’in prefetchQuery yöntemini kullanacağım.

Bunun için useQuery’ye sağladığımız tüm dinamik anahtarların bağımlılığı ile özel kancamızda useEffect kancasını kullanacağım ve daha fazla verinin olup olmadığını kontrol edeceğim ve aynı şekilde sonraki sayfa numarası için API çağrısını aşağıdaki gibi halledeceğim.

Benim durumumda, staleTime’ı 2 dakikaya ayarladım. bu, 2 dakika boyunca aynı anahtarlarla yeni API çağrısı olmayacağı ve önbellekten gelen verilere başvuracağı anlamına gelir.

Bu şekilde verileri önceden getirebilir ve belirli eski zaman ile önbellekte saklayabiliriz ve kullanıcı bir sonraki sayfaya tıkladığında verileri daha hızlı göstermemize yardımcı olur.

Oh vay, bu kadar ileri gittin! Bu makaleyi beğendiyseniz, konuyu LinkedIn’de beğenebilir veya yeniden paylaşabilirsiniz.

Teşekkürler !

Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]