Custom client

You can add a mutator function to your config and setup a custom instance of your preferred HTTP client.

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

Or, Please refer to the using custom fetch with Next.js sample app here.

Angular

Even if you use the angular client, you can add mutator functions to your configuration to set up your preferred HTTP client.

1 module.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 
3 import { HttpClient } from '@angular/common/http';
4 import { Observable } from 'rxjs';
5 
6 const 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 
27 export default responseType;

Please also refer to sample app for more details.

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