Claude Code React Web Skill for Refreshing a List After a Mutation
Keep server reads in a query hook and writes in a mutation hook. Identify which query to invalidate after a create succeeds.
中文Install in Claude Code
Use Claude Code with the pinned skill and a project that already uses TanStack React Query. Use the project's test tools.
- Get the complete `skills/react-web` directory from the pinned revision.
- Copy it into the target project's `.claude/skills/` and confirm `.claude/skills/react-web/SKILL.md`. Start Claude Code at the project root and describe a task matching the skill's purpose.
Example task
A fictional reading list contains two records. Creating a third should refresh the list on success. A failed create should leave the old list visible.What to check
On success invalidate the list query and show the third record. On failure retain the original two and show feedback without treating the new record as saved.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should query data also be copied into a global store?
Identify what is server state and what is local UI state. Let the query cache own the remote list and keep local interactions separate.