[Observability] add loading state in use fetcher (#95292)

This commit is contained in:
Shahzad 2021-03-25 09:06:58 +01:00 committed by GitHub
parent b88f02ffb4
commit 9724051f92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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);