React fetch hooks

useFetch.tsx

import { useState, useEffect } from 'react';

export interface UseFetch<T> {
  data: T | null;
  isLoading: boolean;
  error: ResponseError | Error | null;
  retries: number;
  retry: () => void;
}

export interface RequestOptions<T, E = T> extends RequestInit {
  dataTransformer?: (data: T) => E;
  json?: boolean;
}

export class ResponseError extends Error {
  constructor(message: string, public statusCode: number, public statusText: string) {
    super(message);
  }
}

export default function useFetch<T = any, E = T>(
  input: RequestInfo,
  options: RequestOptions<T, E> = {},
): UseFetch<E> {
  const [data, setData] = useState<E | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<ResponseError | Error | null>(null);
  const [retries, setRetries] = useState(0);

  const { dataTransformer, json = true, ...rest } = options;

  useEffect(
    () => {
      setIsLoading(true);
      fetch(input, rest)
        .then(res => {
          if (!res.ok) throw new ResponseError(res.statusText, res.status, res.statusText);
          return json ? res.json() : res;
        })
        .then(res => (dataTransformer ? dataTransformer(res) : res))
        .then(res => setData(res))
        .catch(err => setError(err))
        .finally(() => setIsLoading(false));
    },
    [retries],
  );

  function retry() {
    setRetries(retries + 1);
  }

  return {
    data,
    isLoading,
    error,
    retries,
    retry,
  };
}