mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 12:44:22 +00:00
538473b2cc
Wires @tanstack/react-query into every entry and migrates useStatus to
useStatusQuery as the foundation for the multi-page MPA → SPA migration.
- QueryProvider wraps each entry inside ThemeProvider, with devtools gated
on import.meta.env.DEV
- Shared queryClient: 30s staleTime, refetchOnWindowFocus, 1 retry
- useStatusQuery preserves the { status, fetched, refresh } shape so
IndexPage swaps in without further changes
- refetchIntervalInBackground:false stops the 2s status poll when the
panel tab is hidden, cutting idle traffic against the server
33 lines
926 B
TypeScript
33 lines
926 B
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useMemo } from 'react';
|
|
|
|
import { HttpUtil } from '@/utils';
|
|
import { Status } from '@/models/status';
|
|
import { keys } from '@/api/queryKeys';
|
|
|
|
const POLL_INTERVAL_MS = 2000;
|
|
|
|
async function fetchStatus(): Promise<Status> {
|
|
const msg = await HttpUtil.get('/panel/api/server/status', undefined, { silent: true });
|
|
if (!msg?.success) throw new Error(msg?.msg || 'Failed to fetch status');
|
|
return new Status(msg.obj);
|
|
}
|
|
|
|
export function useStatusQuery() {
|
|
const query = useQuery({
|
|
queryKey: keys.server.status(),
|
|
queryFn: fetchStatus,
|
|
refetchInterval: POLL_INTERVAL_MS,
|
|
refetchIntervalInBackground: false,
|
|
staleTime: 0,
|
|
});
|
|
|
|
const status = useMemo(() => query.data ?? new Status(), [query.data]);
|
|
const refresh = async () => { await query.refetch(); };
|
|
|
|
return {
|
|
status,
|
|
fetched: query.data !== undefined,
|
|
refresh,
|
|
};
|
|
}
|