Typescript and useFetch transform

I have fairly persistent issues with useFetch() and transform in typescript ; transform seems to expect the shape of the response not to change, which (at least for me) defeats the purpose

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

I already removed the generic argument to useAPI (which is just a useFetch wrapper) as mentioned in https://github.com/nuxt/nuxt/discussions/21248#discussioncomment-6165650

But the only way I can get typescript to somewhat cooperate is by writing

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

which is tedious and feels like it shouldn't be necessary

GitHub

nuxt usefetch transform with typescript · nuxt nuxt · Discussion ...

const { data: dataProduct, error: errorProduct, pending: loadingProduct, } = await useFetch<ProductModel>("/products/list/", { transform(data) { return data.data.map((item): string ...

Nuxt•12mo ago•

27 replies

Cheaterman

Typescript and useFetch transform

I have fairly persistent issues with useFetch() and transform in typescript ; transform seems to expect the shape of the response not to change, which (at least for me) defeats the purpose

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

export default async function() {
  return useAPI('/messages', {
    transform: (data: { messages: Message[] }) => data.messages,
  } as { transform(data: any): Message[] })
}

which is tedious and feels like it shouldn't be necessary

GitHub

nuxt usefetch transform with typescript · nuxt nuxt · Discussion ...

const { data: dataProduct, error: errorProduct, pending: loadingProduct, } = await useFetch<ProductModel>("/products/list/", { transform(data) { return data.data.map((item): string ...

Typescript and useFetch transform

Similar Threads

Typescript and useFetch transform

Similar Threads

Similar Threads

Similar Threads