tanstack-query-expert

Wrap your fetch logic in a custom hook calling useQuery with an array-based queryKey and a queryFn that returns a promise. Set staleTime to control background refetching and use the enabled option for dependent queries.

Create a client-side Providers component with QueryClientProvider, then prefetch data in server components using queryClient.prefetchQuery. Pass the dehydrated state through HydrationBoundary so client components read cached data without refetching.

staleTime controls how long data is considered fresh before a background refetch triggers, while gcTime controls how long inactive data stays in memory after components unmount. If gcTime is shorter than staleTime, data is deleted before it becomes stale.

In onMutate, cancel outgoing queries, snapshot the previous cache with getQueryData, and update it with setQueryData. On error, roll back using the snapshot from context, and always invalidate queries in onSettled to resync with the server.

The default staleTime is 0, so queries refetch on every component remount and window focus. Set a global staleTime in QueryClient defaultOptions and disable refetchOnWindowFocus if your data does not change frequently.

Use TanStack Query instead of useEffect for server data fetching. It handles caching, request deduplication, background updates, and loading or error states automatically, eliminating manual synchronization logic.