tanstack-query

Install @tanstack/react-query, create a QueryClient with defaultOptions like staleTime and retry, then wrap your app in QueryClientProvider. Optionally add ReactQueryDevtools for debugging cache state.

In onMutate, cancel outgoing queries with cancelQueries, snapshot the previous cache via getQueryData, then setQueryData with the new value. Roll back in onError using the returned context and invalidate in onSettled.

staleTime controls how long data is considered fresh before refetching, defaulting to 0. gcTime controls how long unused data stays in cache before garbage collection, defaulting to 5 minutes. gcTime should exceed staleTime.

Yes, useInfiniteQuery handles cursor-based infinite scrolling with getNextPageParam and fetchNextPage. For numbered pagination, use useQuery with placeholderData set to the previous data to avoid loading flicker.

Queries only refetch when invalidated or stale. Call queryClient.invalidateQueries with the matching query key prefix in the mutation's onSuccess or onSettled callback to mark cached data stale and trigger refetch.

Yes, prefetch queries on the server with a fresh QueryClient, then pass dehydrate(queryClient) to HydrationBoundary on the client. This hydrates the cache so useQuery resolves immediately without a client-side fetch.