⚡ React Native (TypeScript) - File-based Backend Connectivity & API Error Handling

React Native অ্যাপ্লিকেশন ডেভেলপমেন্টে Backend API এর সাথে যোগাযোগ করা খুবই গুরুত্বপূর্ণ। এখানে আমরা দেখবো কিভাবে File-based Architecture ব্যবহার করে API কল করবেন এবং Error Handling Strategy ঠিকভাবে implement করবেন।

📌 ১. ফোল্ডার স্ট্রাকচার (File-based Architecture)

Backend Connectivity এর জন্য আমরা ফাইল ভিত্তিক structure ব্যবহার করবো। এটি কোডকে modular ও maintainable রাখে।

/src
 ├─ api/
 │   ├─ apiClient.ts
 │   ├─ userApi.ts
 │   └─ productApi.ts
 ├─ screens/
 │   ├─ HomeScreen.tsx
 │   └─ ProfileScreen.tsx
 └─ components/
     └─ Loader.tsx

এখানে apiClient.ts হবে centralized axios instance, আর userApi.ts ও productApi.ts এ API endpoints define করা থাকবে।

📌 ২. Axios Client Setup

centralized API client তৈরি করুন যাতে base URL এবং common headers maintain করা যায়।

import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://example.com/api",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

export default apiClient;

📌 ৩. API Endpoint File Example

প্রতিটি resource এর জন্য আলাদা ফাইল ব্যবহার করুন। যেমন: userApi.ts

import apiClient from "./apiClient";

export const getUsers = async () => {
  try {
    const response = await apiClient.get("/users");
    return response.data;
  } catch (error: any) {
    throw new Error(error.response?.data?.message || "Unknown API Error");
  }
};

📌 ৪. API Call in Screen with Error Handling

Screen এ API কল করার সময় loading state এবং error handling implement করা খুব গুরুত্বপূর্ণ।

import React, { useEffect, useState } from "react";
import { View, Text, FlatList } from "react-native";
import { getUsers } from "../api/userApi";
import Loader from "../components/Loader";

type User = {
  id: string;
  name: string;
  email: string;
};

const HomeScreen: React.FC = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await getUsers();
        setUsers(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return ;
  if (error) return {error};

  return (
    
       item.id}
        renderItem={({ item }) => (
          
            {item.name}
            {item.email}
          
        )}
      />
    
  );
};

export default HomeScreen;

📌 ৫. Loader Component Example

import React from "react";
import { View, ActivityIndicator } from "react-native";

const Loader: React.FC = () => (
  
    
  
);

export default Loader;

✨ ৬. Output / Expected Behavior

App start করলে Loader দেখাবে।
API call সফল হলে Users list FlatList এ দেখাবে।
API call fail করলে error message centered red text এ দেখাবে।
Modular file-based architecture কোড maintain করা সহজ করে।

✅ এই পদ্ধতি অনুসরণ করলে আপনার React Native অ্যাপে Backend Connectivity হবে secure, scalable এবং error-free।

API Error Handling Strategy