Cheaterman Comments - Answer Overflow

Cheaterman

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

@kapa.ai it took almost 10 minutes and 5 responses of you to just tell me that my initial approach (which is a fairly non-ideal workaround) is the right way to go...

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

@kapa.ai

The second one <Message[]> defines the shape of the transformed data

Didn't we just discuss this...? I thought it was ErrorT and now you're saying it's a result type?

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

@kapa.ai I wrote:

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

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

Can we both agree it's the code you just gave me? If so, the resulting TS error is:

Type '(data: { messages: Message[]; }) => Message[]' is not assignable to type '_Transform<Message[], Message[]>'.
  Types of parameters 'data' and 'input' are incompatible.
    Property 'messages' is missing in type 'Message[]' but required in type '{ messages: Message[]; }'.

Type '(data: { messages: Message[]; }) => Message[]' is not assignable to type '_Transform<Message[], Message[]>'.
  Types of parameters 'data' and 'input' are incompatible.
    Property 'messages' is missing in type 'Message[]' but required in type '{ messages: Message[]; }'.

which is precisely why I didn't do that.

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

@kapa.ai No I meant the second type argument you showcased. ErrorT seems to indicate that it's not meant for output type as opposed to what you wrote here:

const { data } = await useAPI<{ messages: Message[] }, Message[]>('/messages', {
  transform: (r) => r.messages
})

const { data } = await useAPI<{ messages: Message[] }, Message[]>('/messages', {
  transform: (r) => r.messages
})

Care to clarify?

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Typescript and useFetch transform

@kapa.ai Wait. There's a second argument to useFetch? Where is that documented

28 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Clearing UForm errors

@kapa.ai OK, it's a bit ugly but I went about it differently :

watch(state, () => form.value?.clear())

watch(state, () => form.value?.clear())

I'm reasonably sure the reason it doesn't work as-is is because the validate() method of the form is called with a path argument that only includes the path being edited, which will dismiss the results of my custom validator function, including the clear() that happens later (and the errors are being concatenated with the otherErrors variable, see this part of the implementation for more information).

14 replies

NNuxt

•Created by Cheaterman on 4/11/2025 in #❓・help

Clearing UForm errors

@kapa.ai Making a separate UButton with @click="() => form!.clear()" does indeed clear all errors. Why doesn't it work from within :validation="" prop?

14 replies

NNuxt

•Created by Cheaterman on 8/5/2024 in #❓・help

Conditional :ui

Good one, thanks

3 replies

NNuxt

•Created by Kuroro on 2/27/2024 in #❓・help

Differents watch sources using useState

Either that or you can go back to your original solution with .value - it does save some typing

36 replies

NNuxt