safe-action-tanstack-query — скилл для Claude Code: установка
Помогает связывать next-safe-action с TanStack Query: мутации, ошибки, optimistic updates и очистка клиентского кэша. Нужен при работе с React Query.
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a claude-codeЧто делает safe-action-tanstack-query
Скилл подсказывает, как подключить mutationOptions() к useMutation. Он разбирает результат safe action, превращает serverError и validationErrors в ActionMutationError, а успешный ответ отдаёт как данные мутации. Для проверки ошибок предусмотрены isActionMutationError, hasServerError и hasValidationErrors.
Также описаны обновления через onMutate и кэш запросов, вызов queryClient.invalidateQueries(), повторы с backoff, DevTools и сохранение отложенных мутаций. Для работы нужны пакеты @next-safe-action/adapter-tanstack-query и @tanstack/react-query.
Адаптер рассчитан только на stateless .action() без выбрасывания ошибок: stateAction, throwValidationErrors: true и throwServerError: true с ним не подходят. Он предназначен для мутаций, а данные нужно получать другим способом, например через Route Handler с useQuery.
Какие задачи решает
- подключить safe action к
useMutation - разобрать серверные и валидационные ошибки по типам
- инвалидировать клиентский кэш после мутации
- добавить optimistic update через кэш запросов
- настроить повторы и сохранение офлайн-мутаций
Примеры запросов агенту
- Подключи
createUserкuseMutationчерезmutationOptions()и обработай успешный ответ. - Покажи, как различать
serverErrorиvalidationErrorsчерезActionMutationErrorи type guards. - Добавь optimistic update через
onMutate, а после мутации вызовиqueryClient.invalidateQueries().
Как установить safe-action-tanstack-query
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a claude-code2Вручную: положить файлы
~/.claude/skills/safe-action-tanstack-query/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/safe-action-tanstack-query/
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a codex2Вручную: положить файлы
.agents/skills/safe-action-tanstack-query/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a cursor2Вручную: положить файлы
.cursor/skills/safe-action-tanstack-query/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install next-safe-action/skills safe-action-tanstack-query2Вручную: положить файлы
.github/skills/safe-action-tanstack-query/SKILL.md1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a gemini-cli2Командой платформы
gemini skills install https://github.com/next-safe-action/skills --path skills/safe-action-tanstack-queryВручную: положить файлы
.devin/skills/safe-action-tanstack-query/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о safe-action-tanstack-query
Как установить safe-action-tanstack-query в Claude Code?
Выполни npx skills add next-safe-action/skills --skill safe-action-tanstack-query -a claude-code, затем проверь файл ~/.claude/skills/safe-action-tanstack-query/SKILL.md.
Что делает safe-action-tanstack-query?
Скилл объясняет связку next-safe-action с TanStack Query для мутаций. Он охватывает mutationOptions(), обработку ошибок, обновление кэша и инвалидацию запросов.
Какие действия совместимы с адаптером?
Подходят stateless .action() с возвращаемыми ошибками. stateAction и действия с throwValidationErrors: true или throwServerError: true использовать нельзя.
