svelte

Implement TanStack Query mutations in Svelte components with createMutation and callbacks.

2|Updated Jan 23, 2026

Search Tags:#svelte #state-management #mutation #tanstack-query #ui-patterns #component-design

Ready to run

npx skills add https://github.com/eserlan/Codex-Cryptica --skill svelte-eserlan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/eserlan/Codex-Cryptica/tree/main/.agent/skills/svelte
Command: npx skills add https://github.com/eserlan/Codex-Cryptica --skill svelte-eserlan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines implementing robust mutation handling in Svelte apps by providing proven patterns for TanStack Query mutations, state management, and clean component organization.

Core Features & Use Cases

Mutation patterns with createMutation for in-component mutations, including onSuccess/onError callbacks to manage local UI state.
TypeScript guidance for using .execute() in non-component utility files and inline handler patterns in Svelte components.
Self-contained component patterns and shadcn-svelte best practices to keep UI logic encapsulated and reusable.
Clear import patterns and styling guidelines to maintain consistency across a codebase.

Quick Start

Create a Svelte component that uses createMutation to mutate a sample item and handles onSuccess and onError within the mutation options.

Frequently Asked Questions about svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I handle mutations in Svelte using TanStack Query?▼

Implement Svelte mutations using createMutation in components with onSuccess and onError callbacks to manage UI state. Use .execute() in TypeScript utility files to handle mutations outside component scope.

What is the best way to structure Svelte components for mutation state management?▼

The best way to structure Svelte components for mutation state is using self-contained component patterns. Encapsulate UI logic and mutation handlers within the component to ensure reusability and maintain consistent state management across your project.

Does TanStack Query work with shadcn-svelte for UI mutations?▼

Yes, TanStack Query works with shadcn-svelte by applying self-contained component patterns. You can encapsulate mutation logic and UI styling within shadcn-svelte components to maintain consistent design and state management across your application.

How do I use execute() for mutations in TypeScript files?▼

Use execute() in TypeScript files to trigger mutations outside of Svelte components. This pattern separates data mutation logic from UI components, allowing utility files to handle mutation execution while components manage presentation and local state callbacks.

Why should I use createMutation instead of inline handlers in Svelte?▼

Use createMutation instead of inline handlers to standardize mutation handling in Svelte apps. createMutation provides built-in onSuccess and onError callbacks for predictable state management, whereas inline handlers lack consistent patterns for error handling and UI state updates.

What import patterns are needed for Svelte mutation utilities?▼

Consistent import patterns for Svelte mutation utilities require importing createMutation from TanStack Query in components. Maintain these clear import guidelines across your codebase to ensure mutation handling remains standardized and self-contained across all project files.