Fetch Client

The Fetch API is the default HTTP client for swr and TanStack Query clients.

1import { defineConfig } from 'orval';
2
3export default defineConfig({
4  petstore: {
5    output: {
6      ...
7      client: 'swr',
8      ...
9    },
10  },
11});

1/**
2 * @summary List all pets
3 */
4export type listPetsResponse = {
5  data: Pets | BadRequest;
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 normalizedParams.size
21    ? `http://localhost:8000/pets?${normalizedParams.toString()}`
22    : `http://localhost:8000/pets`;
23};
24
25export const listPets = async (
26  params?: ListPetsParams,
27  options?: RequestInit,
28): Promise<listPetsResponse> => {
29  const res = await fetch(getListPetsUrl(params), {
30    ...options,
31    method: 'GET',
32  });
33  const data: Pets =
34    [204, 205, 304].includes(res.status) || !res.body ? {} : await res.json();
35
36  return { status: res.status, data };
37};
38
39export const getListPetsKey = (params?: ListPetsParams) =>
40  [`http://localhost:8000/pets`, ...(params ? [params] : [])] as const;
41
42export type ListPetsQueryResult = NonNullable<
43  Awaited<ReturnType<typeof listPets>>
44>;
45export type ListPetsQueryError = Promise<Pets | Error>;
46
47/**
48 * @summary List all pets
49 */
50export const useListPets = <TError = Promise<Pets | Error>>(
51  params?: ListPetsParams,
52  options?: {
53    swr?: SWRConfiguration<Awaited<ReturnType<typeof listPets>>, TError> & {
54      swrKey?: Key;
55      enabled?: boolean;
56    };
57    fetch?: RequestInit;
58  },
59) => {
60  const { swr: swrOptions, fetch: fetchOptions } = options ?? {};
61
62  const isEnabled = swrOptions?.enabled !== false;
63  const swrKey =
64    swrOptions?.swrKey ?? (() => (isEnabled ? getListPetsKey(params) : null));
65  const swrFn = () => listPets(params, fetchOptions);
66
67  const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
68    swrKey,
69    swrFn,
70    swrOptions,
71  );
72
73  return {
74    swrKey,
75    ...query,
76  };
77};

Returning the Originally Defined Return Type

When using fetch as the httpClient, by default the fetch response type includes HTTP status. When using swr or queries, you will be accessing the returned data through data.data, which may become tedious. To return a defined return type instead of an automatically generated return type, set override.fetch.includeHttpResponseReturnType value to false.

1import { defineConfig } from 'orval';
2
3export default defineConfig({
4  petstore: {
5    output: {
6      ...
7      override: {
8        fetch: {
9          includeHttpResponseReturnType: false,
10        },
11      },
12    },
13    ...
14  },
15});

1/**
2 * @summary List all pets
3 */
4- export type listPetsResponse = {
5-   data: Pets | BadRequest;
6-   status: number;
7- };
8
9export const listPets = async (
10  params?: ListPetsParams,
11  options?: RequestInit,
12- ): Promise<listPetsResponse> => {
13+ ): Promise<Pet> => {
14  const res = await fetch(getListPetsUrl(params), {
15    ...options,
16    method: 'GET',
17  });
18  const data: Pets =
19    [204, 205, 304].includes(res.status) || !res.body ? {} : await res.json();
20
21-  return { status: res.status, data };
22+  return data;
23};

Custom Fetch Client

To use a custom Fetch client, provide a mutator in the override option.

1import { defineConfig } from 'orval';
2
3export default defineConfig({
4  petstore: {
5    output: {
6      ...
7      client: 'swr',
8      override: {
9        mutator: {
10          path: './src/mutator.ts',
11          name: 'customFetch',
12        },
13      },
14    },
15  },
16});