Typescript + Errors on Axios

[ebisbe]

I have a simple mutation:

export function useSaveCouponMutation() {
  return useMutation((coupon: Coupon) =>
    axios.post(`/coupons`, coupon.stringifyValues)
  )
}

How can I tell when I use the code like:

const { mutate, isError, error } = useSaveCouponMutation()

That error it's an Axios Error?

[DamianOsipiuk]

If you are asking about hinting typescript into what could be the type of error then you can look at the useMutation signature:

function useMutation<TData = unknown, TError = unknown, TVariables = void, TContext = unknown>

so you could do it by providing TData and TError, like:

useMutation<MyReturnDataType, AxiosError>(mutationFn)

If it's about something else, then please provide more context.

[ebisbe]

I so new at Typescript that I'm pretty sure that's what solves my issue. I'll have to re-read it a few times though

[DamianOsipiuk]

I think a good resource for you would be https://tkdodo.eu/blog/react-query-and-type-script
It's about react-query but all concepts should be almost identical in vue-query

[ebisbe]

I read the link and will read more info but I tried what you suggested but that just showed another error:

No overload matches this call.
  The last overload gave the following error.ts(2769)
useMutation.d.ts(15, 25): The last overload is declared here.

For now instead of doing:

<div v-if="isError">{{ error.message.data.message }}</div>

I show a simple message error. ( it's for a backoffice so there's not hurry to get everything perfect asap )