Tanstack Query, AKA React Query, React uygulamalarında veri getirmek için popüler bir kütüphanedir. React Query, web uygulamalarında verileri alma, önbelleğe alma ve güncelleme sürecini basitleştirir. Bu makale, bir React uygulamasında veri getirmeyi işlemek için React Query'yi kullanmayı tartışacaktır.

React Query'yi Yükleme ve Ayarlama

React Query'yi npm veya yarn kullanarak kurabilirsiniz. npm kullanarak kurmak için terminalinizde aşağıdaki komutu çalıştırın:

npm ben @tanstack/react-query

İplik kullanarak kurmak için terminalinizde aşağıdaki komutu çalıştırın:

yarn @tanstack/react-query ekleyin

React Query kitaplığını kurduktan sonra, tüm uygulamayı Sorgu İstemcisi Sağlayıcısı bileşen. bu Sorgu İstemcisi Sağlayıcısı bileşeni tüm uygulamanızı sarar ve Sorgu İstemcisi tüm alt bileşenlerine.

bu Sorgu İstemcisi React Query'nin merkezi parçasıdır. bu Sorgu İstemcisi tüm veri alma ve önbelleğe alma mantığını yönetir. bu

Sorgu İstemcisi Sağlayıcısı bileşen alır Sorgu İstemcisi bir destek olarak ve uygulamanızın geri kalanı için kullanılabilir hale getirir.

kullanmak için Sorgu İstemcisi Sağlayıcısı ve Sorgu İstemcisi uygulamanızda, bunları şu adresten içe aktarmalısınız: @tanstack/react-query kütüphane:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak Uygulama itibaren'./Uygulama';
içe aktarmak { QueryClientProvider, QueryClient } itibaren"@tanstack/react-query";
sabit sorgu İstemcisi = yeni QueryClient();
ReactDOM.createRoot(belge.getEementd('kök')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

useQuery Hook'u anlama

bu sorguyu kullan kanca, bir sunucudan veya API'den veri getiren React Query kitaplığı tarafından sağlanan bir işlevdir. Aşağıdaki özelliklere sahip bir nesneyi kabul eder: sorguAnahtarı (sorgunun anahtarı) ve sorguFn (getirmek istediğiniz verileri çözümleyen bir söz döndüren bir işlev).

bu sorguAnahtarı sorguyu tanımlar; uygulamanızdaki her sorgu için benzersiz olmalıdır. Anahtar, dize, nesne veya dizi gibi herhangi bir değer olabilir.

kullanarak veri almak için sorguyu kullan kancadan içe aktarmanız gerekir. @tanstack/react-query kütüphane, geçmek sorguAnahtarı ve kullan sorguFn verileri bir API'den almak için.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak eksenler itibaren"eksen";
içe aktarmak { sorguyu kullan } itibaren"@tanstack/react-query";
işlevEv() {
sabit postQuery = useQuery({
 sorguAnahtarı: ['gönderiler'],
 sorguFn: zaman uyumsuz () => {
sabit cevap = beklemek eksenler.get(' https://jsonplaceholder.typicode.com/posts');
sabit veri = beklemek yanıt.veri;
geri dönmek veri;
 }
 })
eğer( postQuery.isLoading ) geri dönmek ( <h1>Yükleniyor...h1>)
eğer(postQuery.isError) geri dönmek (<h1>Veriler yüklenirken hata oluştu!!!h1>)

geri dönmek (



Anasayfa</h1>
 { postQuery.data.map( (öğe) => ( <Panahtar={öğe.id}>{Ürün başlığı}P>)) }
 </div>
 )
}
ihracatvarsayılan Ev;

bu sorguyu kullan kanca, sorgu hakkında bilgi içeren bir nesne döndürür. bu sorgu sonrası nesne içerir yükleniyor, hata, Ve Başarı devletler. bu yükleniyor, hata, Ve Başarı eyaletler, veri alma sürecinin yaşam döngüsünü yönetir. bu postQuery.data özelliği, API'den getirilen verileri içerir.

bu yükleniyor durum, sorgunun şu anda veri yükleyip yüklemediğini gösteren bir boole değeridir. Ne zaman yükleniyor durum doğru, sorgu devam ediyor ve istenen veriler mevcut değil.

bu hata durum ayrıca veri alımı sırasında bir hata oluşup oluşmadığını gösteren bir boole değeridir. Ne zaman hata doğruysa, sorgu veriyi alamadı.

bu Başarı durum, sorgunun verileri başarıyla alıp almadığını gösteren bir boole değeridir. Ne zaman Başarı doğruysa, alınan verileri uygulamanızda görüntüleyebilirsiniz.

erişebileceğinizi unutmayın. sorguAnahtarı kullanmak sorguFn. bu sorguFn tek bir argüman alır. Bu bağımsız değişken, API isteği için gerekli parametreleri içeren bir nesnedir. Bu parametrelerden biri, sorguAnahtarı.

Örneğin:

sorgu kullan({
 sorguAnahtarı: ['gönderiler'],
 sorguFn: zaman uyumsuz (nesne) => {
konsol.log(obj.queryKey );
 }
 })

Eski Verilerle Başa Çıkma

React sorgusu, eski verilerle başa çıkmak için birçok yol sağlar. React Query kitaplığı, getirilen veriler eskidiğinde API'nize otomatik olarak yeni bir getirme isteği yapılmasını sağlar. Bu, sürekli olarak en güncel verileri oluşturduğunuzu garanti eder.

Verilerinizin ne kadar hızlı eskidiğini ve her bir otomatik getirme isteği arasındaki zaman aralığını aşağıdakileri kullanarak denetleyebilirsiniz: eski zaman Ve yeniden getirme aralığı seçenekler. bu eski zaman seçeneği, önbelleğe alınan verilerin eski hale gelmeden önce geçerli olduğu milisaniye sayısını belirten bir özelliktir.

bu yeniden getirme aralığı seçeneği, React Query kitaplığının her bir otomatik getirme isteği arasındaki milisaniye sayısını belirten bir özelliktir.

Örneğin:

sorgu kullan({
 sorguAnahtarı: ['...'],
 sorguFn: () => {...},
 eski zaman: 1000;
})

Bu örnekte, eski zaman 1000 milisaniyedir (1 saniye). Alınan veriler 1 saniye sonra eski hale gelecek ve ardından React Query kitaplığı API'ye başka bir getirme isteği yapacaktır.

Burada kullandığınız yeniden getirme aralığı her otomatik getirme isteği arasındaki zaman aralığını kontrol etme seçeneği:

sorgu kullan({
 sorguAnahtarı: ['...'],
 sorguFn: () => {...},
 refetchInterval: 6000;
})

bu yeniden getirme aralığı 6000 milisaniyedir (6 saniye). React Query, 6 saniye sonra önbelleğe alınan verileri güncellemek için yeni bir getirme isteğini otomatik olarak tetikleyecektir.

useMutation Kancasını Anlamak

bu kullanımMutasyonu kanca, React Query kitaplığında güçlü bir araçtır. BT asenkron işlem gerçekleştirir bir sunucuda veri oluşturma veya güncelleme gibi mutasyonlar. Kullanmak kullanımMutasyonu kanca, mutasyonun yanıtına göre uygulama durumunuzu ve kullanıcı arayüzünüzü kolayca güncelleyebilirsiniz.

Aşağıda, bir oluşturduk Gönderi Ekle oluşturan bileşen giriş alanı ve gönder düğmesi olan form. Bu form bileşeni, durumu güncellemek için useMutation kancasını kullanacaktır:

içe aktarmak Tepki itibaren'tepki'
işlevGönderi Ekle() {
sabit[post, setPost] = React.useState({
 başlık: ""
 })
işlevkoluDeğiştir(etkinlik) {
 gönderiyi ayarla( (öncekiDevlet) => ({
 ...öncekiDevlet,
 [event.target.name]: event.target.value
 }) )
 }
geri dönmek (



 tür="metin"
 yer tutucu='Başlık ekle'
 isim='başlık'
 onChange={handleChange} 
 değer={post.title}
 />
Gönderi Ekle</button>
 </form>
 )
}
ihracatvarsayılan Gönderi Ekle;

İçinde Gönderi Ekle bileşen bir durumdur postalamak bir özelliği olan bir nesne olarak hizmet eden, başlık.

bu koluDeğiştir işlev durumu günceller postalamak kullanıcılar giriş alanlarına her yazdıklarında. oluşturduktan sonra Gönderi Ekle bileşeni içe aktarıyoruz kullanımMutasyonu kancalayın ve API'yi güncellemek için kullanın.

Örneğin:

içe aktarmak { kullanımMutasyon } itibaren"@tanstack/react-query"
içe aktarmak eksenler itibaren"eksen";
sabit newPostMutation = useMutation({
 mutasyonFn: zaman uyumsuz () => {
sabit cevap = beklemek eksen.post('', {
 başlık: post.title,
 });
sabit veri = yanıt.veri;
geri dönmek veri;
 }
 })

bu kullanımMutasyonu kanca, yeni bir gönderi oluşturmak için HTTP isteğini işler. bu yeniMutasyon Sonrası sabit, mutasyon işlevini ve yapılandırma seçeneklerini temsil eder.

bu mutasyonFn API uç noktasına bir POST isteği gönderen eşzamansız bir işlevdir. İstek, şunu içeren bir nesne içeriyor: başlık gelen değer postalamak nesne.

çalıştırmak için mutasyonFn, aramanız gerekecek newPostMutation.mutate() yöntem:

sabit işlemeGönder = zaman uyumsuz (olay) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
geri dönmek (


 tür="metin"
 yer tutucu='Başlık ekle'
 isim='başlık'
 onChange={handleChange} 
 değer={post.title}
 />
Gönderi Ekle</button>
 </form>
 )
}

Formu göndermek, işlemeGönder işlev. bu işlemeGönder işlevi, mutasyon işlevini tetikleyen eşzamansız bir işlevdir newPostMutation.mutate().

Tanstack Query ile Verimli Veri Alma

Bu makale, tanstack/react-query kitaplığı kullanılarak bir React uygulamasında veri getirmenin nasıl ele alınacağını araştırmaktadır.

tanstack/react-query kitaplığı, React uygulamalarında verileri almak ve önbelleğe almak için güçlü ve esnek bir araç sağlar. Kullanımı kolaydır ve önbelleğe alma özellikleri onu verimli ve duyarlı hale getirir.

İster küçük bir kişisel proje, ister kapsamlı bir kurumsal uygulama oluşturuyor olun, tanstack/react-query kitaplığı, verileri etkili ve verimli bir şekilde yönetmenize ve görüntülemenize yardımcı olabilir. React ile birlikte Next.js, veri getirmeyi işlemek için birkaç yerleşik işlem ve üçüncü taraf kitaplıkları da sağlar.