Custom HTTP Client

To set up a custom HTTP client, add a mutator function to the configuration file, and setup a custom instance of your preferred HTTP client.

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        mutator: {
7          path: './api/mutator/custom-instance.ts',
8          name: 'customInstance',
9        },
10      },
11    }
12    ...
13  },
14};

1// custom-instance.ts
2
3const baseURL = '<BACKEND URL>'; // use your own URL here or environment variable
4
5export const customInstance = async <T>(
6  url: string,
7  {
8    method,
9    params,
10    body,
11  }: {
12    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
13    params?: any;
14    body?: BodyType<unknown>;
15    responseType?: string;
16  },
17): Promise<T> => {
18  let targetUrl = `${baseURL}${url}`;
19
20  if (params) {
21    targetUrl += '?' + new URLSearchParams(params);
22  }
23
24  const response = await fetch(targetUrl, {
25    method,
26    body,
27  });
28
29  return response.json();
30};
31
32export default customInstance;
33
34// In some case with react-query and swr you want to be able to override the return error type so you can also do it here like this
35export type ErrorType<Error> = AxiosError<Error>;
36// In case you want to wrap the body type (optional)
37// (if the custom instance is processing data before sending it, like changing the case for example)
38export type BodyType<BodyData> = CamelCase<BodyType>;

Alternatively, refer to the using custom Fetch with Next.js sample app here.

Angular

The Angular client allows adding mutator functions to the configuration to set up your preferred HTTP client.

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        mutator: 'src/api/mutator/response-type.ts'
7      }
8    }
9    ...
10  },
11};

1// response-type.ts
2
3import { HttpClient } from '@angular/common/http';
4import { Observable } from 'rxjs';
5
6const responseType = <Result>(
7  {
8    url,
9    method,
10    params,
11    data,
12  }: {
13    url: string;
14    method: string;
15    params?: any;
16    data?: any;
17    headers?: any;
18  },
19  http: HttpClient,
20): Observable<Result> =>
21  http.request<Result>(method, url, {
22    params,
23    body: data,
24    responseType: 'json',
25  });
26
27export default responseType;

Refer to Angular sample app for more details.

https://github.com/orval-labs/orval/tree/master/samples/angular-app