Globales Ranking · von 601 Skills
tanstack-query AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill tanstack-query 49
Installationen
TanStack Query
Overview
TanStack Query is an async state manager, not a data fetching library. You provide a queryFn that returns a Promise; React Query handles caching, deduplication, background updates, and stale data management.
When to use: Infinite scrolling, offline-first apps, auto-refetching on focus/reconnect, complex cache invalidation, React Native, hybrid server/client apps.
When NOT to use: Purely synchronous state (useState/Zustand), normalized GraphQL caching (Apollo/urql), server-components-only apps (native fetch), simple fetch-and-display (server components).
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Basic query | useQuery({ queryKey, queryFn }) |
Include params in queryKey |
| Suspense query | useSuspenseQuery(options) |
No enabled option allowed |
| Parallel queries | useQueries({ queries, combine }) |
Dynamic parallel fetching |
| Dependent query | useQuery({ enabled: !!dep }) |
Wait for prerequisite data |
| Query options | queryOptions({ queryKey, queryFn }) |
Reusable, type-safe config |
| Basic mutation | useMutation({ mutationFn, onSuccess }) |
Invalidate on success |
| Mutation state | useMutationState({ filters, select }) |
Cross-component mutation tracking |
| Optimistic update | onMutate -> cancel -> snapshot -> set |
Rollback in onError |
| Infinite query | useInfiniteQuery({ initialPageParam }) |
initialPageParam required in v5 |
| Prefetch | queryClient.prefetchQuery(options) |
Preload on hover/intent |
| Invalidation | queryClient.invalidateQueries({ queryKey }) |
Fuzzy-matches by default, active only |
| Cancellation | queryFn: ({ signal }) => fetch(url, { signal }) |
Auto-cancel on key change |
| Select transform | select: (data) => data.filter(...) |
Structural sharing preserved |
| Skip token | queryFn: id ? () => fetch(id) : skipToken |
Type-safe conditional disabling |
| Serial mutations | useMutation({ scope: { id } }) |
Same scope ID runs mutations in serial |
v5 Migration Quick Reference
| v4 (Removed) | v5 (Use Instead) |
|---|---|
useQuery(key, fn, opts) |
useQuery({ queryKey, queryFn, ...opts }) |
cacheTime |
gcTime |
isLoading (no data) |
isPending |
keepPreviousData: true |
placeholderData: keepPreviousData |
onSuccess/onError on queries |
useEffect or mutation callbacks |
useErrorBoundary |
throwOnError |
No initialPageParam |
initialPageParam required |
Error type unknown |
Error type defaults to Error |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Checking isPending before data |
Data-first: check data -> error -> isPending |
| Copying server state to local useState | Use data directly or derived state pattern |
| Creating QueryClient in component | Create once outside component or in useState |
Using refetch() for parameter changes |
Include params in queryKey, let it refetch automatically |
| Same key for useQuery and useInfiniteQuery | Use distinct key segments (different cache structures) |
| Inline select without memoization | Extract to stable function or useCallback |
Using catch without re-throwing |
Throw errors in queryFn (fetch doesn't reject on 4xx/5xx) |
| Manual generics on useQuery | Type the queryFn return, let inference work |
| Destructuring query for type narrowing | Keep query object intact for proper narrowing |
Using enabled with useSuspenseQuery |
Use conditional rendering to mount/unmount component |
| Not awaiting prefetch for SSR | Await prefetchQuery to avoid hydration mismatches |
invalidateQueries not refetching all |
Use refetchType: 'all' for inactive queries |
Delegation
- Query pattern discovery: Use
Exploreagent - Cache strategy review: Use
Taskagent - Code review: Delegate to
code-revieweragent
If the
tanstack-routerskill is available, delegate route loader and preloading patterns to it.
If thetanstack-formskill is available, delegate form submission and mutation coordination to it.
If thetanstack-tableskill is available, delegate server-side table patterns to it.
If thetanstack-startskill is available, delegate server functions and SSR data loading to it.
If thetanstack-devtoolsskill is available, delegate query cache debugging and inspection to it.
If thetanstack-dbskill is available, delegate reactive client-side database and live query patterns to it.
If thetanstack-virtualskill is available, delegate list virtualization and infinite scroll rendering to it.
If thetanstack-storeskill is available, delegate shared client-side reactive state management to it.
If theelectricsqlskill is available, delegate ElectricSQL real-time Postgres sync patterns to it.
If thelocal-firstskill is available, delegate local-first architecture decisions and sync engine selection to it.
References
- Basic patterns, architecture, and query variants
- Query keys and factory patterns
- Mutations, optimistic updates, and MutationCache
- Cache operations, staleTime vs gcTime, seeding
- Data transformations and select patterns
- Performance optimization with render tracking and structural sharing
- Error handling strategies
- Infinite queries and pagination
- Offline mode and persistence
- WebSocket and real-time integration
- SSR and hydration patterns
- TypeScript patterns
- Testing with MSW and React Testing Library
- Known v5 issues and workarounds
- Caching coordination with Router — single-source caching strategy, disabling Router cache, coordinated configuration
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install tanstack-query by running npx skills add oakoss/agent-skills --skill tanstack-query in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für tanstack-query, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
