Nuxt•8mo ago

Preserve types in custom useFetch composable?

Probably just missing typescript knowledge... my custom fetch composable doesn't give me the type hints for the requested route while useFetch does that.

export async function useBetterFetch<T = any>(
  url: string,
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  const requestHeaders = useRequestHeaders(["cookie"]);

  const headers = { ...options.headers, ...requestHeaders };

  return await $fetch<T>(url, { ...options, headers });
}

export async function useBetterFetch<T = any>(
  url: string,
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  const requestHeaders = useRequestHeaders(["cookie"]);

  const headers = { ...options.headers, ...requestHeaders };

  return await $fetch<T>(url, { ...options, headers });
}

8 Replies

Fabian B.•8mo ago

Hi there, you can assign Parameters[0] to be your url type, which gives you the hints:

export async function useBetterFetch<T = any>(
  url: Parameters<typeof $fetch>[0],
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  // ...
}

export async function useBetterFetch<T = any>(
  url: Parameters<typeof $fetch>[0],
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  // ...
}

FloOP•8mo ago

Mhm... It's more about the result of that $fetch (Just noticed I forgot the screenshots)

FloOP•8mo ago

I think I got it:

export const useAnotherFetch: typeof useFetch = (
  url: Parameters<typeof useFetch>[0],
  options: Parameters<typeof useFetch>[1]
) => {
  const requestHeaders = useRequestHeaders(["cookie"]);
  const headers = { ...options?.headers, ...requestHeaders };

  return useFetch(url, { ...options, headers });
};

export const useAnotherFetch: typeof useFetch = (
  url: Parameters<typeof useFetch>[0],
  options: Parameters<typeof useFetch>[1]
) => {
  const requestHeaders = useRequestHeaders(["cookie"]);
  const headers = { ...options?.headers, ...requestHeaders };

  return useFetch(url, { ...options, headers });
};

(well, partially. Signature doesn't seem to be fully compatible)

Fabian B.•8mo ago

Just saw your messages, yeah that would have been the way I would have gone too

FloOP•8mo ago

I kept trying, with no success. Something is always off 😄 sorry! That was accidental 😓 @Fabian B.

export const useInternalApi = () =>
  $fetch.create({
    headers: useRequestHeaders(["cookie"]),
  });

export const useInternalApi = () =>
  $fetch.create({
    headers: useRequestHeaders(["cookie"]),
  });

- sometimes it can be simple.

Fabian B.•8mo ago

😄 True, though $fetch.create does not have the same methods such as $fetch, but if it works for your case than it's perfect!

FloOP•8mo ago

At least it managed to keep the type information, of the fetched routes - which makes me very happy 😄

Gaming

Programming

Preserve types in custom useFetch composable?