### Orval Build Script Integration (package.json)

Source: https://orval.dev/docs/reference/integration

Integrate Orval code generation into your project's build process by defining scripts in `package.json`. This example shows how to run Orval generation before starting the development server or building the project.

```json
{
  "scripts": {
    "generate": "node scripts/generate-api.js",
    "dev": "npm run generate && next dev",
    "build": "npm run generate && next build"
  }
}
```

--------------------------------

### Generate React Query Hook for Listing Pets (TypeScript)

Source: https://orval.dev/

This TypeScript code generates a React Query hook for fetching pets. It includes type definitions for the Pet interface and a usage example within a component.

```typescript
import { useQuery } from '@tanstack/react-query';

export interface Pet {
  id?: number;
  name?: string;
}

export const useListPets = () => {
  return useQuery({
    queryKey: ['listPets'],
    queryFn: async () => {
      const response = await fetch('/pets');
      return response.json() as Promise<Pet[]>;
    },
  });
};

// Usage in your component
const { data: pets } = useListPets();

```

--------------------------------

### Configure Zod Schema Type in Orval

Source: https://orval.dev/docs/versions/v8

To generate schemas using Zod, set `type: 'zod'` within the `schemas` configuration in your Orval setup.

```typescript
export default defineConfig({
  petstore: {
    output: {
      schemas: {
        path: './model',
        type: 'zod', // 'typescript' | 'zod'
      },
    },
  },
});
```

--------------------------------

### Update Dynamic Imports

Source: https://orval.dev/docs/versions/v8

Use `await import()` for dynamic imports of configuration files.

```javascript
- const config = require('./orval.config.js');
+ const config = await import('./orval.config.js');
```

--------------------------------

### Direct Configuration for Orval Generation

Source: https://orval.dev/docs/reference/integration

Pass a configuration object directly to the `generate` function for Orval. This allows for dynamic configuration without needing a separate config file.

```javascript
import { generate, type Options } from 'orval';

const config: Options = {
  input: {
    target: './api-spec.yaml',
  },
  output: {
    target: './src/api.ts',
    client: 'axios',
  },
};

await generate(config);
```

--------------------------------

### Basic Orval Programmatic Usage

Source: https://orval.dev/docs/reference/integration

Import and use the `orval` function to generate API clients. You can provide a path to your configuration file or call it without arguments to use the default configuration in the current directory.

```javascript
import orval from 'orval';

// Generate using a config file path
await orval('./orval.config.js');

// Generate using current directory's orval config
await orval();
```

```javascript
import { generate } from 'orval';

await generate('./orval.config.js');
```

--------------------------------

### Configure Solid Query Client in Orval

Source: https://orval.dev/docs/versions/v8

To use the Solid Query client for SolidStart applications, set `client: 'solid-query'` in your Orval configuration's output settings.

```typescript
export default defineConfig({
  petstore: {
    output: {
      client: 'solid-query',
      target: './src/api',
    },
  },
});
```

--------------------------------

### Migrate Configuration File

Source: https://orval.dev/docs/versions/v8

Rename your Orval configuration file from `.js` to `.mjs` to support ESM, or add `"type": "module"` to your package.json.

```bash
mv orval.config.js orval.config.mjs
```

```json
{
  "type": "module"
}
```

--------------------------------

### Define Pet Store API Schema (OpenAPI)

Source: https://orval.dev/

This OpenAPI 3.0.0 specification defines a simple Pet Store API with a /pets endpoint and a Pet schema.

```yaml
openapi: 3.0.0
info:
  title: Pet Store API
  version: 1.0.0
paths:
  /pets:
    get:
      operationId: listPets
      responses:
        200:
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Pet'
components:
  schemas:
    Pet:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string

```

--------------------------------

### Check Node.js Version

Source: https://orval.dev/docs/versions/v8

Ensure your Node.js version is 22.18.0 or higher before migrating to ESM.

```bash
# Check your Node.js version
node --version  # Should be >= 22.18.0
```

--------------------------------

### Orval Build Script Integration (Node.js)

Source: https://orval.dev/docs/reference/integration

Create a Node.js script to programmatically generate API clients using Orval. This script handles the generation process and includes basic error handling.

```javascript
const { generate } = require('orval');

async function main() {
  try {
    await generate();
    console.log('API client generated successfully');
  } catch (error) {
    console.error('Failed to generate API client:', error);
    process.exit(1);
  }
}

main();
```

--------------------------------

### Update Programmatic Imports

Source: https://orval.dev/docs/versions/v8

Switch from `require()` to `import` syntax for Orval when used programmatically.

```javascript
- const { generate } = require('orval');
+ import { generate } from 'orval';
```

--------------------------------

### Update Zod Schema Naming

Source: https://orval.dev/docs/versions/v8

Schema names generated by Zod should now follow PascalCase convention.

```javascript
- export const createPetsBody = zod.object({ ... })
+ export const CreatePetsBody = zod.object({ ... })
```

--------------------------------

### Configure Mock Generators

Source: https://orval.dev/docs/versions/v8

Use the `generators` array within `output.mock` to specify multiple mock generators like MSW and Faker.

```typescript
output: {
  mock: { generators: [{ type: 'msw' }] },
}
```

```typescript
output: {
  mock: {
    generators: [{ type: 'msw', delay: 1000, useExamples: true, locale: 'fr' }],
  },
}
```

```typescript
output: {
  mock: { indexMockFiles: true, generators: [{ type: 'msw' }] },
}
```

```typescript
output: {
  mock: { generators: [{ type: 'faker' }] },
}
```

--------------------------------

### Specifying a Custom Workspace Directory

Source: https://orval.dev/docs/reference/integration

Define a custom workspace directory for Orval generation using the `generate` function. This allows you to control the base directory for relative paths in your configuration.

```javascript
import { generate } from 'orval';

const workspace = '/path/to/your/project';
await generate('./orval.config.js', workspace);
```

--------------------------------

### Configure Axios HTTP Client in Orval

Source: https://orval.dev/docs/versions/v8

To continue using Axios as the HTTP client instead of the default fetch, specify `httpClient: 'axios'` in your Orval configuration.

```typescript
export default defineConfig({
  petstore: {
    output: {
      httpClient: 'axios',
      target: './src/api',
    },
  },
});
```

--------------------------------

### Configure Zod Coercion

Source: https://orval.dev/docs/versions/v8

Use `override.zod.coerce` to enable type coercion for parameters, queries, headers, and responses.

```typescript
export default defineConfig({
  petstore: {
    output: {
      override: {
        zod: {
          coerce: {
            param: true,
            query: true,
            header: true,
            body: true,
            response: true,
          },
        },
      },
    },
  },
});
```

--------------------------------

### Orval Generate Function Signature

Source: https://orval.dev/docs/reference/integration

The `generate` function in Orval accepts an optional configuration export, an optional workspace path, and optional global options to override configuration settings.

```javascript
function generate(
  optionsExport?: string | OptionsExport,
  workspace?: string,
  options?: GlobalOptions,
): Promise<void>;
```

--------------------------------

### Migrate Orval Config to ESM

Source: https://orval.dev/docs/versions/v8

To use Orval v8 with ESM, rename your configuration file to `.mjs` or add `"type": "module"` to your `package.json`.

```bash
# Rename config to .mjs
mv orval.config.js orval.config.mjs

# Or add to package.json
# "type": "module"
```

--------------------------------

### Configure Angular Query Client in Orval

Source: https://orval.dev/docs/versions/v8

To use the Angular Query client, set `client: 'angular-query'` in your Orval configuration's output settings.

```typescript
export default defineConfig({
  petstore: {
    output: {
      client: 'angular-query',
      target: './src/api',
    },
  },
});
```

--------------------------------

### Enable SWR Error Type Generation

Source: https://orval.dev/docs/versions/v8

Set `output.override.swr.generateErrorTypes: true` to generate custom error type aliases for SWR hooks.

```typescript
export default defineConfig({
  petstore: {
    output: {
      override: {
        swr: {
          generateErrorTypes: true,
        },
      },
    },
  },
});
```

--------------------------------

### Configuring Watch Mode in Orval

Source: https://orval.dev/docs/reference/integration

Enable Orval's watch mode to automatically regenerate API clients when source files change. You can enable it globally or specify specific files and directories to monitor.

```javascript
import { generate } from 'orval';

// Enable watch mode
await generate('./orval.config.js', process.cwd(), {
  watch: true,
});

// Watch specific files/directories
await generate('./orval.config.js', process.cwd(), {
  watch: ['./specs/*.yaml', './src/custom-types.ts'],
});
```

--------------------------------

### Enable Runtime Validation with Zod in Orval

Source: https://orval.dev/docs/versions/v8

To enable runtime validation using Zod, set `runtimeValidation: true` within the `override.fetch` configuration. This requires `type: 'zod'` for schemas.

```typescript
export default defineConfig({
  petstore: {
    output: {
      schemas: { type: 'zod' },
      client: 'fetch',
      override: {
        fetch: {
          runtimeValidation: true,
        },
      },
    },
  },
});
```

--------------------------------

### Overriding Global Options in Orval

Source: https://orval.dev/docs/reference/integration

Override Orval's configuration settings using global options passed to the `generate` function. This is useful for enabling features like watch mode, controlling output, or specifying formatters.

```javascript
import { generate, type GlobalOptions } from 'orval';

const globalOptions: GlobalOptions = {
  // File watching
  watch: true, // Enable watch mode (boolean)
  // watch: './specs/**/*.yaml',        // Watch specific file pattern (string)
  // watch: ['./specs/*.yaml'],         // Watch multiple patterns (string[])

  // Output control
  clean: true, // Clean all output directories (boolean)
  // clean: ['./src/api', './types'],   // Clean specific directories (string[])
  output: './src/generated', // Override output directory

  // Code formatting (only one formatter can be used at a time)
  formatter: 'prettier', // 'prettier' | 'biome' | 'oxfmt'

  // HTTP client configuration
  client: 'fetch', // Override HTTP client
  httpClient: 'fetch', // HTTP implementation: 'axios' | 'fetch'

  // Generation mode
  mode: 'split', // Output mode: 'single' | 'split' | 'tags' | 'tags-split'

  // Mock data generation
  mock: true, // Enable mock data generation
  // mock: { generators: [{ type: 'msw', delay: 1000 }] },  // Configure mock options

  // TypeScript configuration
  tsconfig: './tsconfig.json', // Custom tsconfig path
  // tsconfig: { compilerOptions: {...} },  // Inline tsconfig

  // Package configuration
  packageJson: './package.json',
  input: './api-spec.yaml',
};

await generate('./orval.config.js', process.cwd(), globalOptions);
```

--------------------------------

### Disable Validation

Source: https://orval.dev/docs/versions/v8

Set `input.unsafeDisableValidation: true` to bypass spec validation. Use `input.override.transformer` to fix issues in-place before validation.

```typescript
export default defineConfig({
  petstore: {
    input: {
      target: './petstore.yaml',
      unsafeDisableValidation: true,
    },
  },
});
```

--------------------------------

### Maintain Previous Behavior for Combined Types in Orval

Source: https://orval.dev/docs/versions/v8

To keep the previous behavior of aliasing `anyOf`, `oneOf`, and `allOf` types instead of inlining them, set `aliasCombinedTypes: true` in the `override` configuration.

```typescript
export default defineConfig({
  petstore: {
    output: {
      override: {
        aliasCombinedTypes: true,
      },
    },
  },
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.