Fetch 客户端

如果您想使用 fetch API 作为 swr 或 TanStack Query 客户端的 HTTP 客户端，可以通过设置 httpClient 选项将 HTTP 客户端从 axios 更改为 fetch API。

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

返回原始定义的返回类型

当使用 fetch 作为 httpClient 时，默认情况下 fetch 响应类型包含 HTTP 状态。 如果使用 swr 或查询，我将访问像 data.data 这样的内容，这会很嘈杂，所以如果您想返回定义的返回类型而不是自动生成的返回类型，请将 override.fetch.includeHttpResponseReturnType 值设置为 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};

自定义 fetch 客户端

另外，如果您想使用自定义 fetch 客户端，可以在 override 选项中设置。

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