Losing types when returning data from server API handler

Hey folks!

I'm working on a Nuxt 3 project and running into a TypeScript issue with one of my server API handlers.

I have this setup:

import { useApiClient } from '~~/server/lib/apiClient';

export default defineEventHandler(async (event) => {
  const api = useApiClient(event);
  const { data, meta } = await api<IndexApiResponse<Tags>>('bo/tags');

  return {
    tags: data,
    meta: meta,
  };
});

import { useApiClient } from '~~/server/lib/apiClient';

export default defineEventHandler(async (event) => {
  const api = useApiClient(event);
  const { data, meta } = await api<IndexApiResponse<Tags>>('bo/tags');

  return {
    tags: data,
    meta: meta,
  };
});

This works fine at runtime, but when I use useFetch('/api/tags') on the client, the response is typed as

const data: globalThis.Ref<{} | undefined, {} | undefined>

const data: globalThis.Ref<{} | undefined, {} | undefined>

, and I lose all the type info. Strangely, if I return something simple like { hello: 'foo' }, types are inferred just fine.

Any idea how to get full type inference working for the return value so useFetch() is typed correctly??

Thanks in advance!

Nuxt•7mo ago•

5 replies

EatSleepGames

Losing types when returning data from server API handler

Hey folks!

I'm working on a Nuxt 3 project and running into a TypeScript issue with one of my server API handlers.

I have this setup:

import { useApiClient } from '~~/server/lib/apiClient';

export default defineEventHandler(async (event) => {
  const api = useApiClient(event);
  const { data, meta } = await api<IndexApiResponse<Tags>>('bo/tags');

  return {
    tags: data,
    meta: meta,
  };
});

import { useApiClient } from '~~/server/lib/apiClient';

export default defineEventHandler(async (event) => {
  const api = useApiClient(event);
  const { data, meta } = await api<IndexApiResponse<Tags>>('bo/tags');

  return {
    tags: data,
    meta: meta,
  };
});

This works fine at runtime, but when I use useFetch('/api/tags') on the client, the response is typed as

const data: globalThis.Ref<{} | undefined, {} | undefined>

const data: globalThis.Ref<{} | undefined, {} | undefined>

Losing types when returning data from server API handler

Similar Threads

Losing types when returning data from server API handler

Similar Threads

Similar Threads

Similar Threads