← ClaudeAtlas

tanstack-querylisted

Use for TanStack Query v5 server-state code: keys, options, freshness, mutations, invalidation, optimistic updates, pagination, cancellation, or SSR. Not for generic React state, performance, routers, or backend caches.
mblauberg/provenant · ★ 2 · API & Backend · score 68
Install: claude install-skill mblauberg/provenant
# TanStack Query Design TanStack Query as a server-state boundary, not a fetch-hook convenience. This skill targets `@tanstack/react-query` v5. Confirm the installed major and framework adapter before changing APIs; use current official documentation for version-sensitive behaviour. ## Core rules - Query keys are top-level arrays, JSON-serialisable and complete: include every input that can change the returned data. Centralise families without hiding their hierarchy. - Co-locate `queryKey` and `queryFn` with `queryOptions`; reuse that contract for hooks, prefetching, invalidation and cache updates. - Query functions throw/reject on failure and consume the supplied `AbortSignal` when the transport supports cancellation. - Choose `staleTime` from data semantics. Choose `gcTime` from inactive-cache retention needs. Do not suppress focus/reconnect refetches to conceal a poor freshness policy. - Prefer targeted invalidation after mutations. Use `setQueryData` only when the response is canonical for the exact cached shape. - Optimistic UI through mutation variables is simpler than cache mutation. If updating the cache, cancel matching queries, snapshot, update immutably, restore on error and invalidate on settlement. - Keep initial loading, background fetching, empty data and errors distinct. Never blank usable data merely because `isFetching` is true. - Avoid serial request waterfalls: start independent queries together and prefetch at route or intent boun