📡 File-based React Native (TypeScript) এ GET & POST Request Handling

যেকোনো আধুনিক Mobile App-এর জন্য API থেকে ডাটা আনা (GET) এবং ডাটা পাঠানো (POST) অত্যন্ত গুরুত্বপূর্ণ। এই অধ্যায়ে আমরা File-based Structure ব্যবহার করে React Native + TypeScript-এ কীভাবে GET ও POST request handle করতে হয় তা শিখব।

📁 ১. File-based Structure (Recommended)

বড় অ্যাপে API logic আলাদা ফাইলে রাখলে কোড পরিষ্কার ও maintainable হয়।

src/
 ├── api/
 │   └── userApi.ts
 ├── screens/
 │   └── HomeScreen.tsx
 ├── types/
 │   └── user.ts
  

📦 ২. User Type Definition (TypeScript)

আগে আমরা API response-এর জন্য একটি টাইপ বানিয়ে নেই।

export interface User {
  id: number;
  name: string;
  email: string;
}
  

📥 ৩. GET Request (Fetch API)

GET request সাধারণত সার্ভার থেকে ডাটা আনার জন্য ব্যবহার হয়।

🧩 api/userApi.ts

import { User } from "../types/user";

export const getUsers = async (): Promise<User[]> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  return response.json();
};
  

🖥️ HomeScreen.tsx

import { View, Text, FlatList } from "react-native";
import { useEffect, useState } from "react";
import { getUsers } from "../api/userApi";
import { User } from "../types/user";

export default function HomeScreen() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    getUsers().then(setUsers);
  }, []);

  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <Text>{item.name} - {item.email}</Text>
      )}
    />
  );
}
  

✅ Output: স্ক্রিনে User Name ও Email লিস্ট আকারে দেখাবে।

📤 ৪. POST Request (Data Send to Server)

POST request ব্যবহার করে সার্ভারে নতুন ডাটা পাঠানো হয়।

🧩 api/userApi.ts

export const createUser = async (user: Omit<User, "id">) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(user),
  });

  return response.json();
};
  

🖥️ HomeScreen.tsx (POST Usage)

import { Button } from "react-native";
import { createUser } from "../api/userApi";

const addUser = async () => {
  const newUser = {
    name: "Prabir",
    email: "prabir@example.com",
  };

  const result = await createUser(newUser);
  console.log(result);
};

<Button title="Add User" onPress={addUser} />
  

✅ Output: Button ক্লিক করলে নতুন User API তে পাঠানো হবে এবং console এ response দেখা যাবে।

⚠️ ৫. Error Handling (Best Practice)

try {
  const data = await getUsers();
  setUsers(data);
} catch (error) {
  console.error("API Error:", error);
}
  

✨ Summary

• File-based API structure কোড clean রাখে
• GET → ডাটা আনার জন্য
• POST → ডাটা পাঠানোর জন্য
• TypeScript ব্যবহার করলে bug কমে
• Error handling অবশ্যই করবেন

🎯 এই পদ্ধতি ফলো করলে আপনি Professional React Native App তৈরি করতে পারবেন।