feat(useRequest): getResponseItem option

Author: wangcch

src/context.ts

@@ -12,7 +12,7 @@ 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'] */
+  /** custom `data` value. @default response['data'] */
   getResponseItem?: (res?: any) => unknown;
 };
 

src/useRequest.ts

@@ -22,6 +22,8 @@ import { createRequestError } from "./request";
 
 export type UseRequestOptions<T extends Request> = RequestCallbackFn<T> & {
   instance?: AxiosInstance;
+  /** custom returns the value of `data`(index 0). @default (r) => r?.data */
+  getResponseItem?: (res?: any) => unknown;
 };
 
 export type UseRequestResult<T extends Request> = [
@@ -76,7 +78,11 @@ export function useRequest<T extends Request>(
         .then((res) => {
           removeCancelToken(_source.token);
 
-          const _data = requestConfig.getResponseItem(res) as Payload<T, true>;
+          const _data = (
+            options?.getResponseItem
+              ? options.getResponseItem(res as Payload<T>)
+              : requestConfig.getResponseItem(res)
+          ) as Payload<T, true>;
           onCompleted?.(_data, res as Payload<T>);
           return [_data, res as Payload<T>] as const;
         })

src/useResource.ts

@@ -42,7 +42,7 @@ export type UseResourceResult<T extends Request> = [
 
 export type UseResourceOptions<T extends Request> = Pick<
   RequestConfigType,
-  "instance"
+  "instance" | "getResponseItem"
 > &
   RequestCallbackFn<T> & {
     /** Conditional Fetching */
@@ -96,6 +96,7 @@ export function useResource<T extends Request>(
     onCompleted: options?.onCompleted,
     onError: options?.onError,
     instance: options?.instance,
+    getResponseItem: options?.getResponseItem,
   });
 
   const [state, dispatch] = useReducer(getNextState, {

tests/context.test.ts

@@ -93,7 +93,7 @@ describe("context", () => {
         const vm = getCurrentInstance2();
 
         expect(
-          (vm.proxy as any)._provided[AXIOS_USE_VUE_PROVIDE_KEY as any]
+          (vm?.proxy as any)._provided[AXIOS_USE_VUE_PROVIDE_KEY as any]
             ?.instance,
         ).toBe(mockAxiosIns);
 
@@ -156,3 +156,44 @@ describe("context", () => {
     });
   });
 });
+
+describe("config - getResponseItem", () => {
+  test("default value", () => {
+    const Component = defineComponent({
+      setup() {
+        const { getResponseItem } = getUseRequestConfig();
+        expect(getResponseItem).toBeDefined();
+        expect(getResponseItem({ data: 1 })).toBe(1);
+        expect(getResponseItem({})).toBeUndefined();
+        expect(getResponseItem()).toBeUndefined();
+
+        return () => h("div");
+      },
+    });
+
+    mount(Component);
+  });
+
+  test("custom", () => {
+    const fn = (r) => ({
+      o: r,
+      d: r?.data,
+      msg: r?.message || r?.statusText || r?.status,
+    });
+    const Component = defineComponent({
+      setup() {
+        const { getResponseItem } = getUseRequestConfig();
+        expect(getResponseItem).toBeDefined();
+        expect(getResponseItem({ data: 1 })).toStrictEqual(fn({ data: 1 }));
+        expect(getResponseItem({})).toStrictEqual(fn({}));
+        expect(getResponseItem()).toStrictEqual(fn(undefined));
+
+        return () => h("div");
+      },
+    });
+
+    mount(Component, (app) => {
+      app.use(AxioUseVue, { getResponseItem: fn });
+    });
+  });
+});

tests/request.test.ts

@@ -84,7 +84,7 @@ describe("type checking", () => {
     expectTypeOf(c1).toEqualTypeOf<undefined>();
 
     const c2 = null as unknown as Payload<typeof rq1>;
-    expectTypeOf(c2).toEqualTypeOf<AxiosResponse<DataType, any> | undefined>();
+    expectTypeOf(c2).toEqualTypeOf<AxiosResponse<DataType, any>>();
     const c3 = null as unknown as Payload<typeof rq1, true>;
     expectTypeOf(c3).toEqualTypeOf<DataType | undefined>();
 

tests/useRequest.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi, expectTypeOf } from "vitest";
 import { defineComponent, h } from "vue";
-import type { AxiosResponse } from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
 import axios from "axios";
 
 import AxiosUseVue, { useRequest, _request } from "../src";
@@ -186,4 +186,62 @@ describe("useRequest", () => {
     expect(response).toStrictEqual(mockItem);
     expectTypeOf(response).toMatchTypeOf<MockDataUserItem | undefined>();
   });
+
+  test("custom response (custom request and getResponseItem)", async () => {
+    const TARGET_ID = "1";
+    const mockItem = MOCK_DATA_USER_LIST.find((i) => i.id === TARGET_ID);
+
+    type _MyRes<T> = { status: number; result?: T; message?: string };
+
+    const _getResponseItem = (r: _MyRes<unknown>) => r.result;
+    const _instance = axios.create({
+      baseURL: BASE_URL,
+    });
+    _instance.interceptors.response.use(
+      (d) =>
+        ({
+          status: (d.data?.code as number) || d.status,
+          result: d.data,
+          message: d.data?.msg || d.statusText,
+        } as any),
+    );
+    const myrequest = <T>(config: AxiosRequestConfig) =>
+      _request<{ status: number; result?: T; message?: string }, any, "result">(
+        config,
+      );
+
+    const [createRequest] = useRequest(
+      (id: string) =>
+        myrequest<MockDataUserItem>({
+          method: "get",
+          url: `/user/${id}`,
+        }),
+      {
+        instance: _instance,
+        getResponseItem: _getResponseItem,
+        onCompleted: (d, r) => {
+          expect(d).toStrictEqual(mockItem);
+          expectTypeOf(d).toMatchTypeOf<MockDataUserItem | undefined>();
+          expect(r).toStrictEqual({
+            status: 200,
+            result: mockItem,
+            message: "OK",
+          });
+          expectTypeOf(r).toMatchTypeOf<_MyRes<MockDataUserItem> | undefined>();
+        },
+      },
+    );
+
+    const [data, response] = await createRequest(TARGET_ID).ready();
+    expect(data).toStrictEqual(mockItem);
+    expectTypeOf(data).toMatchTypeOf<MockDataUserItem | undefined>();
+    expect(response).toStrictEqual({
+      status: 200,
+      result: mockItem,
+      message: "OK",
+    });
+    expectTypeOf(response).toMatchTypeOf<
+      _MyRes<MockDataUserItem> | undefined
+    >();
+  });
 });