refactor: query dashboard data

src/pages/dashboard/index.tsx

@@ -1,46 +1,22 @@
-import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
-import { omit } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import PageBox from '../_components/page-box';
-import { queryDashboardData } from './apis';
 import DashboardInner from './components/dahboard-inner';
 import DashboardContext from './config/dashboard-context';
-import { DashboardProps } from './config/types';
+import useQueryDashboard from './services/use-query-dashboard';
 
 const Dashboard: React.FC = () => {
-  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
-  const [loading, setLoading] = useState(false);
-
-  const fetchDashboardData = useMemoizedFn(
-    async (params?: { cluster_id?: number }) => {
-      try {
-        setLoading(true);
-        const res = await queryDashboardData(params);
-        setData((prev) => {
-          return params?.cluster_id
-            ? {
-                ...omit(prev, ['system_load']),
-                system_load: res.system_load
-              }
-            : res;
-        });
-      } catch (error) {
-        setData({} as DashboardProps);
-      } finally {
-        setLoading(false);
-      }
-    }
-  );
+  const { fetchData, loading, data, cancelRequest } = useQueryDashboard();
 
   useEffect(() => {
-    fetchDashboardData();
+    fetchData({});
+    return () => {
+      cancelRequest();
+    };
   }, []);
 
   return (
-    <DashboardContext.Provider
-      value={{ ...data, fetchData: fetchDashboardData }}
-    >
+    <DashboardContext.Provider value={{ ...data, fetchData: fetchData }}>
       <PageBox>
         <Spin spinning={loading} style={{ minHeight: 300 }}>
           <DashboardInner />

src/pages/dashboard/services/use-query-dashboard.ts

@@ -0,0 +1,25 @@
+import { useQueryData } from '@/hooks/use-query-data-list';
+import { omit } from 'lodash';
+import { queryDashboardData } from '../apis';
+
+export default function useQueryDashboard() {
+  const { detailData, loading, fetchData, cancelRequest } = useQueryData({
+    key: 'dashboard',
+    fetchDetail: queryDashboardData,
+    getData(response, params) {
+      return params?.cluster_id
+        ? {
+            ...omit(detailData, ['system_load']),
+            system_load: response.system_load
+          }
+        : response;
+    }
+  });
+
+  return {
+    loading,
+    data: detailData,
+    cancelRequest,
+    fetchData
+  };
+}