Files
gpustack-ui/src/pages/cluster-management/services/use-query-cluster-list.tsx
T
2026-06-14 19:14:18 +08:00

71 lines
1.7 KiB
TypeScript

import { createAxiosToken } from '@/hooks/use-chunk-request';
import { useRequest } from 'ahooks';
import { message } from 'antd';
import { CancelTokenSource } from 'axios';
import { useEffect, useRef, useState } from 'react';
import { queryClusterList } from '../apis';
import { ClusterListItem } from '../config/types';
/**
*
* @returns loading, fetch, dataList
*/
export const useQueryClusterList = (options?: { useStateData?: boolean }) => {
const { useStateData = true } = options || {};
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
const [dataList, setDataList] = useState<
Array<ClusterListItem & { label: string; value: number }>
>([]);
const {
runAsync: fetchData,
loading,
cancel
} = useRequest(
async (params: { page: number; perPage?: number }) => {
axiosTokenRef.current?.cancel();
axiosTokenRef.current = createAxiosToken();
const res = await queryClusterList(params, {
token: axiosTokenRef.current.token
});
if (useStateData) {
setDataList(
res.items?.map((item: ClusterListItem) => ({
...item,
label: item.name,
value: item.id
})) || []
);
}
return res.items || [];
},
{
manual: true,
onSuccess: (response) => {},
onError: (error) => {
message.error(error?.message || 'Failed to fetch cluster list');
setDataList([]);
}
}
);
const cancelRequest = () => {
cancel();
axiosTokenRef.current?.cancel();
};
useEffect(() => {
return () => {
cancel();
axiosTokenRef.current?.cancel();
};
}, []);
return {
loading,
clusterList: dataList,
cancelRequest,
fetchClusterList: fetchData
};
};