🗘️ React Query

1-B   2-B   3-B   4-A  |  5 = Fn   6 = Fn   7 = const {data,isLoading}=useQuery({queryKey:["posts"],queryFn:()=>fetch("/api/posts").then(r=>r.json())});   8 = const del=useMutation({mutationFn:id=>fetch(`/api/posts/${id}`,{method:"DELETE"}),onSuccess:()=>queryClient.invalidateQueries(["posts"])});   9 = Because useQuery internally tracks and exposes isLoading/error/data itself — the same boilerplate that would otherwise be re-written with useState+useEffect in every fetching component is handled once, inside the library  |  10 = function Courses(){const {data,isLoading}=useQuery({queryKey:["courses"],queryFn:()=>fetch("/api/courses").then(r=>r.json())});const enroll=useMutation({mutationFn:id=>fetch(`/api/enroll/${id}`,{method:"POST"})});if(isLoading)return <Spinner/>;return data.map(c=><CourseCard key={c.id} {...c} onEnroll={()=>enroll.mutate(c.id)}/>);}