mirror of https://github.com/alibaba/ice.git
fix: optimize code
This commit is contained in:
parent
55f4c22033
commit
7dde0b1d48
|
|
@ -47,7 +47,29 @@ const getHydrateData = (id: string) => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const querySet = new Set<string>();
|
class QueryClient {
|
||||||
|
queryCache: Map<string, Promise<any>>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.queryCache = new Map();
|
||||||
|
}
|
||||||
|
|
||||||
|
setQueryData(key: string, promise: Promise<any>) {
|
||||||
|
if (key) {
|
||||||
|
this.queryCache.set(key, promise);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getQueryData(key: string) {
|
||||||
|
return this.queryCache.get(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeQueryData(key: string) {
|
||||||
|
this.queryCache.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
interface SuspenseDataProps {
|
interface SuspenseDataProps {
|
||||||
queryKey?: string;
|
queryKey?: string;
|
||||||
|
|
@ -61,28 +83,26 @@ export function useSuspenseData(request?: Request, options?: SuspenseDataProps)
|
||||||
const { data, done, promise, update, error, id } = suspenseState;
|
const { data, done, promise, update, error, id } = suspenseState;
|
||||||
const { hasHydrateData, data: hydrateData } = getHydrateData(id);
|
const { hasHydrateData, data: hydrateData } = getHydrateData(id);
|
||||||
|
|
||||||
const queryInProcess = options?.queryKey && querySet.has(options.queryKey);
|
const queryInProcess = options?.queryKey && queryClient.getQueryData(options.queryKey);
|
||||||
let thenable: Promise<any> = null;
|
let thenable: Promise<any> = null;
|
||||||
if (!hasHydrateData && !error && !done && !promise && request && !queryInProcess) {
|
if (!hasHydrateData && !error && !done && !promise && request && !queryInProcess) {
|
||||||
thenable = request(requestContext);
|
thenable = request(requestContext);
|
||||||
thenable.then((response) => {
|
thenable.then((response) => {
|
||||||
querySet.delete(options?.queryKey);
|
queryClient.removeQueryData(options?.queryKey);
|
||||||
update({
|
update({
|
||||||
done: true,
|
done: true,
|
||||||
data: response,
|
data: response,
|
||||||
promise: null,
|
promise: null,
|
||||||
});
|
});
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
querySet.delete(options?.queryKey);
|
queryClient.removeQueryData(options?.queryKey);
|
||||||
update({
|
update({
|
||||||
done: true,
|
done: true,
|
||||||
error: e,
|
error: e,
|
||||||
promise: null,
|
promise: null,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if (options?.queryKey) {
|
queryClient.setQueryData(options?.queryKey, thenable);
|
||||||
querySet.add(options.queryKey);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
|
@ -133,7 +153,7 @@ export function useSuspenseData(request?: Request, options?: SuspenseDataProps)
|
||||||
throw thenable;
|
throw thenable;
|
||||||
} else {
|
} else {
|
||||||
// Throw a pending promise to Suspense, otherwise the component will be error because of undefined data.
|
// Throw a pending promise to Suspense, otherwise the component will be error because of undefined data.
|
||||||
throw new Promise(() => {});
|
throw (queryClient.getQueryData(options?.queryKey) || new Promise(() => {}));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue