Fetch client

If you want to use to the fetch API as an http client with swr or TanStack Query clients, you can change the http client from axios to fetch API by setting the httpClient option.

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

1 /**
2  * @summary List all pets
3  */
4 export type listPetsResponse = {
5   data: Pets;
6   status: number;
7 };
8 
9 export 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 
25 export 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 = await res.json();
34 
35   return { status: res.status, data };
36 };
37 
38 export const getListPetsKey = (params?: ListPetsParams) =>
39   [`http://localhost:8000/pets`, ...(params ? [params] : [])] as const;
40 
41 export type ListPetsQueryResult = NonNullable<
42   Awaited<ReturnType<typeof listPets>>
43 >;
44 export type ListPetsQueryError = Promise<Pets | Error>;
45 
46 /**
47  * @summary List all pets
48  */
49 export const useListPets = <TError = Promise<Pets | Error>>(
50   params?: ListPetsParams,
51   options?: {
52     swr?: SWRConfiguration<Awaited<ReturnType<typeof listPets>>, TError> & {
53       swrKey?: Key;
54       enabled?: boolean;
55     };
56     fetch?: RequestInit;
57   },
58 ) => {
59   const { swr: swrOptions, fetch: fetchOptions } = options ?? {};
60 
61   const isEnabled = swrOptions?.enabled !== false;
62   const swrKey =
63     swrOptions?.swrKey ?? (() => (isEnabled ? getListPetsKey(params) : null));
64   const swrFn = () => listPets(params, fetchOptions);
65 
66   const query = useSwr<Awaited<ReturnType<typeof swrFn>>, TError>(
67     swrKey,
68     swrFn,
69     swrOptions,
70   );
71 
72   return {
73     swrKey,
74     ...query,
75   };
76 };

return original defined return type

When using fetch as an httpClient, by default the fetch response type includes http status. If use swr or queries, i will be accessing things like data.data, which will be noisy so if you want to return a defined return type instead of an automatically generated return type, set override.fetch.includeHttpStatusReturnType value to false.

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

1 /**
2  * @summary List all pets
3  */
4 - export type listPetsResponse = {
5 -   data: Pets;
6 -   status: number;
7 - };
8 
9 export 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 = await res.json();
19 
20 -  return { status: res.status, data };
21 +  return data as Pet;
22 };

custom fetch client

Also, if you want to use to the custom fetch client, you can set in the override option.

1 module.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 };