AgentSkillsCN

react-query-patterns

在添加或更新 react-query 查询/突变、缓存键、失效机制，或乐观更新时使用。

SKILL.md
--- frontmatter
name: react-query-patterns
description: Use when adding/updating react-query queries/mutations, cache keys, invalidation, or optimistic updates.

Checklist

  • •Centralize query keys (no hardcoded arrays/strings): prefer lib/constants/* as QUERY_KEYS.
  • •Keep request functions typed and small; validate network payloads at boundaries if needed.
  • •Invalidate the smallest scope that is correct (avoid blanket invalidation).
  • •Show user feedback with toasts (include toast ids).

Patterns

  • •Queries:
    • •Provide stable keys and stable parameters.
    • •Use select on the server to keep payloads small.
  • •Mutations:
    • •Prefer optimistic updates only when rollback is safe and well-scoped.
    • •On success, invalidate the exact keys impacted.

Repo references

  • •Query provider: components/query-provider.tsx
  • •Timer hooks: hooks/use-timers.ts