tanstack-query

TanStack Query manages server state through QueryClient setup and useQuery hooks. Install @tanstack/react-query, create a QueryClient instance, wrap your app with QueryClientProvider, then use useQuery with queryKey and queryFn objects to fetch and cache data automatically.

useQuery fetches and caches data automatically with background refetching and synchronization. useMutation handles side effects like POST, PUT, DELETE requests and triggers cache invalidation. Use useQuery for reads and useMutation for writes that modify server state.

TanStack Query v5 replaces staleTime with gcTime for garbage collection and uses object syntax for useQuery configuration. Update imports from react-query to @tanstack/react-query, replace staleTime references, and refactor useQuery calls to object format with queryKey and queryFn.

Yes, optimistic updates in TanStack Query update the cache immediately before the mutation completes, then rollback on failure. Use useMutation's onMutate callback to update QueryClient cache, then handle onSuccess or onError to finalize or revert changes.

Install @tanstack/react-query-devtools to visualize queries, mutations, and cache state in real time. DevTools reveals query timing, refetch behavior, cache invalidation patterns, and error states, helping identify stale data and synchronization problems.

Yes, useInfiniteQuery handles pagination and infinite scroll by managing page cursors and concatenating results across fetches. Configure it with queryKey, queryFn, and getNextPageParam to load additional pages on demand without re-fetching previous data.