Fetch

The fetch API has the advantage of reducing the bundle size of the application compared to using Axios. It can also act as an http client in server-side frameworks and edge computing runtimes such as Cloudflare, Vercel Edge and Deno.

You should have 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});

Checkout the orval config reference to see all available options. Like the following example from 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};

The fetch client will generate an implementation file with following per path in your 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 call fetch API.

Checkout here the full example

Custom function

You can add a custom fetch function to your 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};

And, you prepare like the sample implementation Then, you can generate a fetch client that calls the customFetch function like bellow:

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};