feat(context): getResponseItem config

Author: wangcch

src/context.ts

@@ -1,7 +1,7 @@
 import type { InjectionKey } from "vue";
 import { getCurrentInstance, inject } from "vue";
 
-import type { AxiosInstance } from "axios";
+import type { AxiosInstance, AxiosResponse } from "axios";
 import axios from "axios";
 
 import type { App } from "../demi";
@@ -12,6 +12,8 @@ const INJECT_INSIDE_WARN_MSG =
 export type RequestConfigType = {
   /** Axios instance. You can pass your axios with a custom config. */
   instance?: AxiosInstance;
+  /** custom data value. @default response['data'] */
+  getResponseItem?: (res?: any) => unknown;
 };
 
 export const AXIOS_USE_VUE_PROVIDE_KEY = Symbol(
@@ -39,16 +41,17 @@ export const setUseRequestConfig = (app: App, options?: RequestConfigType) => {
   }
 };
 
+const defaultGetResponseData = (res: AxiosResponse) => res?.data;
+
 export const getUseRequestConfig = (): RequestConfigType &
-  Required<Pick<RequestConfigType, "instance">> => {
+  Required<Pick<RequestConfigType, "instance" | "getResponseItem">> => {
   const _isInside = Boolean(getCurrentInstance());
   if (!_isInside) {
     console.warn(INJECT_INSIDE_WARN_MSG);
   }
 
-  const { instance = axios } = _isInside
-    ? inject<RequestConfigType>(AXIOS_USE_VUE_PROVIDE_KEY, {})
-    : {};
+  const { instance = axios, getResponseItem = defaultGetResponseData } =
+    _isInside ? inject<RequestConfigType>(AXIOS_USE_VUE_PROVIDE_KEY, {}) : {};
 
-  return { instance };
+  return { instance, getResponseItem };
 };

src/request.ts

@@ -6,23 +6,43 @@ import type {
 } from "axios";
 import axios from "axios";
 
-export type _ResponseDataItemType<T> = T extends AxiosResponse<infer D1>
-  ? D1
-  : T extends { data: infer D2 } | { data?: infer D2 }
-  ? D2
-  : undefined;
-
-export interface Resource<T, D = any, W = AxiosResponse>
-  extends AxiosRequestConfig<D> {
-  _payload?: W extends AxiosResponse ? AxiosResponse<T, D> : T;
+export interface Resource<
+  T = AxiosResponse,
+  D = any,
+  K1 extends keyof T = never,
+  K2 extends keyof T[K1] = never,
+  K3 extends keyof T[K1][K2] = never,
+  K4 extends keyof T[K1][K2][K3] = never,
+  K5 extends keyof T[K1][K2][K3][K4] = never,
+> extends AxiosRequestConfig<D> {
+  _payload?: T;
+  _payload_item?: [K5] extends [never]
+    ? [K4] extends [never]
+      ? [K3] extends [never]
+        ? [K2] extends [never]
+          ? [K1] extends [never]
+            ? T extends AxiosResponse<infer DD> | { data?: infer DD }
+              ? DD
+              : undefined
+            : T[K1]
+          : T[K1][K2]
+        : T[K1][K2][K3]
+      : T[K1][K2][K3][K4]
+    : T[K1][K2][K3][K4][K5];
 }
 
-export type Request<T = any, D = any, W = any> = (
-  ...args: any[]
-) => Resource<T, D, W>;
+export type Request<
+  T = any,
+  D = any,
+  K1 extends keyof T = never,
+  K2 extends keyof T[K1] = never,
+  K3 extends keyof T[K1][K2] = never,
+  K4 extends keyof T[K1][K2][K3] = never,
+  K5 extends keyof T[K1][K2][K3][K4] = never,
+> = (...args: any[]) => Resource<T, D, K1, K2, K3, K4, K5>;
 
 export type Payload<T extends Request, Check = false> = Check extends true
-  ? _ResponseDataItemType<ReturnType<T>["_payload"]>
+  ? ReturnType<T>["_payload_item"]
   : ReturnType<T>["_payload"];
 export type BodyData<T extends Request> = ReturnType<T>["data"];
 
@@ -71,18 +91,23 @@ export type RequestCallbackFn<T extends Request> = {
 /**
  * For TypeScript type deduction
  */
-export function _request<T, D = any, W = false>(
-  config: AxiosRequestConfig<D>,
-): Resource<T, D, W> {
+export function _request<
+  T,
+  D = any,
+  K1 extends keyof T = never,
+  K2 extends keyof T[K1] = never,
+  K3 extends keyof T[K1][K2] = never,
+  K4 extends keyof T[K1][K2][K3] = never,
+  K5 extends keyof T[K1][K2][K3][K4] = never,
+>(config: AxiosRequestConfig<D>): Resource<T, D, K1, K2, K3, K4, K5> {
   return config;
 }
 
 /**
  * For TypeScript type deduction
  */
-export const request = <T, D = any, W = AxiosResponse<T, D>>(
-  config: AxiosRequestConfig<D>,
-) => _request<T, D, W>(config);
+export const request = <T, D = any>(config: AxiosRequestConfig<D>) =>
+  _request<AxiosResponse<T, D>, D>(config);
 
 export function createRequestError<
   T = any,

src/useRequest.ts

@@ -76,8 +76,9 @@ export function useRequest<T extends Request>(
         .then((res: NonNullable<Payload<T>>) => {
           removeCancelToken(_source.token);
 
-          onCompleted?.(res?.data, res);
-          return [res?.data, res] as const;
+          const _data = requestConfig.getResponseItem(res) as Payload<T, true>;
+          onCompleted?.(_data, res);
+          return [_data, res] as const;
         })
         .catch((err: AxiosError<Payload<T>, BodyData<T>>) => {
           removeCancelToken(_source.token);

tests/request.test.ts

@@ -73,9 +73,9 @@ describe("type checking", () => {
   const rq2 = () => _request<DataType2>({});
 
   it("request", () => {
-    expectTypeOf(rq0()).toEqualTypeOf<Resource<DataType, any, false>>();
+    expectTypeOf(rq0()).toEqualTypeOf<Resource<DataType, any>>();
     expectTypeOf(rq1()).toEqualTypeOf<
-      Resource<DataType, any, AxiosResponse<DataType, any>>
+      Resource<AxiosResponse<DataType>, any, "data">
     >();
 
     const c0 = null as unknown as Payload<typeof rq0>;