Konfigurasi Request Global dan Integrasi

src/
├── lib/
│   ├── api.js            ← instance axios + interceptor (satu-satunya tempat)
│   └── queryClient.js    ← konfigurasi QueryClient
├── features/
│   └── todos/
│       ├── todoApi.js    ← fungsi request khusus todos
│       └── useTodos.js   ← custom hook TanStack Query
└── components/

# .env (dipakai di semua mode)
VITE_APP_NAME=Dashboard Tugas

# .env.development (dipakai saat npm run dev)
VITE_API_URL=https://jsonplaceholder.typicode.com

# .env.production (dipakai saat npm run build)
VITE_API_URL=https://jsonplaceholder.typicode.com

import.meta.env.VITE_API_URL; // → "https://jsonplaceholder.typicode.com"
import.meta.env.MODE;         // → "development" atau "production"
import.meta.env.DEV;          // → true saat npm run dev
import.meta.env.PROD;         // → true di hasil build

queryFn: ({ signal }) => api.get("/todos", { signal }).then((r) => r.data),

export const todoKeys = {
  all: ["todos"],
  list: (filter) => ["todos", "list", filter],
  detail: (id) => ["todos", "detail", id],
};

# .env.development
VITE_API_URL=https://jsonplaceholder.typicode.com
VITE_API_TIMEOUT=10000

// src/lib/api.js
import axios from "axios";

const baseURL = import.meta.env.VITE_API_URL;
if (!baseURL) {
  // gagal cepat dengan pesan jelas, daripada request ke "undefined/todos"
  throw new Error("VITE_API_URL belum diatur di file .env");
}

export const api = axios.create({
  baseURL,
  timeout: Number(import.meta.env.VITE_API_TIMEOUT ?? 10000),
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  if (import.meta.env.DEV) console.debug(`[api] ${config.method?.toUpperCase()} ${config.url}`);
  return config;
});

api.interceptors.response.use(
  (res) => res,
  (error) => {
    if (axios.isAxiosError(error)) {
      const status = error.response?.status;
      if (status === 404) error.message = "Data tidak ditemukan.";
      else if (status >= 500) error.message = "Server sedang bermasalah.";
      else if (!error.response) error.message = "Tidak bisa terhubung ke server.";
    }
    return Promise.reject(error);
  }
);

// src/lib/queryClient.js
import { QueryClient } from "@tanstack/react-query";

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      retry: (jumlahGagal, error) => {
        const status = error?.response?.status;
        if (status && status < 500) return false; // 4xx tidak perlu dicoba ulang
        return jumlahGagal < 2;
      },
      refetchOnWindowFocus: import.meta.env.PROD, // saat dev tidak refetch tiap pindah tab
    },
  },
});

// src/features/todos/todoApi.js
import { api } from "../../lib/api";

export const todoKeys = {
  all: ["todos"],
  list: (params) => ["todos", "list", params],
  detail: (id) => ["todos", "detail", id],
};

export async function fetchTodos(params, signal) {
  const { data } = await api.get("/todos", { params, signal });
  return data;
}

export async function fetchTodo(id, signal) {
  const { data } = await api.get(`/todos/${id}`, { signal });
  return data;
}

export async function patchTodo({ id, ...perubahan }) {
  const { data } = await api.patch(`/todos/${id}`, perubahan);
  return data;
}

// src/features/todos/useTodos.js
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { fetchTodo, fetchTodos, patchTodo, todoKeys } from "./todoApi";

export function useTodos(params = { userId: 1, _limit: 10 }) {
  return useQuery({
    queryKey: todoKeys.list(params),
    queryFn: ({ signal }) => fetchTodos(params, signal),
  });
}

export function useTodo(id) {
  return useQuery({
    queryKey: todoKeys.detail(id),
    queryFn: ({ signal }) => fetchTodo(id, signal),
    enabled: Boolean(id), // jangan jalan kalau id belum ada
  });
}

export function useUpdateTodo() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: patchTodo,
    onSuccess: (todoBaru) => {
      // perbarui semua list yang memuat todo ini (jsonplaceholder tidak menyimpan, jadi tidak invalidate)
      queryClient.setQueriesData({ queryKey: ["todos", "list"] }, (lama) =>
        Array.isArray(lama) ? lama.map((t) => (t.id === todoBaru.id ? todoBaru : t)) : lama
      );
      queryClient.setQueryData(todoKeys.detail(todoBaru.id), todoBaru);
    },
  });
}

// src/features/todos/TodoList.jsx, komponen jadi sangat bersih
import { useTodos, useUpdateTodo } from "./useTodos";

export function TodoList() {
  const { data: todos = [], isPending, isError, error } = useTodos();
  const update = useUpdateTodo();

  if (isPending) return <p>Memuat...</p>;
  if (isError) return <p className="text-red-600">{error.message}</p>;

  return (
    <ul className="space-y-1">
      {todos.map((t) => (
        <li key={t.id}>
          <label className="flex gap-2">
            <input
              type="checkbox"
              checked={t.completed}
              onChange={() => update.mutate({ id: t.id, completed: !t.completed })}
            />
            {t.title}
          </label>
        </li>
      ))}
    </ul>
  );
}
// → 10 tugas milik user 1. Mencentang memanggil PATCH lalu memperbarui cache list dan detail.