feat(skills): add tanstack-query-expert skill for async state management (#222)

* feat(skills): add tanstack-query-expert skill for async state management * chore: sync generated registry files * revert: restore README.md and package-lock.json to fix CI drift
2026-03-07 14:01:19 +05:00
parent c5e715c2ba
commit 10ee2c299d
5 changed files with 281 additions and 1 deletions
--- a/CATALOG.md
+++ b/CATALOG.md
@@ -156,7 +156,7 @@ calculations | startup, business, analyst, market, opportunity | startup, busine
 | `startup-financial-modeling` | This skill should be used when the user asks to \\\"create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "est... | startup, financial, modeling | startup, financial, modeling, skill, should, used, user, asks, projections, model, forecast, revenue |
 | `whatsapp-automation` | Automate WhatsApp Business tasks via Rube MCP (Composio): send messages, manage templates, upload media, and handle contacts. Always search tools first for c... | whatsapp | whatsapp, automation, automate, business, tasks, via, rube, mcp, composio, send, messages, upload |

-## data-ai (213)
+## data-ai (214)

 | Skill | Description | Tags | Triggers |
 | --- | --- | --- | --- |
@@ -364,6 +364,7 @@ Scope::with_data, save state, load state, serde,
 | `sqlmap-database-pentesting` | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap,... | sqlmap, database, pentesting | sqlmap, database, pentesting, skill, should, used, user, asks, automate, sql, injection, testing |
 | `stitch-ui-design` | Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, genera... | stitch, ui | stitch, ui, creating, effective, prompts, google, ai, user, wants, ux, app, interfaces |
 | `supabase-automation` | Automate Supabase database queries, table management, project administration, storage, edge functions, and SQL execution via Rube MCP (Composio). Always sear... | supabase | supabase, automation, automate, database, queries, table, administration, storage, edge, functions, sql, execution |
+| `tanstack-query-expert` | Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Ne... | tanstack, query | tanstack, query, react, asynchronous, state, covers, data, fetching, stale, time, configuration, mutations |
 | `team-collaboration-standup-notes` | You are an expert team communication specialist focused on async-first standup practices, AI-assisted note generation from commit history, and effective remo... | team, collaboration, standup, notes | team, collaboration, standup, notes, communication, async, first, ai, assisted, note, generation, commit |
 | `telegram-bot-builder` | Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API,... | telegram, bot, builder | telegram, bot, builder, building, bots, solve, real, problems, simple, automation, complex, ai |
 | `travel-health-analyzer` | 分析旅行健康数据、评估目的地健康风险、提供疫苗接种建议、生成多语言紧急医疗信息卡片。支持WHO/CDC数据集成的专业级旅行健康风险评估。 | travel, health, analyzer | travel, health, analyzer, who, cdc |
--- a/data/bundles.json
+++ b/data/bundles.json
@@ -272,6 +272,7 @@
        "swiftui-expert-skill",
        "sympy",
        "systems-programming-rust-project",
+        "tanstack-query-expert",
        "tavily-web",
        "telegram-bot-builder",
        "telegram-mini-app",
@@ -589,6 +590,7 @@
        "sql-pro",
        "sqlmap-database-pentesting",
        "supabase-automation",
+        "tanstack-query-expert",
        "uniprot-database",
        "unity-ecs-patterns",
        "using-neon",
--- a/data/catalog.json
+++ b/data/catalog.json
@@ -25933,6 +25933,31 @@
      ],
      "path": "skills/tailwind-patterns/SKILL.md"
    },
+    {
+      "id": "tanstack-query-expert",
+      "name": "tanstack-query-expert",
+      "description": "Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.",
+      "category": "data-ai",
+      "tags": [
+        "tanstack",
+        "query"
+      ],
+      "triggers": [
+        "tanstack",
+        "query",
+        "react",
+        "asynchronous",
+        "state",
+        "covers",
+        "data",
+        "fetching",
+        "stale",
+        "time",
+        "configuration",
+        "mutations"
+      ],
+      "path": "skills/tanstack-query-expert/SKILL.md"
+    },
    {
      "id": "tavily-web",
      "name": "tavily-web",
--- a/skills/tanstack-query-expert/SKILL.md
+++ b/skills/tanstack-query-expert/SKILL.md
@@ -0,0 +1,242 @@
+---
+name: tanstack-query-expert
+description: "Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration."
+risk: safe
+source: community
+date_added: "2026-03-07"
+---
+
+# TanStack Query Expert
+
+You are a production-grade TanStack Query (formerly React Query) expert. You help developers build robust, performant asynchronous state management layers in React and Next.js applications. You master declarative data fetching, cache invalidation, optimistic UI updates, background syncing, error boundaries, and server-side rendering (SSR) hydration patterns.
+
+## When to Use This Skill
+
+- Use when setting up or refactoring data fetching logic (replacing `useEffect` + `useState`)
+- Use when designing query keys (Array-based, strictly typed keys)
+- Use when configuring global or query-specific `staleTime`, `gcTime`, and `retry` behavior
+- Use when writing `useMutation` hooks for POST/PUT/DELETE requests
+- Use when invalidating the cache (`queryClient.invalidateQueries`) after a mutation
+- Use when implementing Optimistic Updates for instant UX feedback
+- Use when integrating TanStack Query with Next.js App Router (Server Components + Client Boundary hydration)
+
+## Core Concepts
+
+### Why TanStack Query?
+
+TanStack Query is not just for fetching data; it's an **asynchronous state manager**. It handles caching, background updates, deduplication of multiple requests for the same data, pagination, and out-of-the-box loading/error states. 
+
+**Rule of Thumb:** Never use `useEffect` to fetch data if TanStack Query is available in the stack.
+
+## Query Definition Patterns
+
+### The Custom Hook Pattern (Best Practice)
+
+Always abstract `useQuery` calls into custom hooks to encapsulate the fetching logic, TypeScript types, and query keys.
+
+```typescript
+import { useQuery } from '@tanstack/react-query';
+
+// 1. Define strict types
+type User = { id: string; name: string; status: 'active' | 'inactive' };
+
+// 2. Define the fetcher function
+const fetchUser = async (userId: string): Promise<User> => {
+  const res = await fetch(`/api/users/${userId}`);
+  if (!res.ok) throw new Error('Failed to fetch user');
+  return res.json();
+};
+
+// 3. Export a custom hook
+export const useUser = (userId: string) => {
+  return useQuery({
+    queryKey: ['users', userId], // Array-based query key
+    queryFn: () => fetchUser(userId),
+    staleTime: 1000 * 60 * 5, // Data is fresh for 5 minutes (no background refetching)
+    enabled: !!userId, // Dependent query: only run if userId exists
+  });
+};
+```
+
+### Advanced Query Keys
+
+Query keys uniquely identify the cache. They must be arrays, and order matters.
+
+```typescript
+// Filtering / Sorting
+useQuery({
+  queryKey: ['issues', { status: 'open', sort: 'desc' }],
+  queryFn: () => fetchIssues({ status: 'open', sort: 'desc' })
+});
+
+// Factory pattern for query keys (Highly recommended for large apps)
+export const issueKeys = {
+  all: ['issues'] as const,
+  lists: () => [...issueKeys.all, 'list'] as const,
+  list: (filters: string) => [...issueKeys.lists(), { filters }] as const,
+  details: () => [...issueKeys.all, 'detail'] as const,
+  detail: (id: number) => [...issueKeys.details(), id] as const,
+};
+```
+
+## Mutations & Cache Invalidation
+
+### Basic Mutation with Invalidation
+
+When you modify data on the server, you must tell the client cache that the old data is now stale.
+
+```typescript
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+export const useCreatePost = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (newPost: { title: string }) => {
+      const res = await fetch('/api/posts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newPost),
+      });
+      return res.json();
+    },
+    // On success, invalidate the 'posts' cache to trigger a background refetch
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['posts'] });
+    },
+  });
+};
+```
+
+### Optimistic Updates
+
+Give the user instant feedback by updating the cache *before* the server responds, and rolling back if the request fails.
+
+```typescript
+export const useUpdateTodo = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateTodoFn,
+    
+    // 1. Triggered immediately when mutate() is called
+    onMutate: async (newTodo) => {
+      // Cancel any outgoing refetches so they don't overwrite our optimistic update
+      await queryClient.cancelQueries({ queryKey: ['todos'] });
+
+      // Snapshot the previous value
+      const previousTodos = queryClient.getQueryData(['todos']);
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['todos'], (old: any) => 
+        old.map((todo: any) => todo.id === newTodo.id ? { ...todo, ...newTodo } : todo)
+      );
+
+      // Return a context object with the snapshotted value
+      return { previousTodos };
+    },
+    
+    // 2. If the mutation fails, use the context returned from onMutate to roll back
+    onError: (err, newTodo, context) => {
+      queryClient.setQueryData(['todos'], context?.previousTodos);
+    },
+    
+    // 3. Always refetch after error or success to ensure server sync
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] });
+    },
+  });
+};
+```
+
+## Next.js App Router Integration
+
+### Initializing the Provider
+
+```typescript
+// app/providers.tsx
+'use client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false, // Prevents aggressive refetching on tab switch
+          },
+        },
+      })
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+```
+
+### Server Component Pre-fetching (Hydration)
+
+Pre-fetch data on the server and pass it to the client without prop-drilling or `initialData`.
+
+```typescript
+// app/posts/page.tsx (Server Component)
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
+import PostsList from './PostsList'; // Client Component
+
+export default async function PostsPage() {
+  const queryClient = new QueryClient();
+
+  // Prefetch the data on the server
+  await queryClient.prefetchQuery({
+    queryKey: ['posts'],
+    queryFn: fetchPostsServerSide,
+  });
+
+  // Dehydrate the cache and pass it to the HydrationBoundary
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <PostsList />
+    </HydrationBoundary>
+  );
+}
+```
+
+```typescript
+// app/posts/PostsList.tsx (Client Component)
+'use client'
+import { useQuery } from '@tanstack/react-query';
+
+export default function PostsList() {
+  // This will NOT trigger a network request on mount! 
+  // It reads instantly from the dehydrated server cache.
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: fetchPostsClientSide,
+  });
+
+  return <div>{data.map(post => <p key={post.id}>{post.title}</p>)}</div>;
+}
+```
+
+## Best Practices
+
+- ✅ **Do:** Create Query Key factories so you don't misspell `['users']` vs `['user']` across different files.
+- ✅ **Do:** Set a global `staleTime` (e.g., `1000 * 60`) if your data doesn't change every second. The default `staleTime` is `0`, meaning TanStack Query will trigger a background refetch on every component remount by default.
+- ✅ **Do:** Use `queryClient.setQueryData` sparingly. It's usually better to just `invalidateQueries` and let TanStack Query refetch the fresh data organically.
+- ✅ **Do:** Abstract all `useMutation` and `useQuery` calls into custom hooks. Views should only say `const { mutate } = useCreatePost()`.
+- ❌ **Don't:** Pass primitive callbacks inline directly to `useQuery` without memoization if you rely on closures. (Instead, rely on the `queryKey` dependency array).
+- ❌ **Don't:** Sync query data into local React state (e.g., `useEffect(() => setLocalState(data), [data])`). Use the query data directly. If you need derived state, derive it during render.
+
+## Troubleshooting
+
+**Problem:** Infinite fetching loop in the network tab.
+**Solution:** Check your `queryFn`. If your `fetch` logic isn't structured correctly, or throws an unhandled exception before hitting the return, TanStack Query will retry automatically up to 3 times (default). If wrapped in an unstable `useEffect`, it loops infinitely. Check `retry: false` for debugging.
+
+**Problem:** `staleTime` vs `gcTime` (formerly `cacheTime`) confusion.
+**Solution:** `staleTime` governs when a background refetch is triggered. `gcTime` governs how long the inactive data stays in memory after the component unmounts. If `gcTime` < `staleTime`, data will be deleted before it even gets stale!
--- a/skills_index.json
+++ b/skills_index.json
@@ -10649,6 +10649,16 @@
    "source": "community",
    "date_added": "2026-02-27"
  },
+  {
+    "id": "tanstack-query-expert",
+    "path": "skills/tanstack-query-expert",
+    "category": "uncategorized",
+    "name": "tanstack-query-expert",
+    "description": "Expert in TanStack Query (React Query) \u2014 asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-03-07"
+  },
  {
    "id": "tavily-web",
    "path": "skills/tavily-web",