packages/components/hooks/useApiResult.ts

   1 import { useCallback, useEffect, useState } from 'react';
   2
   3 import useApi from './useApi';
   4 import useAsync from './useAsync';
   5
   6 export type QueryFunction = (...args: any[]) => { method: string; url: string };
   7
   8 interface Result<R, U extends any[]> {
   9     result: R | undefined;
  10     error: Error;
  11     loading: boolean;
  12     request: (...args: U) => Promise<R>;
  13 }
  14
  15 const useApiResult = <R, F extends QueryFunction = QueryFunction>(
  16     fn: QueryFunction,
  17     dependencies?: any[],
  18     throwOnError = true,
  19     lazy = false
  20 ): Result<R, Parameters<F>> => {
  21     const request = useApi();
  22     const { loading, result, error, run } = useAsync(true);
  23     const [calledManually, setCalledManually] = useState(!lazy);
  24
  25     // Either user specified dependencies or empty array to always cancel requests on unmount.
  26     const hookDependencies = dependencies || [];
  27
  28     // Callback updates
  29     const requestAndSetResults = useCallback(
  30         (...args: Parameters<F>) => {
  31             const promise = request<R>(fn(...args));
  32             void run(promise);
  33             setCalledManually(true);
  34             return promise;
  35         },
  36         [request, run, fn]
  37     );
  38
  39     useEffect(() => {
  40         if (!calledManually) {
  41             return;
  42         }
  43
  44         // If user has specified any dependencies, auto request
  45         if (dependencies) {
  46             requestAndSetResults(...([] as unknown as Parameters<F>)).catch(() => {
  47                 // catch the error to stop the "uncaught exception error"
  48             });
  49         }
  50     }, [...hookDependencies]);
  51
  52     if (error && throwOnError) {
  53         // Throw in render to allow the error boundary to catch it
  54         throw error;
  55     }
  56
  57     return {
  58         result,
  59         error,
  60         loading,
  61         request: requestAndSetResults,
  62     };
  63 };
  64
  65 export default useApiResult;