fix: fetch user by @tanstack/react-query #1306 (#1709)

### What problem does this PR solve?

fix: fetch user by @tanstack/react-query #1306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/chunk-method-modal/hooks.ts

-import {
-  useFetchTenantInfo,
-  useSelectParserList,
-} from '@/hooks/user-setting-hooks';
+import { useSelectParserList } from '@/hooks/user-setting-hooks';
 import { useEffect, useMemo, useState } from 'react';
 
 const ParserListMap = new Map([
     );
   }, [parserList, documentExtension]);
 
-  useFetchTenantInfo();
-
   useEffect(() => {
     setSelectedTag(parserId);
   }, [parserId, documentId]);

web/src/hooks/llm-hooks.ts

 import { message } from 'antd';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'umi';
 
 export const useFetchLlmList = (
   modelType?: LlmModelType,
   return data;
 };
 
-export const useSelectLlmInfo = () => {
-  const llmInfo: IThirdOAIModelCollection = useSelector(
-    (state: any) => state.settingModel.llmInfo,
-  );
-
-  return llmInfo;
-};
-
 export const useSelectLlmOptions = () => {
   const llmInfo: IThirdOAIModelCollection = useFetchLlmList();
 

web/src/hooks/logic-hooks.ts

 import { useSetDocumentParser } from './document-hooks';
 import { useSetPaginationParams } from './route-hook';
 import { useOneNamespaceEffectsLoading } from './store-hooks';
-import {
-  useFetchTenantInfo,
-  useSaveSetting,
-  useSelectTenantInfo,
-} from './user-setting-hooks';
+import { useFetchTenantInfo, useSaveSetting } from './user-setting-hooks';
 
 export const useChangeDocumentParser = (documentId: string) => {
   const setDocumentParser = useSetDocumentParser();
 
 export const useChangeLanguage = () => {
   const { i18n } = useTranslation();
-  const saveSetting = useSaveSetting();
+  const { saveSetting } = useSaveSetting();
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(
   return { selectedId, handleItemClick };
 };
 
-export const useFetchModelId = (visible: boolean) => {
-  const fetchTenantInfo = useFetchTenantInfo(false);
-  const tenantInfo = useSelectTenantInfo();
-
-  useEffect(() => {
-    if (visible) {
-      fetchTenantInfo();
-    }
-  }, [visible, fetchTenantInfo]);
+export const useFetchModelId = () => {
+  const { data: tenantInfo } = useFetchTenantInfo();
 
   return tenantInfo?.llm_id ?? '';
 };

web/src/hooks/user-setting-hooks.ts

+import { LanguageTranslationMap } from '@/constants/common';
+import { ResponseGetType } from '@/interfaces/database/base';
 import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { ISystemStatus, IUserInfo } from '@/interfaces/database/userSetting';
 import userService from '@/services/user-service';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'umi';
-
-export const useFetchUserInfo = () => {
-  const dispatch = useDispatch();
-  const fetchUserInfo = useCallback(() => {
-    dispatch({ type: 'settingModel/getUserInfo' });
-  }, [dispatch]);
-
-  useEffect(() => {
-    fetchUserInfo();
-  }, [fetchUserInfo]);
-};
-
-export const useSelectUserInfo = () => {
-  const userInfo: IUserInfo = useSelector(
-    (state: any) => state.settingModel.userInfo,
-  );
-
-  return userInfo;
-};
-
-export const useSelectTenantInfo = () => {
-  const tenantInfo: ITenantInfo = useSelector(
-    (state: any) => state.settingModel.tenantIfo,
-  );
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { message } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useFetchUserInfo = (): ResponseGetType<IUserInfo> => {
+  const { i18n } = useTranslation();
+
+  const { data, isFetching: loading } = useQuery({
+    queryKey: ['userInfo'],
+    initialData: {},
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await userService.user_info();
+      if (data.retcode === 0) {
+        i18n.changeLanguage(
+          LanguageTranslationMap[
+            data.language as keyof typeof LanguageTranslationMap
+          ],
+        );
+      }
+      return data?.data ?? {};
+    },
+  });
 
-  return tenantInfo;
+  return { data, loading };
 };
 
-export const useFetchTenantInfo = (isOnMountFetching: boolean = true) => {
-  const dispatch = useDispatch();
-
-  const fetchTenantInfo = useCallback(() => {
-    dispatch({
-      type: 'settingModel/getTenantInfo',
-    });
-  }, [dispatch]);
+export const useFetchTenantInfo = (): ResponseGetType<ITenantInfo> => {
+  const { data, isFetching: loading } = useQuery({
+    queryKey: ['tenantInfo'],
+    initialData: {},
+    gcTime: 0,
+    queryFn: async () => {
+      const { data: res } = await userService.get_tenant_info();
+      if (res.retcode === 0) {
+        // llm_id is chat_id
+        // asr_id is speech2txt
+        const { data } = res;
+        data.chat_id = data.llm_id;
+        data.speech2text_id = data.asr_id;
+
+        return data;
+      }
 
-  useEffect(() => {
-    if (isOnMountFetching) {
-      fetchTenantInfo();
-    }
-  }, [fetchTenantInfo, isOnMountFetching]);
+      return res;
+    },
+  });
 
-  return fetchTenantInfo;
+  return { data, loading };
 };
 
 export const useSelectParserList = (): Array<{
   value: string;
   label: string;
 }> => {
-  const tenantInfo: ITenantInfo = useSelectTenantInfo();
+  const { data: tenantInfo } = useFetchTenantInfo();
 
   const parserList = useMemo(() => {
-    const parserArray: Array<string> = tenantInfo?.parser_ids.split(',') ?? [];
+    const parserArray: Array<string> = tenantInfo?.parser_ids?.split(',') ?? [];
     return parserArray.map((x) => {
       const arr = x.split(':');
       return { value: arr[0], label: arr[1] };
 };
 
 export const useSaveSetting = () => {
-  const dispatch = useDispatch();
-
-  const saveSetting = useCallback(
-    (userInfo: { new_password: string } | Partial<IUserInfo>): number => {
-      return dispatch<any>({ type: 'settingModel/setting', payload: userInfo });
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['saveSetting'],
+    mutationFn: async (
+      userInfo: { new_password: string } | Partial<IUserInfo>,
+    ) => {
+      const { data } = await userService.setting(userInfo);
+      if (data.retcode === 0) {
+        message.success(t('message.modified'));
+        queryClient.invalidateQueries({ queryKey: ['userInfo'] });
+      }
+      return data?.retcode;
     },
-    [dispatch],
-  );
+  });
 
-  return saveSetting;
+  return { data, loading, saveSetting: mutateAsync };
 };
 
 export const useFetchSystemVersion = () => {

web/src/layouts/components/right-toolbar/index.tsx

 
 import { LanguageList } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
-import { useSelector } from 'umi';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
 const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
-  const { language = 'English' } = useSelector(
-    (state) => state.settingModel.userInfo,
-  );
+  const {
+    data: { language = 'English' },
+  } = useFetchUserInfo();
 
   const handleItemClick: MenuProps['onClick'] = ({ key }) => {
     changeLanguage(key);

web/src/layouts/components/user/index.tsx

-import {
-  useFetchUserInfo,
-  useSelectUserInfo,
-} from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { Avatar } from 'antd';
 import React from 'react';
 import { history } from 'umi';
 import styles from '../../index.less';
 
 const App: React.FC = () => {
-  const userInfo = useSelectUserInfo();
+  const { data: userInfo } = useFetchUserInfo();
 
   const toSetting = () => {
     history.push('/user-setting');
   };
 
-  useFetchUserInfo();
-
   return (
     <Avatar
       size={32}

web/src/pages/add-knowledge/components/knowledge-file/hooks.ts

 } from '@/hooks/document-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
 import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
-import { useFetchTenantInfo } from '@/hooks/user-setting-hooks';
 import { Pagination } from '@/interfaces/common';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { getUnSupportedFilesCount } from '@/utils/document-util';
   const fetchDocumentList = useFetchDocumentList();
   const dispatch = useDispatch();
 
-  useFetchTenantInfo();
-
   useEffect(() => {
     if (knowledgeId) {
       fetchDocumentList();

web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts

 } from '@/hooks/knowledge-hooks';
 import { useSelectLlmOptions } from '@/hooks/llm-hooks';
 import { useNavigateToDataset } from '@/hooks/route-hook';
-import {
-  useFetchTenantInfo,
-  useSelectParserList,
-} from '@/hooks/user-setting-hooks';
+import { useSelectParserList } from '@/hooks/user-setting-hooks';
 import {
   getBase64FromUploadFileList,
   getUploadFileListFromBase64,
   const parserList = useSelectParserList();
   const embeddingModelOptions = useSelectLlmOptions();
 
-  useFetchTenantInfo();
   const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
 
   useEffect(() => {

web/src/pages/chat/chat-configuration-modal/index.tsx

     ConfigurationSegmented.AssistantSetting,
   );
   const promptEngineRef = useRef<Array<IPromptConfigParameters>>([]);
-  const modelId = useFetchModelId(visible);
+  const modelId = useFetchModelId();
   const { t } = useTranslate('chat');
 
   const handleOk = async () => {

web/src/pages/chat/chat-container/index.tsx

 } from '../hooks';
 import { buildMessageItemReference } from '../utils';
 
-import { useSelectUserInfo } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
 const ChatContainer = () => {
   useGetFileIcon();
   const loading = useSelectConversationLoading();
   const { t } = useTranslate('chat');
-  const userInfo = useSelectUserInfo();
+  const { data: userInfo } = useFetchUserInfo();
 
   return (
     <>

web/src/pages/flow/chat/box.tsx

 
 import { useSelectCurrentMessages, useSendMessage } from './hooks';
 
-import { useSelectUserInfo } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
 const FlowChatBox = () => {
     useClickDrawer();
   useGetFileIcon();
   const { t } = useTranslate('chat');
-  const userInfo = useSelectUserInfo();
+  const { data: userInfo } = useFetchUserInfo();
 
   return (
     <>

web/src/pages/flow/hooks.ts

 };
 
 export const useInitializeOperatorParams = () => {
-  const llmId = useFetchModelId(true);
+  const llmId = useFetchModelId();
 
   const initialFormValuesMap = useMemo(() => {
     return {

web/src/pages/knowledge/index.tsx

 import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { useSelectUserInfo } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { Button, Empty, Flex, Input, Space, Spin } from 'antd';
 import KnowledgeCard from './knowledge-card';
   const { searchString, handleInputChange } = useSearchKnowledge();
   const { loading, list: data } = useNextFetchKnowledgeList();
   const list = data.filter((x) => x.name.includes(searchString));
-  const userInfo = useSelectUserInfo();
+  const { data: userInfo } = useFetchUserInfo();
   const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
   const {
     visible,

web/src/pages/user-setting/hooks.ts

-import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
 import { Form } from 'antd';
 import { useEffect, useState } from 'react';
 
 
   return { submittable, form };
 };
-
-export const useSelectSubmitUserInfoLoading = () =>
-  useOneNamespaceEffectsLoading('settingModel', ['setting']);
-
-export const useSelectUserInfoLoading = () =>
-  useOneNamespaceEffectsLoading('settingModel', ['getUserInfo']);

web/src/pages/user-setting/model.ts

-import { LanguageTranslationMap } from '@/constants/common';
-import { ITenantInfo } from '@/interfaces/database/knowledge';
-import {
-  IFactory,
-  IMyLlmValue,
-  IThirdOAIModelCollection as IThirdAiModelCollection,
-} from '@/interfaces/database/llm';
-import { IUserInfo } from '@/interfaces/database/userSetting';
-import i18n from '@/locales/config';
-import userService from '@/services/user-service';
-import { message } from 'antd';
-import { DvaModel } from 'umi';
-
-export interface SettingModelState {
-  llm_factory: string;
-  tenantIfo: Nullable<ITenantInfo>;
-  llmInfo: IThirdAiModelCollection;
-  myLlmList: Record<string, IMyLlmValue>;
-  factoryList: IFactory[];
-  userInfo: IUserInfo;
-}
-
-const model: DvaModel<SettingModelState> = {
-  namespace: 'settingModel',
-  state: {
-    llm_factory: '',
-    tenantIfo: null,
-    llmInfo: {},
-    myLlmList: {},
-    factoryList: [],
-    userInfo: {} as IUserInfo,
-  },
-  reducers: {
-    updateState(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-    setUserInfo(state, { payload }) {
-      return {
-        ...state,
-        userInfo: payload,
-      };
-    },
-  },
-  effects: {
-    *setting({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.setting, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.modified'));
-
-        yield put({
-          type: 'getUserInfo',
-        });
-      }
-    },
-    *getUserInfo({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.user_info, payload);
-      const { retcode, data: res } = data;
-
-      // const userInfo = {
-      //   avatar: res.avatar,
-      //   name: res.nickname,
-      //   email: res.email,
-      // };
-      // authorizationUtil.setUserInfo(userInfo);
-      if (retcode === 0) {
-        i18n.changeLanguage(
-          LanguageTranslationMap[
-            res.language as keyof typeof LanguageTranslationMap
-          ],
-        );
-        yield put({ type: 'setUserInfo', payload: res });
-        // localStorage.setItem('userInfo',res.)
-      }
-    },
-    *getTenantInfo({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.get_tenant_info, payload);
-      const { retcode, data: res } = data;
-      // llm_id 对应chat_id
-      // asr_id 对应speech2txt
-
-      if (retcode === 0) {
-        res.chat_id = res.llm_id;
-        res.speech2text_id = res.asr_id;
-        yield put({
-          type: 'updateState',
-          payload: {
-            tenantIfo: res,
-          },
-        });
-      }
-    },
-    *set_tenant_info({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.set_tenant_info, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.modified'));
-
-        yield put({
-          type: 'getTenantInfo',
-        });
-      }
-      return retcode;
-    },
-
-    *factories_list({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.factories_list);
-      const { retcode, data: res } = data;
-      if (retcode === 0) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            factoryList: res,
-          },
-        });
-      }
-    },
-    *llm_list({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.llm_list, payload);
-      const { retcode, data: res } = data;
-      if (retcode === 0) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            llmInfo: res,
-          },
-        });
-      }
-    },
-    *my_llm({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.my_llm);
-      const { retcode, data: res } = data;
-      if (retcode === 0) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            myLlmList: res,
-          },
-        });
-      }
-    },
-    *set_api_key({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.set_api_key, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.modified'));
-
-        yield put({ type: 'my_llm' });
-        yield put({ type: 'factories_list' });
-        yield put({
-          type: 'updateState',
-        });
-      }
-      return retcode;
-    },
-    *add_llm({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.add_llm, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.modified'));
-
-        yield put({ type: 'my_llm' });
-        yield put({ type: 'factories_list' });
-      }
-      return retcode;
-    },
-    *delete_llm({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.delete_llm, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.deleted'));
-
-        yield put({ type: 'my_llm' });
-        yield put({ type: 'factories_list' });
-      }
-      return retcode;
-    },
-  },
-};
-export default model;

web/src/pages/user-setting/setting-model/hooks.ts

   useSaveTenantInfo,
   useSelectLlmOptionsByModelType,
 } from '@/hooks/llm-hooks';
-import {
-  useFetchTenantInfo,
-  useSelectTenantInfo,
-} from '@/hooks/user-setting-hooks';
+import { useFetchTenantInfo } from '@/hooks/user-setting-hooks';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { ApiKeyPostBody } from '../interface';
 
 type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;
 };
 
 export const useSubmitSystemModelSetting = () => {
-  const systemSetting = useSelectTenantInfo();
+  const { data: systemSetting } = useFetchTenantInfo();
   const { saveTenantInfo: saveSystemModelSetting, loading } =
     useSaveTenantInfo();
   const {
   };
 };
 
-export const useFetchSystemModelSettingOnMount = (visible: boolean) => {
-  const systemSetting = useSelectTenantInfo();
+export const useFetchSystemModelSettingOnMount = () => {
+  const { data: systemSetting } = useFetchTenantInfo();
   const allOptions = useSelectLlmOptionsByModelType();
-  const fetchTenantInfo = useFetchTenantInfo();
-
-  useEffect(() => {
-    if (visible) {
-      fetchTenantInfo();
-    }
-  }, [fetchTenantInfo, visible]);
 
   return { systemSetting, allOptions };
 };

web/src/pages/user-setting/setting-model/index.tsx

         onOk={onApiKeySavingOk}
         llmFactory={llmFactory}
       ></ApiKeyModal>
-      <SystemModelSettingModal
-        visible={systemSettingVisible}
-        onOk={onSystemSettingSavingOk}
-        hideModal={hideSystemSettingModal}
-        loading={saveSystemModelSettingLoading}
-      ></SystemModelSettingModal>
+      {systemSettingVisible && (
+        <SystemModelSettingModal
+          visible={systemSettingVisible}
+          onOk={onSystemSettingSavingOk}
+          hideModal={hideSystemSettingModal}
+          loading={saveSystemModelSettingLoading}
+        ></SystemModelSettingModal>
+      )}
       <OllamaModal
         visible={llmAddingVisible}
         hideModal={hideLlmAddingModal}

web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx

 }: IProps) => {
   const [form] = Form.useForm();
   const { systemSetting: initialValues, allOptions } =
-    useFetchSystemModelSettingOnMount(visible);
+    useFetchSystemModelSettingOnMount();
   const { t } = useTranslate('setting');
 
   const handleOk = async () => {

web/src/pages/user-setting/setting-password/index.tsx

-import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
 import { useSaveSetting } from '@/hooks/user-setting-hooks';
 import { rsaPsw } from '@/utils';
 import { Button, Divider, Form, Input, Space } from 'antd';
 };
 
 const UserSettingPassword = () => {
-  const loading = useOneNamespaceEffectsLoading('settingModel', ['setting']);
   const { form, submittable } = useValidateSubmittable();
-  const saveSetting = useSaveSetting();
+  const { saveSetting, loading } = useSaveSetting();
   const { t } = useTranslate('setting');
 
   const onFinish = (values: any) => {

web/src/pages/user-setting/setting-profile/index.tsx

-import {
-  useFetchUserInfo,
-  useSaveSetting,
-  useSelectUserInfo,
-} from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo, useSaveSetting } from '@/hooks/user-setting-hooks';
 import {
   getBase64FromUploadFileList,
   getUploadFileListFromBase64,
 import { useEffect } from 'react';
 import SettingTitle from '../components/setting-title';
 import { TimezoneList } from '../constants';
-import {
-  useSelectSubmitUserInfoLoading,
-  useSelectUserInfoLoading,
-  useValidateSubmittable,
-} from '../hooks';
+import { useValidateSubmittable } from '../hooks';
 
 import { LanguageList } from '@/constants/common';
 import { useTranslate } from '@/hooks/common-hooks';
 };
 
 const UserSettingProfile = () => {
-  const userInfo = useSelectUserInfo();
-  const saveSetting = useSaveSetting();
-  const submitLoading = useSelectSubmitUserInfoLoading();
+  const { data: userInfo, loading } = useFetchUserInfo();
+  const { saveSetting, loading: submitLoading } = useSaveSetting();
   const { form, submittable } = useValidateSubmittable();
-  const loading = useSelectUserInfoLoading();
-  useFetchUserInfo();
   const { t } = useTranslate('setting');
   const changeLanguage = useChangeLanguage();
 

web/src/pages/user-setting/setting-team/index.tsx

 import { Button, Card, Flex } from 'antd';
 
 import { useTranslate } from '@/hooks/common-hooks';
-import { useSelectUserInfo } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
 const UserSettingTeam = () => {
-  const userInfo = useSelectUserInfo();
+  const { data: userInfo } = useFetchUserInfo();
   const { t } = useTranslate('setting');
 
   return (

web/typings.d.ts

 import { TestingModelState } from '@/pages/add-knowledge/components/knowledge-testing/model';
 import { kAModelState } from '@/pages/add-knowledge/model';
 import { ChatModelState } from '@/pages/chat/model';
-import { SettingModelState } from '@/pages/user-setting/model';
 
 declare module 'lodash';
 
 
 export interface RootState {
   chatModel: ChatModelState;
-  settingModel: SettingModelState;
   kFModel: KFModelState;
   kAModel: kAModelState;
   chunkModel: ChunkModelState;