Quellcode durchsuchen

chore: 抽取公共useQueryDataInfo hook

xyh vor 2 Jahren
Ursprung
Commit
28b6837278

+ 15 - 5
packages/app/src/hooks/useDataInfo/index.ts

@@ -1,11 +1,21 @@
 import {BaseListResult} from '@models';
 import {useQuery} from '@tanstack/react-query';
 
-export function useDataInfo<T>(fn: (id: string) => BaseListResult<T>, id: string): T | undefined {
+type UseQueryDataInfoOptions<R, P extends unknown[]> = {
+  queryFn: (...args: P) => BaseListResult<R>
+  params: P,
+  enabled: boolean,
+  extraKeys?: unknown[],
+  label?: string,
+};
+
+export function useQueryDataInfo<R, P extends unknown[]>(
+  {queryFn, params, enabled, extraKeys = [], label = ''}: UseQueryDataInfoOptions<R, P>,
+): R | undefined {
   const {data} = useQuery(
-    [fn.name, id],
+    [queryFn.name, ...params, ...extraKeys],
     async function() {
-      const data = await fn(id);
+      const data = await queryFn(...params);
 
       if (data.msg === '200') {
         const {data: {list}} = data;
@@ -13,12 +23,12 @@ export function useDataInfo<T>(fn: (id: string) => BaseListResult<T>, id: string
         if (list.length > 0)
           return list[0];
 
-        throw new Error('未获取到信息');
+        throw new Error(`未获取到${label}信息`);
       }
 
       throw new Error(data.errMsg);
     },
-    {suspense: true, enabled: Boolean(id)},
+    {suspense: true, enabled},
   );
 
   return data;

+ 1 - 1
packages/app/src/pages/container/context.ts

@@ -1,5 +1,5 @@
 import {createPageContext, createSearchContext} from '@hooks';
-import {Dispatch, useReducer} from 'react';
+import {useReducer} from 'react';
 import {createContext} from 'use-context-selector';
 
 /** 页码管理 */

+ 6 - 2
packages/app/src/pages/container/table/put-modal/hooks.ts

@@ -1,6 +1,6 @@
 import {addContainer, editContainer, getContainerInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {useDataInfo, usePutData} from '@hooks';
+import {useQueryDataInfo, usePutData} from '@hooks';
 import {AddContainerParams} from '@models';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -78,7 +78,11 @@ export function useControl() {
 }
 
 export function useWatchId(id: string) {
-  const data = useDataInfo(getContainerInfo, id);
+  const data = useQueryDataInfo({
+    queryFn: getContainerInfo,
+    params: [id],
+    enabled: Boolean(id),
+  });
   const {setValue} = useFormContext<FormState>();
 
   useEffect(function() {

+ 8 - 19
packages/app/src/pages/department/table/modal/hooks.ts

@@ -2,9 +2,10 @@ import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
 import {object, string} from 'yup';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {addDepartment, editDepartment, getDepartmentInfo} from '@apis';
 import {message} from 'antd';
+import {useQueryDataInfo} from '@hooks';
 
 type FormState = {
   departmentName: string;
@@ -88,24 +89,12 @@ export function useField() {
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getDepartmentInfo.name, id, 'PDA'],
-    async function() {
-      const data = await getDepartmentInfo(id);
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到部门信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      enabled: Boolean(id),
-      suspense: true,
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getDepartmentInfo,
+    params: [id],
+    enabled: Boolean(id),
+    extraKeys: ['PDA'],
+  });
 
   useEffect(function() {
     setValue('departmentName', data?.departmentName ?? '');

+ 7 - 16
packages/app/src/pages/goods/table/modal/hooks.ts

@@ -1,7 +1,8 @@
 import {addGoods, editGoods, getGoodsInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
+import {useQueryDataInfo} from '@hooks';
 import {AddGoodsParams} from '@models';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -190,21 +191,11 @@ export function useField() {
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getGoodsInfo.name, id],
-    async function() {
-      const data = await getGoodsInfo(id);
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到货品信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {enabled: Boolean(id), suspense: true, cacheTime: 0},
-  );
+  const data = useQueryDataInfo({
+    queryFn: getGoodsInfo,
+    params: [id],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('goodsName', data?.name ?? '');

+ 7 - 21
packages/app/src/pages/menu-id/table/modal/hooks.ts

@@ -1,8 +1,8 @@
 import {addMenu, editMenu, getMenuInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {useContextSection} from '@hooks';
+import {useContextSection, useQueryDataInfo} from '@hooks';
 import {pIdContext} from '@pages/menu-id/context';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -97,25 +97,11 @@ export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
   const pId = useContextSection(pIdContext, state => state[0]);
 
-  const {data} = useQuery(
-    [getMenuInfo.name, id, 'PC', pId],
-    async function() {
-      const data = await getMenuInfo(pId, id, 'PC');
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到菜单信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      enabled: Boolean(id),
-      suspense: true,
-
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getMenuInfo,
+    params: [pId, id, 'PC'],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('menuUrl', data?.url ?? '');

+ 7 - 19
packages/app/src/pages/menu/table/modal/hooks.ts

@@ -1,6 +1,7 @@
 import {addMenu, editMenu, getMenuInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useQueryDataInfo} from '@hooks';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -94,24 +95,11 @@ export function useField() {
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getMenuInfo.name, id, 'PC', '0'],
-    async function() {
-      const data = await getMenuInfo('0', id, 'PC');
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到菜单信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      enabled: Boolean(id),
-      suspense: true,
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getMenuInfo,
+    params: ['0', id, 'PC'],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('menuUrl', data?.url ?? '');

+ 7 - 19
packages/app/src/pages/pda-menu/table/modal/hooks.ts

@@ -1,6 +1,7 @@
 import {addPDAMenu, editMenu, getMenuInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useQueryDataInfo} from '@hooks';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -96,24 +97,11 @@ export function useField() {
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getMenuInfo.name, id, 'PDA'],
-    async function() {
-      const data = await getMenuInfo('0', id, 'PDA');
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到菜单信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      enabled: Boolean(id),
-      suspense: true,
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getMenuInfo,
+    params: ['0', id, 'PDA'],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('menuID', data?.url ?? '');

+ 7 - 19
packages/app/src/pages/role/table/modal/hooks.ts

@@ -1,7 +1,8 @@
 import {addRole, editRole, getRoleInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
+import {useQueryDataInfo} from '@hooks';
 import {AddRoleParams} from '@models';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -93,24 +94,11 @@ export function useField() {
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getRoleInfo.name, id],
-    async function() {
-      const data = await getRoleInfo(id);
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到角色信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      enabled: Boolean(id),
-      suspense: true,
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getRoleInfo,
+    params: [id],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('roleName', data?.roleName ?? '');

+ 7 - 19
packages/app/src/pages/storage/table/modal/hooks.ts

@@ -1,7 +1,8 @@
 import {addStorage, editStorage, getStorageInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
+import {useQueryDataInfo} from '@hooks';
 import {AddStorageParams} from '@models';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -126,24 +127,11 @@ export function useFormInstance() {
 export function useFormInfoValue(id: string) {
   const {setValue} = useFormContext<FormState>();
 
-  const {data} = useQuery(
-    [getStorageInfo.name, id],
-    async function() {
-      const data = await getStorageInfo(id);
-
-      if (data.msg === '200') {
-        if (data.data.list.length) return data.data.list[0];
-
-        throw new Error('未获取到库位信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      suspense: true,
-      enabled: Boolean(id),
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getStorageInfo,
+    params: [id],
+    enabled: Boolean(id),
+  });
 
   useEffect(function() {
     setValue('storageLocationCode', data?.storageLocationCode ?? '');

+ 7 - 20
packages/app/src/pages/user/table/modal/hooks.ts

@@ -1,7 +1,8 @@
 import {addUser, editUser, getUserInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
+import {useQueryDataInfo} from '@hooks';
 import {AddUserParams} from '@models';
-import {useMutation, useQuery} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {message} from 'antd';
 import {useEffect} from 'react';
 import {useForm, useFormContext} from 'react-hook-form';
@@ -120,25 +121,11 @@ export function useField() {
 }
 
 export function useFetchUserInfo(id: string) {
-  const {data} = useQuery(
-    [id, getUserInfo.name],
-    async function() {
-      const data = await getUserInfo(id);
-
-      if (data.msg === '200') {
-        if (data.data.list[0])
-          return data.data.list[0];
-
-        throw new Error('未获取到用户信息');
-      }
-
-      throw new Error(data.errMsg);
-    },
-    {
-      suspense: true,
-      enabled: Boolean(id),
-    },
-  );
+  const data = useQueryDataInfo({
+    queryFn: getUserInfo,
+    params: [id],
+    enabled: Boolean(id),
+  });
 
   const {setValue} = useFormContext<FormState>();