{"enrichment":{"faq":[{"a":"TanStack Query v5 requires wrapping your app with QueryClientProvider. First, create a QueryClient instance, then wrap your component tree with <QueryClientProvider client={queryClient}>. Configure cache behavior via QueryClient defaults\u2014set staleTime and gcTime (formerly cacheTime) to control when data becomes stale and when it's garbage collected. Install @tanstack/react-query and set up devtools with @tanstack/react-query-devtools for debugging.","q":"How do I set up TanStack Query v5 in a React project?"},{"a":"TanStack Query v5 renamed cacheTime to gcTime and changed hook option syntax to an object-based format. The isPending flag replaces isLoading for distinguishing pending states. Ensure all queryKey definitions follow array syntax consistently. Review your useQuery and useMutation calls\u2014v5 requires explicit option objects rather than positional parameters. Update imports from react-query to @tanstack/react-query.","q":"What are the key breaking changes migrating from React Query v4 to TanStack Query v5?"},{"a":"TanStack Query useQuery handles fetching and caching: pass a queryKey array and queryFn. Data automatically caches based on staleTime and gcTime settings. useMutation manages side effects like POST/PUT requests. After mutations, call queryClient.invalidateQueries({queryKey: [...]}) to refresh related data. Use the onSuccess callback to trigger invalidations or optimistic updates immediately after mutation completion.","q":"How do I implement data fetching and caching with useQuery and useMutation?"},{"a":"TanStack Query v5 uses isPending to indicate any pending request state, replacing v4's isLoading. isPending returns true during initial fetch and refetches. Use isPending for general loading UI. The isFetching flag separately tracks background refetches, useful for showing subtle indicators while cached data remains visible. This separation lets you display stale data with a refresh indicator instead of full loading states.","q":"What's the difference between isPending and isLoading in TanStack Query v5?"},{"a":"TanStack Query prefetching uses queryClient.prefetchQuery() to load data before queries run. Set enabled: false on dependent queries, then enable them once parent data loads. Use useQuery with select to transform data without refetching. For infinite scroll, useInfiniteQuery with getNextPageParam handles pagination. Prefetch next pages during scroll to avoid waterfalls and provide seamless pagination.","q":"How do I prevent request waterfalls and implement prefetching in TanStack Query v5?"},{"a":"Configure staleTime to control when cached data becomes stale\u2014higher values reduce refetches. Use queryClient.invalidateQueries() after mutations to refresh specific queries by key. Set gcTime appropriately; too low causes unnecessary refetches, too high wastes memory. For error handling, use throwOnError in query options or catch errors in onError callbacks. Monitor background refetch indicators with isFetching to show users when data updates.","q":"How do I handle stale data and invalidation errors in TanStack Query v5?"}],"shadow_tags":["server-state-management","async-data-fetching","cache-invalidation","query-synchronization","mutation-patterns","pagination-infinite-scroll","request-deduplication","stale-data-handling","offline-first-caching","suspense-boundaries"],"summary_rewrite":"TanStack Query v5 handles server state management in React through data fetching, caching, and mutation patterns. Learn QueryClient setup, hook usage with the v5 object syntax, and common migration issues from v4."},"files":[{"bytes":31679,"path":"plugins/tanstack-query/skills/tanstack-query/SKILL.md","sha256":"c6e3e3319f1f2d82362edee03384765f2e75a6c199c9ef42558ecc2badace977","url":"https://skillfed.io/files/secondsky/claude-skills/tanstack-query/e2d0e330/SKILL.md"}],"id":"secondsky/claude-skills/tanstack-query","links":{"html":"https://skillfed.io/secondsky/claude-skills/tanstack-query","md":"https://skillfed.io/secondsky/claude-skills/tanstack-query.md","repo":"https://github.com/secondsky/claude-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":29,"language":"TypeScript","last_updated":"2026-07-25","license":"MIT","name":"tanstack-query","publisher":"secondsky","stars":196},"relations":{"similar":[{"id":"tanstack-skills/tanstack-skills/tanstack-query"},{"id":"bobmatnyc/claude-mpm-skills/tanstack-query"},{"id":"patricio0312rev/skills/tanstack-query-setup"},{"id":"AsyrafHussin/agent-skills/state-management"},{"id":"Mindrally/skills/tanstack-query"},{"id":"oakoss/agent-skills/tanstack-query"},{"id":"gohypergiant/agent-skills/accelint-tanstack-query-best-practices"},{"id":"supabase/supabase/studio-queries"},{"id":"emanueleielo/deepagents-open-lovable/data-fetching"},{"id":"secondsky/claude-skills/pinia-colada"}]},"slug":{"owner":"secondsky","repo":"claude-skills","skill":"tanstack-query"},"version":"e2d0e330"}