useSWR wrapper with improved types

useFetch.ts

import useSWR from "swr";

type Fetcher<FetchData, FetchKey extends Key> = (
  key: FetchKey
) => FetcherResponse<FetchData>;

type FetcherResponse<FetchData = unknown> = FetchData | Promise<FetchData>;

type KeyValue =
  | string
  | false
  | Record<string | number, unknown>
  | null
  | undefined
  | KeyValue[];

type Key = KeyValue | [KeyValue, ...KeyValue[]];

export const useFetch = <
  FetchData = unknown,
  FetchError extends Error = Error,
  FetchKey extends Key = Key
>(
  key: FetchKey | (() => FetchKey),
  fetcher: Fetcher<FetchData, FetchKey>
) => {
  return useSWR<FetchData, FetchError, FetchKey | (() => FetchKey)>(key, () => {
    return fetcher(typeof key === "function" ? key() : key);
  });
};

const useTest = () => {
  const { data } = useFetch("/api/post", (key) => {
    return {
      prop: 123,
    };
  });

  useFetch(false, (key) => {});

  useFetch(null, (key) => {});

  useFetch(undefined, (key) => {});

  useFetch(["hello", "world"], ([hello, world]) => {
    console.log(hello, world);
  });

  useFetch(
    {
      hello: "world",
    },
    (key) => {}
  );

  useFetch(["/api/post", false, null, undefined], (key) => {});

  useFetch(
    ["/api/post", false, null, undefined, ["hello", "world"]],
    (key) => {}
  );

  useFetch(
    () => "/api/post",
    (key) => {}
  );

  useFetch(
    () => "/api/post",
    (key) => {}
  );
  useFetch(
    () => "/api/post",
    async (key) => {}
  );
};