Orval - Generate type-safe API clients from OpenAPI

Set a custom base URL for each OpenAPI specification, or use the servers field from the spec.

Configuration

orval.config.ts

import { defineConfig } from 'orval';

export default defineConfig({
  petstore: {
    output: {
      target: 'src/petstore.ts',
      baseUrl: '/api/v2',
      // or full URL:
      // baseUrl: 'https://petstore.swagger.io/v2',
    },
  },
});

From OpenAPI Specification

Use the servers field from your OpenAPI spec:

orval.config.ts

import { defineConfig } from 'orval';

export default defineConfig({
  petstore: {
    output: {
      target: 'src/petstore.ts',
      baseUrl: {
        getBaseUrlFromSpecification: true,
        variables: {
          environment: 'api.dev',
        },
      },
    },
  },
});

To resolve the API base URL when your app runs (for example from environment variables) while using Orval's generated fetch client and built-in override.fetch features, set baseUrl.runtime in your output config. This is separate from mock.baseUrl, which only affects generated MSW handlers.

HTTP Client Configuration

Axios

Set a default baseURL:

axios.defaults.baseURL = '<BACKEND URL>';

Or use an interceptor:

axios.interceptors.request.use((config) => ({
  ...config,
  baseURL: '<BACKEND URL>',
}));

Or create a custom Axios instance:

const AXIOS_INSTANCE = axios.create({ baseURL: '<BACKEND URL>' });

Fetch Client

Create a custom fetch wrapper:

const getUrl = (contextUrl: string): string => {
  const url = new URL(contextUrl);
  const baseUrl =
    process.env.NODE_ENV === 'production'
      ? 'productionBaseUrl'
      : 'http://localhost:3000';

  return new URL(`${baseUrl}${url.pathname}${url.search}`).toString();
};

export const customFetch = async <T>(
  url: string,
  options: RequestInit,
): Promise<T> => {
  const response = await fetch(getUrl(url), options);
  const data = await response.json();
  return { status: response.status, data } as T;
};

See the complete example.

Angular HTTP Client

Use an interceptor:

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const apiReq = req.clone({ url: `<BACKEND URL>/${req.url}` });
    return next.handle(apiReq);
  }
}

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: APIInterceptor,
    multi: true,
  },
];

Custom Base URL