Simple Axios Data Fetch (Best Practice)

আমি তোমাকে Axios ব্যবহার করে React-এ API data fetch করার সবচেয়ে সহজ ও সঠিক উপায় দেখাচ্ছি, তোমার দেওয়া API অনুযায়ী:

http://127.0.0.1:8000/api/visitor/get/concern

---

✅ Step-1: Axios install করো

(যদি আগে না করে থাকো)

npm install axios

---

✅ Step-2: Axios import করো

import axios from "axios";
import { useEffect, useState } from "react";

---

✅ Step-3: Simple Axios Data Fetch (Best Practice)

🔹 Example Component

import axios from "axios";
import { useEffect, useState } from "react";

const API_URL = "http://127.0.0.1:8000/api/visitor/get/concern";

export default function ConcernVisitors() {
  const [concerns, setConcerns] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchConcernVisitors = async () => {
      try {
        const response = await axios.get(API_URL);

        // Laravel usually returns: { status, data }
        setConcerns(response.data.data);
      } catch (err) {
        setError("Failed to fetch concern data");
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchConcernVisitors();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p className="text-red-500">{error}</p>;

  return (
    <div>
      <h3 className="font-bold mb-4">Concern Wise Visitors</h3>

      {concerns.map((item, index) => (
        <div key={index} className="flex justify-between border-b py-2">
          <span>{item.concern_name}</span>
          <span className="font-bold">{item.total_visits}</span>
        </div>
      ))}
    </div>
  );
}

---

🔍 Axios Response Structure (Laravel)

Laravel API সাধারণত এমন হয়:

{
  "status": true,
  "data": [
    {
      "concern_name": "Skin Care",
      "total_visits": 123
    }
  ]
}

➡️ তাই Axios এ access করতে হবে:

response.data.data

---

✅ Step-4: Axios with Base URL (Recommended)

🔹 src/services/api.js

import axios from "axios";

const api = axios.create({
  baseURL: "http://127.0.0.1:8000/api",
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

🔹 Use it in Component

import api from "../services/api";

const response = await api.get("/visitor/get/concern");
setConcerns(response.data.data);

---

✅ Step-5: Axios with Env (Vite)

.env

VITE_API_BASE_URL=http://127.0.0.1:8000/api

Component

const API = import.meta.env.VITE_API_BASE_URL;

await axios.get(`${API}/visitor/get/concern`);

---

⚠️ Common Errors & Fix

❌ CORS error

👉 Laravel side:

// config/cors.php
'allowed_origins' => ['*'],

---

❌ 404 Not Found

✔ Route check করো:

php artisan route:list

---

❌ response.data undefined

✔ Always log:

console.log(response.data);

---

🧠 Best Practice (Your Dashboard Case)

Since তুমি analytics dashboard বানাচ্ছো:

✔ Axios instance ব্যবহার করো
✔ API একবার call করে data reuse করো
✔ Loading & error handle করো

---

🟢 Final Minimal Version (Most Used)

useEffect(() => {
  axios
    .get("http://127.0.0.1:8000/api/visitor/get/concern")
    .then(res => setConcerns(res.data.data))
    .catch(err => console.error(err));
}, []);

---

চাও তো আমি:

• 🔥 এই API তোমার existing dashboard এ integrate করে দিতে পারি

• 📊 Top 3 / Top 10 concern filter করে দিতে পারি

• ⚡ Axios interceptor + auth token setup করে দিতে পারি

বললেই হবে 😊