onsitesurvey/src/components/Suitable.tsx

21 lines
529 B
TypeScript

'use client'
import { suitableApi } from '@/api/suitable'
import { useQuery } from '@tanstack/react-query'
export default function Suitable() {
const { data, error, isPending } = useQuery({
queryKey: ['suitable-list'],
queryFn: suitableApi.getList,
})
return (
<>
<h1 className="text-4xl font-bold">Suitable</h1>
{error && <div>Error: {error.message}</div>}
{isPending && <div>Loading...</div>}
{data && data.map((item) => <div key={item.id}>{item.product_name}</div>)}
</>
)
}