← Back to patterns

Command pattern

Using command() for mutations

Pattern Usage:

// In remote file:
export const incrementCounter = command(
  z.object({ currentValue: z.number() }),
  async ({ currentValue }) => {
    // Perform mutation
    return { newValue: currentValue + 1 };
  }
);

// In component:
const result = await incrementCounter({ currentValue: counter });

Live Demo:

Current Value
0

How it works: Commands are for imperative operations like mutations, updates, or deletions. Unlike queries, they don't auto-refresh and must be called manually (e.g., on button click). They return a promise you can await. Commands have a 500ms simulated delay to demonstrate loading states.