React hook to fetch api data

useApi.ts

import { useState, useCallback } from 'react'
import { AxiosPromise } from 'axios'

export interface ApiResponse<T> {
  data?: T | undefined
  error?: Error | undefined
  loading: boolean
}

export type UseApiResponse<T> = [ApiResponse<T>, (...args: any[]) => Promise<void>, () => void]

export function useApi<Data>(
  serviceMethod: (...args: any) => AxiosPromise<Data>
): UseApiResponse<Data> {
  const [data, setData] = useState<Data | undefined>(undefined)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<Error | undefined>(undefined)

  const reset = useCallback(() => {
    setData(undefined)
    setLoading(false)
    setError(undefined)
  }, [])

  const trigger = useCallback(
    async (...args: any[]) => {
      setError(undefined)
      setLoading(true)
      try {
        const result = await serviceMethod(...args)
        setData(result.data)
      } catch (error: unknown) {
        if (error instanceof Error) {
          setError(error)
        } else {
          setError(new Error(typeof error === 'string' ? error : 'Unknown error'))
        }
      } finally {
        setLoading(false)
      }
    },
    [serviceMethod]
  )

  return [
    {
      data,
      error,
      loading,
    },
    trigger,
    reset,
  ]
}

export default useApi