gen-hook

Generate React Query Hooks

Generate React Query hooks for data fetching and mutations with proper cache management and TypeScript types.

What This Skill Does

1. Creates query hooks for data fetching (use, useById)
2. Creates mutation hooks for data modification (useCreate, useUpdate, useDelete)
3. Implements proper query key hierarchy (factory pattern)
4. Sets up cache invalidation after mutations
5. Provides TypeScript types and error handling
6. Includes optimistic updates pattern (advanced)

Usage

/gen-hook todos
/gen-hook accounts
/gen-hook userprofile

Template

This skill uses a comprehensive React Query template:

• templates/react-query-hooks.template.ts - Complete hooks with query key factory, cache management, and optimistic updates

How to use template: Read the template to understand the complete pattern, then generate adapted code based on the actual service layer you're integrating with.

Workflow

Step 1: Verify Service Layer Exists

Before generating hooks, ensure the service layer exists:

ls src/features/$ARGUMENTS[0]/services/*Service.ts

Read the service file to understand:

• Available methods (getTodos, createTodo, etc.)
• DTO types (CreateTodoDto, UpdateTodoDto)
• Domain model type (Todo)

Step 2: Read the React Query Template

Read templates/react-query-hooks.template.ts

Study the template structure:

• Query key factory pattern
• Query hooks with proper configuration
• Mutation hooks with cache invalidation
• Optimistic updates pattern
• TypeScript types

Step 3: Generate Hooks File Following Template Pattern

Create src/features/<feature>/hooks/use<Feature>.ts following the template structure.

React Query Hook Pattern (From Template)

Critical Pattern #1: Query Key Factory (From Template)

The template shows the query key factory pattern for hierarchical cache management:

// Query key factory - adapt to your feature name
const <feature>Keys = {
  all: ['<feature>'] as const,
  lists: () => [...<feature>Keys.all, 'list'] as const,
  list: (filters?: Filters) => [...<feature>Keys.lists(), filters] as const,
  details: () => [...<feature>Keys.all, 'detail'] as const,
  detail: (id: string) => [...<feature>Keys.details(), id] as const,
};