ts-data-fetching

When to Use This Skill

Use when you need to:

• Fetch server data into a React component instead of hand-rolling useEffect + useState + a loading boolean
• Structure query keys so a mutation can invalidate exactly the cache it affected
• Update the UI instantly on a mutation, before the server responds, with a correct rollback on failure
• Decide whether fetched data belongs in TanStack Query or a client store

Trigger keywords: TanStack Query, React Query, useQuery, useMutation, query key, queryClient, invalidateQueries, optimistic update, onMutate, staleTime, cacheTime, refetch, QueryClientProvider, prefetchQuery.

Freshness rule: TanStack Query v4 → v5 renamed several options (cacheTime → gcTime, object-only function signatures) — recheck the installed @tanstack/react-query major version's docs before writing new query code.