Fetch

The Fetch API is a native browser API, and thus doesn't require bundling additional dependencies, as is the case with Axios. It can also act as an HTTP client in server-side frameworks and edge computing runtimes such as Cloudflare, Vercel Edge and Deno.

Start by providing an OpenAPI specification and an Orval config where you define the mode as fetch.

Example with Fetch

1import { defineConfig } from 'orval';
2
3export default defineConfig({
4  petstore: {
5    output: {
6      mode: 'tags-split',
7      target: 'app/gen/petstore.ts',
8      schemas: 'app/gen/models',
9      client: 'fetch',
10      baseUrl: 'http://localhost:3000',
11      mock: true,
12    },
13    input: {
14      target: './petstore.yaml',
15    },
16  },
17});

Navigate to the Orval config reference to see all available options.

The following example shows autogenerated functions based on this OpenAPI Specification:

1/**
2 * @summary List all pets
3 */
4export type listPetsResponse = {
5  data: Pets;
6  status: number;
7};
8
9export const getListPetsUrl = (params?: ListPetsParams) => {
10  const normalizedParams = new URLSearchParams();
11
12  Object.entries(params || {}).forEach(([key, value]) => {
13    if (value === null) {
14      normalizedParams.append(key, 'null');
15    } else if (value !== undefined) {
16      normalizedParams.append(key, value.toString());
17    }
18  });
19
20  return `http://localhost:3000/pets?${normalizedParams.toString()}`;
21};
22
23export const listPets = async (
24  params?: ListPetsParams,
25  options?: RequestInit,
26): Promise<listPetsResponse> => {
27  const res = await fetch(getListPetsUrl(params), {
28    ...options,
29    method: 'GET',
30  });
31  const data = await res.json();
32
33  return { status: res.status, data };
34};

Setting the client parameter to fetch will generate an implementation file with the following for each path in the OpenAPI Specification.

1. A response type for the Fetch function
2. A function to generate request URL including query parameters and path parameters
3. A function that calls the Fetch API.

Checkout here the full example

Custom Function

It is possible to add a custom fetch function to the Orval config.

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

Copy the sample implementation from GitHub and modify the function as needed. The generated functions will now call the customFetch function:

1export const listPets = async (
2  params?: ListPetsParams,
3  options?: RequestInit,
4): Promise<listPetsResponse> => {
5  return customFetch<Promise<listPetsResponse>>(getListPetsUrl(params), {
6    ...options,
7    method: 'GET',
8  });
9};