Fetch Client

To use the Fetch API as an HTTP client with swr or TanStack Query clients, change the httpClient option from axios to fetch.

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      client: 'swr',
6      httpClient: 'fetch'
7      ...
8    },
9  },
10};

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.

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        fetch: {
7          includeHttpResponseReturnType: false,
8        },
9      },
10    },
11    ...
12  },
13};

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.

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