home / skills / pproenca / dot-skills / orval

This skill helps you configure Orval and generate type-safe TypeScript API clients from OpenAPI specs with best practices.

npx playbooks add skill pproenca/dot-skills --skill orval

Review the files below or copy the command above to add this skill to your agents.

Files (48)
SKILL.md
5.2 KB
---
name: orval
description: Orval OpenAPI TypeScript client generation best practices. This skill should be used when configuring Orval, generating TypeScript clients from OpenAPI specs, setting up React Query/SWR hooks, creating custom mutators, or writing MSW mocks. Triggers on tasks involving orval.config.ts, OpenAPI codegen, API client setup, or mock generation.
---

# Orval OpenAPI Best Practices

Comprehensive guide for generating type-safe TypeScript clients from OpenAPI specifications using Orval. Contains 42 rules across 8 categories, prioritized by impact to guide automated configuration, client generation, and testing setup.

## When to Apply

Reference these guidelines when:
- Configuring Orval for a new project
- Setting up OpenAPI-based TypeScript client generation
- Integrating React Query, SWR, or Vue Query with generated hooks
- Creating custom mutators for authentication and error handling
- Generating MSW mocks for testing

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | OpenAPI Specification Quality | CRITICAL | `spec-` |
| 2 | Configuration Architecture | CRITICAL | `orvalcfg-` |
| 3 | Output Structure & Organization | HIGH | `output-` |
| 4 | Custom Client & Mutators | HIGH | `mutator-` |
| 5 | Query Library Integration | MEDIUM-HIGH | `oquery-` |
| 6 | Type Safety & Validation | MEDIUM | `types-` |
| 7 | Mock Generation & Testing | MEDIUM | `mock-` |
| 8 | Advanced Patterns | LOW | `adv-` |

## Quick Reference

### 1. OpenAPI Specification Quality (CRITICAL)

- `spec-operationid-unique` - Use unique and descriptive operationIds
- `spec-schemas-reusable` - Define reusable schemas in components
- `spec-tags-organization` - Organize operations with tags
- `spec-response-types` - Define all response types explicitly
- `spec-required-fields` - Mark required fields explicitly

### 2. Configuration Architecture (CRITICAL)

- `orvalcfg-mode-selection` - Choose output mode based on API size
- `orvalcfg-client-selection` - Select client based on framework requirements
- `orvalcfg-separate-schemas` - Separate schemas into dedicated directory
- `orvalcfg-input-validation` - Validate OpenAPI spec before generation
- `orvalcfg-baseurl-setup` - Configure base URL properly
- `orvalcfg-prettier-format` - Enable automatic code formatting

### 3. Output Structure & Organization (HIGH)

- `output-file-extension` - Use distinct file extensions for generated code
- `output-index-files` - Generate index files for clean imports
- `output-naming-convention` - Configure consistent naming conventions
- `output-clean-target` - Enable clean mode for consistent regeneration
- `output-headers-enabled` - Enable headers in generated functions

### 4. Custom Client & Mutators (HIGH)

- `mutator-custom-instance` - Use custom mutator for HTTP client configuration
- `mutator-error-types` - Export custom error types from mutator
- `mutator-body-wrapper` - Export body type wrapper for request transformation
- `mutator-interceptors` - Use interceptors for cross-cutting concerns
- `mutator-token-refresh` - Handle token refresh in mutator
- `mutator-fetch-client` - Use fetch mutator for smaller bundle size

### 5. Query Library Integration (MEDIUM-HIGH)

- `oquery-hook-options` - Configure default query options globally
- `oquery-key-export` - Export query keys for cache invalidation
- `oquery-infinite-queries` - Enable infinite queries for paginated endpoints
- `oquery-suspense-support` - Enable suspense mode for streaming UX
- `oquery-signal-cancellation` - Pass AbortSignal for request cancellation
- `oquery-mutation-callbacks` - Use generated mutation options types

### 6. Type Safety & Validation (MEDIUM)

- `types-zod-validation` - Generate Zod schemas for runtime validation
- `types-zod-strict` - Enable Zod strict mode for safer validation
- `types-zod-coerce` - Use Zod coercion for type transformations
- `types-use-dates` - Enable useDates for Date type generation
- `types-bigint-support` - Enable useBigInt for large integer support

### 7. Mock Generation & Testing (MEDIUM)

- `mock-msw-generation` - Generate MSW handlers for testing
- `mock-use-examples` - Use OpenAPI examples for realistic mocks
- `mock-delay-config` - Configure mock response delays
- `mock-http-status` - Generate mocks for all HTTP status codes
- `mock-index-files` - Generate mock index files for easy setup

### 8. Advanced Patterns (LOW)

- `adv-input-transformer` - Use input transformer for spec preprocessing
- `adv-operation-override` - Override settings per operation
- `adv-output-transformer` - Use output transformer for generated code modification
- `adv-form-data-handling` - Configure form data serialization

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules
- Example: [spec-operationid-unique](references/spec-operationid-unique.md)

## Related Skills

- For consuming generated hooks, see `tanstack-query` skill
- For mocking generated API clients, see `test-msw` skill
- For schema validation, see `zod` skill

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

Overview

This skill captures Orval OpenAPI TypeScript client generation best practices to produce maintainable, type-safe API clients. It focuses on configuration choices, output organization, custom mutators, query library integration, and mock generation. Use it to speed safe client generation and consistent testing setups.

How this skill works

The skill inspects Orval configuration patterns and recommends rule-driven defaults for orval.config.ts and generation flags. It maps priorities across spec quality, config architecture, output organization, mutators, query integration, types, and mock generation to guide automated or manual setup. It also suggests concrete patterns for React Query/SWR hooks, custom mutators, and MSW mocks.

When to use it

  • Configuring Orval for a new project or CI pipeline
  • Generating TypeScript clients from an OpenAPI spec
  • Integrating generated clients with React Query, SWR, or Vue Query
  • Creating custom mutators for auth, retries, or error handling
  • Generating MSW handlers and mocks for tests

Best practices

  • Ensure OpenAPI quality first: unique operationIds, reusable schemas, explicit response types, and required fields
  • Choose generation mode and client type based on API size and framework needs; validate spec before generation
  • Organize output: separate schema directory, consistent naming, index files, and enable clean mode for reproducible builds
  • Implement a custom mutator for HTTP client config, centralized token refresh, interceptors, and exported error/body types
  • Integrate query libs: export query keys, pass AbortSignal, configure default query options, and support infinite queries
  • Generate runtime validators (Zod) when needed, enable useDates/useBigInt for precise types, and produce MSW handlers using examples

Example use cases

  • Set up orval.config.ts that outputs a small fetch-based client with generated React Query hooks and shared query keys
  • Create a mutator that adds auth headers, refreshes tokens on 401, and exposes typed error shapes for UI components
  • Generate Zod schemas alongside TypeScript types to validate server responses in tests and at runtime
  • Produce MSW handlers from OpenAPI examples for integration tests with configurable response delays and status variants
  • Use per-operation overrides to enable infinite queries for paginated endpoints and suspense support for streaming UX

FAQ

Should I validate the OpenAPI spec before generating clients?

Yes. Validate and fix issues like missing operationIds, ambiguous responses, or unreusable schemas to avoid generation errors and brittle clients.

When should I generate runtime validators like Zod?

Generate Zod schemas when you need runtime safety (e.g., untrusted backends or critical data paths). Use strict/coercion modes based on transformation needs.