repository·master·Indexed 27 days ago
https://github.com/orval-labs/orvalA code generation tool that creates type-safe TypeScript clients from OpenAPI v3 or Swagger v2 specifications. Orval supports a wide range of frameworks and libraries, including React (React Query, SWR), Vue (Vue Query), Svelte (Svelte Query), Angular, SolidStart, SolidQuery, Hono, Zod, Effect, Native Fetch, and Model Context Protocol (MCP).
yaml or json formats). It can generate models, requests, hooks, mocks, and more.yaml or json formats. It is designed to integrate with React, Vue, Svelte, and Angular applications to provide type-safe Generate, valid, cache, and mock capabilities based on your OpenAPI specification.The @orval/angular package provides several specialized features for Angular development:
HttpClient observe overloads.httpResource and provides ResourceState<T> and toResourceState() helpers.Accept helpers and provides ClientResult / ResourceResult aliases.defaultValue, debugName, injector, and equal.Orval generates type-safe JavaScript/TypeScript clients from OpenAPI v3 or Swagger v2 specifications provided in yaml or json formats. It is designed to automate the generation of code for data fetching, caching, and mocking in modern frontend frameworks.
Supported integrations include:
The orval skill provides automated assistance for the following Orval features:
While Orval generates Zod schemas and TypeScript types for request bodies, it does not automatically call Schema.parse(body) before sending a request. To ensure request bodies are valid before transmission, you must validate them explicitly using the generated schemas.
const payload = CreatePetsBody.parse(formValue);
return this.petsService.createPets(payload);You can install the @orval/solid-start client using your preferred package manager.
npm install @orval/solid-start
# or
bun add @orval/solid-start
# or
pnpm add @orval/solid-startTo use generated MSW handlers in a testing environment like Vitest, import the generated .msw.ts file and pass the handlers to setupServer from msw/node.
You can override handlers for specific tests using server.use() to simulate different scenarios, such as empty lists or dynamic responses based on request parameters.
import {
getListPetsMockHandler,
getShowPetByIdMockHandler,
} from './api/petstore.msw';
import { setupServer } from 'msw/node';
const server = setupServer(...getListPetsMockHandler());
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
// Override for specific test
it('handles empty list', () => {
server.use(getListPetsMockHandler([]));
// ...
});
// Dynamic response based on request
it('returns pet by id', () => {
server.use(
getShowPetByIdMockHandler(async ({ params }) => ({
id: Number(params.petId),
name: 'Test Pet',
})),
);
// ...
});To use Effect schemas alongside your HTTP client (like SWR or TanStack Query) for runtime validation, you must define two separate generation targets in your orval.config.ts. One target generates the HTTP client, and a second target generates the Effect schemas.
Important: Use the fileExtension: '.effect.ts' option in your Effect schema configuration to prevent filename conflicts with your HTTP client files.
import { defineConfig } from 'orval';
export default defineConfig({
// HTTP client generation
petstore: {
input: {
target: './petstore.yaml',
},
output: {
mode: 'tags-split',
client: 'swr',
target: 'src/api/endpoints',
schemas: 'src/api/models',
mock: true,
},
},
// Effect schema generation
petstoreEffect: {
input: {
target: './petstore.yaml',
},
output: {
mode: 'tags-split',
client: 'effect',
target: 'src/api/endpoints',
fileExtension: '.effect.ts',
},
},
});Orval 8+ requires Node.js 22.18 or newer. If your project uses an older Node LTS, you can use the official Docker image to perform code generation.
Note: Replace ghcr.io/orval-labs/orval with orval:local when testing locally before the official image is published.
# macOS / Linux
docker run --rm -v "$(pwd):/app" -w /app ghcr.io/orval-labs/orval
# Windows Git Bash
MSYS_NO_PATHCONV=1 docker run --rm -v "$(pwd):/app" -w /app ghcr.io/orval-labs/orval
# Windows CMD
cd /d "C:\path\to\your-project"
docker run --rm -v "%cd%:/app" -w /app ghcr.io/orval-labs/orval
# Windows PowerShell
cd "C:\path\to\your-project"
docker run --rm -v "${PWD}:/app" -w /app ghcr.io/orval-labs/orvalTo get reproducible mock data (useful for snapshot testing), seed Faker's PRNG before invoking your factories.
import { faker } from '@faker-js/faker';
import { getShowPetByIdResponseMock } from './api/petstore.faker';
beforeEach(() => {
faker.seed(42);
});
it('matches snapshot', () => {
expect(getShowPetByIdResponseMock()).toMatchSnapshot();
});