// components/CustomersList.tsx
import { useQuery } from "@tanstack/react-query";
async function fetchCustomers() {
const res = await fetch("/api/customers"); // calls server-side route
if (!res.ok) throw new Error("Failed to fetch customers");
return res.json();
}
export default function CustomersList() {
const { data, isLoading, isError, error } = useQuery(
["customers"],
fetchCustomers
);
if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Error: {error.message}</div>;
return (
<ul>
{data.map((c) => (
<li key={c.id}>
{c.email} — {c.name}
</li>
))}
</ul>
);
}