BitWithBite
React · Quick Reference
Lesson 17 — React Query Cheat Sheet
In one line: useQuery handles fetching/caching/loading automatically; useMutation handles create/update/delete.
Key Ideas
1useQuery. Automatic loading, error, caching.
2staleTime. How long cached data stays "fresh."
3useMutation. For create/update/delete.
4invalidateQueries. Refetch affected data after a change.
Example
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"}),
onSuccess: () => queryClient.invalidateQueries(["courses"]),
});