React Query Nasıl Kullanılır: Temel Kavramlar ve Uygulama Önerileri

React Query, React uygulamalarında sunucu durumlarını yönetmeyi kolaylaştıran bir kütüphanedir. API istekleri, caching, background updates ve diğer asenkron işlemleri kolaylıkla yürütebilirsiniz. Bu makalede React Query'nin nasıl kullanılacağına dair temel bilgileri bulacaksınız.

Kurulum

React Query'yi projenize eklemek için npm veya yarn kullanabilirsiniz.

npm install react-query
# veya
yarn add react-query

Temel Kullanım

Query Hook'u Kullanımı

React Query'nin en temel hook'u useQuery'dir. Örneğin, bir API'den veri çekmek için aşağıdaki gibi kullanılabilir:

import { useQuery } from 'react-query';

function App() {
const { data, error, isLoading } = useQuery('myData', fetchMyData);

if (isLoading) return 'Loading...';
if (error) return 'An error has occurred';

return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}

async function fetchMyData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}

Mutasyonlar

Veri ekleme, güncelleme veya silme gibi işlemler için useMutation hook'u kullanılır.

import { useMutation, useQuery } from 'react-query';

function App() {
const { data } = useQuery('myData', fetchMyData);
const mutation = useMutation(addData);

return (
<div>
<button
onClick={() => {
mutation.mutate({ id: 1, name: 'New Item' });
}}
>
Add Data
</button>
{/* ... */}
</div>
);
}

async function addData(newData) {
const res = await fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newData),
});
return res.json();
}

Query Invalidasyonu ve Yeniden Yükleme

Bir mutasyon sonrası sorguları yeniden yüklemek veya önbelleği güncellemek için invalidateQueries fonksiyonu kullanılabilir.

const mutation = useMutation(addData, {
onSuccess: () => {
queryClient.invalidateQueries('myData');
},
});

Önbellek Yönetimi

React Query, otomatik önbellek yönetimi sağlar. Fakat isteğe bağlı olarak önbellek süresi, yeniden deneme sayısı gibi özelleştirmeler de yapabilirsiniz.

const { data } = useQuery('myData', fetchMyData, {
staleTime: 30000, // 30 saniye
cacheTime: 60000, // 60 saniye
retry: 1,
});

Sonuç

React Query, API ve sunucu verileriyle çalışırken yüksek seviyeli bir deneyim sunar. Caching, mutasyonlar ve query invalidasyonu gibi çeşitli özelliklerle, veri yükleme ve güncelleme işlemleri oldukça kolaylaşır. Kütüphanenin daha birçok özelliği ve detayı vardır, bu makalede temel konulara değinilmiştir. Ancak bu temeller, React Query ile çalışmaya başlamak için yeterli olacaktır.