آپ React Native میں نیٹ ورکنگ اور APIs کو کیسے سنبھالتے ہیں؟

Question

Accepted Answer

React Native ایپس اکثر **APIs** کو کال کرتی ہیں — built-in **fetch** (یا **axios**) استعمال کرتے ہوئے، async/await، اور responses، errors، اور loading states کو ہینڈل کرتے ہوئے۔ نیٹ ورکنگ web JavaScript میں ہی کی طرح کام کرتی ہے، اکثر caching کے لیے React Query کے ساتھ ملائی جاتی ہے۔ ## fetch کے ساتھ requests بنانا ```jsx // fetch is built-in (like the web); use async/await async function getUsers() { try { const response = await fetch('https://api.example.com/users'); if (!response.ok) throw new Error('Request failed'); // check status const data = await response.json(); // parse JSON return data; } catch (error) { console.error(error); // handle errors throw error; } } ``` `fetch` (built-in) HTTP requests بناتا ہے؛ `await response.json()` JSON کو parse کرتا ہے؛ `response.ok` کو چیک کرنا اور try/catch سے errors کو ہینڈل کیا جاتا ہے۔ `axios` ایک مشہور متبادل ہے (interceptors، بہتر API)۔ ## loading/error/data states کو منظم کرنا ```jsx function Users() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { getUsers().then(setData).catch(setError).finally(() => setLoading(false)); }, []); if (loading) return ; // loading spinner if (error) return Error; // error UI return ; // show data } ``` ایپس کو اچھے UX کے لیے **loading، error، اور data** states کو ہینڈل کرنا چاہیے (loading کے دوران spinner، ناکامی پر error message، کامیابی پر data)۔ ## React Query (server data کے لیے تجویز کردہ) ```text → React Query / TanStack Query handles fetching + CACHING + loading/error states + refetching + sync automatically → much less boilerplate than manual useState/useEffect → Recommended for managing server data (vs hand-rolling every fetch) ``` ## یہ کیوں اہم ہے React Native میں نیٹ ورکنگ اور APIs کو سمجھنا اہم ہے کیونکہ **زیادہ تر ایپس backends کے ساتھ بات چیت کرتی ہیں** — ڈیٹا fetch کرنا اور بھیجنا تقریباً عالمگیر ضرورت ہے، تو یہ ضروری عملی علم ہے۔ ایپس مسلسل API calls کرتی ہیں (ڈیٹا لوڈ کرنا، forms جمع کرنا، authentication)، اور React Native نیٹ ورکنگ web JavaScript کی طرح کام کرتی ہے (web developers کے لیے فائدہ مند)۔ **requests بنانا** سمجھنا (built-in `fetch` یا `axios`، async/await کے ساتھ، JSON parse کرنا، اور status codes کو چیک کرنا) اور **errors کو ہینڈل کرنا** (try/catch، `response.ok` کو چیک کرنا) بنیادی مہارت ہے، کیونکہ network calls بنیادی ہیں اور اکثر ناکام ہوتی ہیں۔ avgaminخطرناک طور پر، **loading، error، اور data states کو منظم کرنے** کا طریقہ سمجھنا اچھے UX کے لیے ضروری ہے: fetching کے دوران loading spinner (ActivityIndicator) دکھانا، ناکامی پر error message، اور کامیابی پر data — ان states کو صحیح طریقے سے ہینڈل کرنا وہی ہے جو ایپس کو پالش شدہ محسوس کراتا ہے نہ کہ ٹوٹی ہوئی (loading کے دوران خالی screen، یا error پر crash، برا UX ہے)۔ **React Query/TanStack Query** کو سمجھنا تیزی سے قیمتی ہو رہا ہے: یہ fetching، **caching**، loading/error states، refetching، اور synchronization کو خودکار طور پر ہینڈل کرتا ہے، جو ہر fetch کو useState/useEffect سے manually منظم کرنے کے boilerplate کو بہت کم کرتا ہے — اور جدید React Native میں **server data کے لیے تجویز کردہ approach** ہے، جو اس تسلیم کو ظاہر کرتا ہے کہ server data کو dedicate handling سے فائدہ ہوتا ہے (caching، sync)۔ چونکہ زیادہ تر React Native ایپس APIs کے ساتھ بات چیت کرتی ہیں (تقریباً عالمگیر ضرورت) اور اسے اچھی طرح کرنا (fetch/axios، error handling، اور خاص طور پر good UX کے لیے loading/error/data states کو منظم کرنا، بہترین طور پر React Query سے caching کے لیے) functional، polished ایپس کے لیے ضروری ہے، React Native میں نیٹ ورکنگ اور APIs کو سمجھنا ضروری ہے، بار بار استعمال ہونے والی عملی معلومات — ایک بنیادی مہارت جو تقریباً ہر حقیقی ایپ میں ضرورت ہے جو ڈیٹا fetch کرتی ہے، backend ڈیٹا کو قابل اعتماد اور suavely دکھانے والی ایپس بنانے کے لیے اہم ہے، React Query جدید approach ہونے کے ناطے server data کو منظم کرنے کے لیے تجویز کردہ ہے۔