SWR से Data Fetching
In this page:
const fetcher = url => fetch(url).then(res => res.json());
const { data, error, isLoading } = useSWR("/api/path", fetcher);Stale-While-Revalidate का Idea
SWR का core idea, और इसका namesake, cached (stale) data को user को तुरंत दिखाना है, जबकि simultaneously background में एक fresh request fire करके इसे revalidate करना है।
यह UI को एक slow connection पर भी instant feel कराता है, fresh data आने पर seamlessly update होते हुए।
उदाहरण: The Stale-While-Revalidate Idea
// Run in your local React project (npm install required)
import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
function UserList() {
const { data, error, isLoading } = useSWR('/api/users', fetcher);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Failed to load</p>;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Key और Fetcher Pattern
useSWR दो arguments लेता है: एक key (आमतौर पर URL, request को identify और cache करने के लिए उपयोग होता है) और एक fetcher function जो actually request perform करता है।
SWR में built-in fetcher include नहीं है — आप एक छोटा function देते हैं, अक्सर fetch() का बस एक thin wrapper।
उदाहरण: The Key and Fetcher Pattern
// Run in your local React project (npm install required)
import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
function Profile({ userId }) {
const { data } = useSWR(userId ? `/api/users/${userId}` : null, fetcher);
return <p>{data ? data.name : 'No user selected'}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Automatic Background Revalidation
By default, SWR situations में automatically data refetch करता है जैसे browser window focus regain करना या network reconnect होना, बिना किसी manual refresh logic के data fresh रखते हुए।
ये behaviors एक third argument के रूप में pass किए गए configuration options के through tune किए जा सकते हैं।
उदाहरण: Automatic Background Revalidation
// Run in your local React project (npm install required)
import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
function LiveData() {
const { data } = useSWR('/api/stats', fetcher, {
revalidateOnFocus: true,
refreshInterval: 5000,
});
return <p>Stat value: {data?.value}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- SWR की key को एक React Query query key syntax के साथ confuse करना — SWR की key आमतौर पर बस URL string ही होती है, एक array नहीं।
- stale-while-revalidate को न समझना — SWR intentionally पहले old cached data दिखाता है, फिर इसे update करता है, हमेशा एक fresh fetch पर block करने के बजाय।
- यह भूल जाना कि fetcher function built-in नहीं है — आपको एक खुद देना होगा (अक्सर एक simple fetch wrapper)।
- SWR stale-while-revalidate HTTP caching strategy के नाम पर एक lightweight data-fetching library है।
- useSWR(key, fetcher) data, error, और isLoading return करता है, background में automatically refetch करते हुए।
- key typically request URL ही होती है, जो हर request को identify और cache करने के लिए उपयोग होती है।
- SWR cached (possibly stale) data तुरंत दिखाता है जबकि silently background में एक fresh copy fetch करता है।
npm install swr चाहिए — इस sandbox में CDN से उपलब्ध नहीं है; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: