[Observability] add loading state in use fetcher (#95292)
This commit is contained in:
parent
b88f02ffb4
commit
9724051f92
|
@ -18,6 +18,7 @@ export interface FetcherResult<Data> {
|
|||
data?: Data;
|
||||
status: FETCH_STATUS;
|
||||
error?: Error;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
// fetcher functions can return undefined OR a promise. Previously we had a more simple type
|
||||
|
@ -38,6 +39,7 @@ export function useFetcher<TReturn>(
|
|||
const [result, setResult] = useState<FetcherResult<InferResponseType<TReturn>>>({
|
||||
data: undefined,
|
||||
status: FETCH_STATUS.PENDING,
|
||||
loading: true,
|
||||
});
|
||||
const [counter, setCounter] = useState(0);
|
||||
useEffect(() => {
|
||||
|
@ -51,6 +53,7 @@ export function useFetcher<TReturn>(
|
|||
data: preservePreviousData ? prevResult.data : undefined,
|
||||
status: FETCH_STATUS.LOADING,
|
||||
error: undefined,
|
||||
loading: true,
|
||||
}));
|
||||
|
||||
try {
|
||||
|
@ -65,6 +68,7 @@ export function useFetcher<TReturn>(
|
|||
data: preservePreviousData ? prevResult.data : undefined,
|
||||
status: FETCH_STATUS.FAILURE,
|
||||
error: e,
|
||||
loading: false,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
@ -76,6 +80,7 @@ export function useFetcher<TReturn>(
|
|||
return useMemo(() => {
|
||||
return {
|
||||
...result,
|
||||
loading: result.status === FETCH_STATUS.LOADING || result.status === FETCH_STATUS.PENDING,
|
||||
refetch: () => {
|
||||
// this will invalidate the deps to `useEffect` and will result in a new request
|
||||
setCounter((count) => count + 1);
|
||||
|
|
Loading…
Reference in a new issue