React Query: APIs-dan Oson Ma'lumot Fetching Qilish
React Query
React Query — bu data fetching jarayonini yaxshiroq qilish uchun mo‘ljallangan React Hooklar kutubxonasi. Quyidagi built-in xususiyatlarni o‘z ichiga oladi:
-
Caching of data for future use.
-
Refetching.
-
Prefetching and pagination.
-
Request cancellation.
-
Detecting outdated (stale) data and updating it.
Nimasi bilan farq qiladi?
Odatda bilamizki, data fetching qilishda eng ko‘p qo‘llaniladigan usullar bular Fetch API va Axios kabi kutubxonalar. Ular API ma’lumotlarini request qilishda juda qulay. Lekin, caching yoki pagination xususiyatlarini o‘z ichiga olmaydi. Bunday xususiyatlarni qo‘lda (manually) yozish kerak bo‘ladi. React Queryning shunday foydali xususiyatlaridan foydalanib, kodni oson yozish mumkin.
useQuery()
React Query API bilan ishlash uchun useQuery funksiyasini taqdim etadi. Bu ikkita parametrni qabul qiladigan maxsus React Hook. U quyidagicha ko'rinadi:
index.ts
const {data, error, isLoading} = useQuery(key, fetcher);
Key — bu so‘rovni yagona tarzda aniqlaydigan narsa, fetcher esa API-ni Fetch yoki Axios kabi kutubxonalar yordamida chaqiruvchi funksiyadir. Hook data, error va isLoading kabi xususiyatlarni qaytaradi. Quyida barcha mavjud xususiyatlar keltirilgan:
index.ts
const {
data, // Qaytarilgan ma'lumot.
error, // Xato haqida ma'lumot.
failureCount, // Xatoliklar soni.
isError, // Xato bo'lish holati.
isFetchedAfterMount, // Montajdan keyin ma'lumot olinishi.
isFetching, // Ma'lumot olinayotgani.
isIdle, // Bo'sh holat.
isLoading, // Yuklanayotganligi.
isPreviousData, // Avvalgi ma'lumotlar.
isStale, // Eskirgan ma'lumot.
isSuccess, // Muaffaqiyatli so'rov.
refetch, // Qayta olish funksiyasi.
remove, // O'chirish funksiyasi.
status // Status (holat).
} = useQuery(key, fetcher);
Foydalanish
Undan qanday foydalanishimiz haqida bir oz gaplashsak.
React Query o'rnatish
Quyidagi buyruq yordamida React Query-ni o'rnatishimiz mumkin:
index.ts
npm install react-query
Provayderni import qilish va sozlash
Hookdan foydalanishdan oldin, QueryClient va QueryClientProvider ni react-query dan import qilishimiz kerak. Keyin, QueryClient ni ishga tushiramiz va asosiy router dagi applicationni QueryClientProvider bilan o'raymiz.
index.ts
// app.js
import {QueryClient, QueryClientProvider} from 'react-query';
// Initialze the client
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<Router>....</Router>
</QueryClientProvider>
);
}
Using the Hook
Endi biz istalgan komponentda useQuery hookni ishlatib ma'lumotlarni olishimiz mumkin:
index.ts
// Component.js
import {useQuery} from 'react-query';
Buni komponentda quyidagicha chaqirishimiz mumkin:
index.ts
import {useQuery} from 'react-query';
function Component() {
// Malumot fetcher funksiyasi
const getFacts = async () => {
const res = await fetch('https://random-facts2.p.rapidapi.com/getfact');
return res.json();
};
// Hook dan foydalanish
const {data, error, isLoading} = useQuery('randomFacts', getFacts);
}
Bu erda randomFacts kalit so'zdir, getFacts esa RapidAPI Hubdagi Random Facts APIdan ma'lumot olish uchun asinxron funksiya.
index.ts
import {useQuery} from 'react-query';
function Component() {
// Malumot fetcher funksiyasi
const getFacts = async () => {
const res = await fetch('https://random-facts2.p.rapidapi.com/getfact');
return res.json();
};
// Hook dan foydalanish
const {data, error, isLoading} = useQuery('randomFacts', getFacts);
// Error va Loading states
if (error) return <div>Request Failed</div>;
if (isLoading) return <div>Loading...</div>;
// Show the response if everything is fine
return (
<div>
<h1>Random Fact:</h1>
<p>{data.randomFact}</p>
</div>
);
}
Xulosa
React Query, React ilovalarida ma'lumotlarni olishda yana bir boshqa bir kutubxonadir.
Written by Avazbek
Web & Frontend developer based in Korea. Passionate about creative solutions and building apps from scratch.