T
TanStack15mo ago
provincial-silver

How to properly type data in useMutation?

Hello everyone! I am using Tanstack React Query v4.36.1. Please help me to type this correctly? I don't understand why it's not working! I'm using type AxiosResponse<User> and I can see that the correct data is being returned. But it still results in the following error:
No overload matches this call.
The last overload gave the following error.
Object literal may only specify known properties, and 'mutationKey' does not exist in type 'readonly unknown[]'. ts(2769)

useMutation.d.ts(6, 25): The last overload is declared here.

(property) mutationKey? MutationKey | undefined
No overload matches this call.
The last overload gave the following error.
Object literal may only specify known properties, and 'mutationKey' does not exist in type 'readonly unknown[]'. ts(2769)

useMutation.d.ts(6, 25): The last overload is declared here.

(property) mutationKey? MutationKey | undefined
Here is my code:
interface User {
id: string
firstName: string
lastName: string
}

const fetchUser = (id: string) => axios.get<User>(`/user/${id}`)

const FetchUser = () => {
const { data, mutate } = useMutation<AxiosResponse<User>>({
mutationKey: ['fetchUser'],
mutationFn: (id: string) => fetchUser(id),
})

return <>...</>
}
interface User {
id: string
firstName: string
lastName: string
}

const fetchUser = (id: string) => axios.get<User>(`/user/${id}`)

const FetchUser = () => {
const { data, mutate } = useMutation<AxiosResponse<User>>({
mutationKey: ['fetchUser'],
mutationFn: (id: string) => fetchUser(id),
})

return <>...</>
}
7 Replies
afraid-scarlet
afraid-scarlet15mo ago
You shouldn't have to add a generic to useMutation. It will infer from the return type of the mutationFn. This is recommended so you don't miss things like undefined. Although your type error is on the key so are you sure this is the exact code that threw this error? Mutation types work fine for me without the generic.
No description
No description
provincial-silver
provincial-silverOP15mo ago
Thank you for your answer! Actually, I just want to type the error, but I can only do that without typing the data from the server. This issue occurs consistently in all components. I even tried writing useMutation<any, AxiosError>(), but that doesn't help either, TypeScript still complains.
like-gold
like-gold15mo ago
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
From An unknown user
From An unknown user
like-gold
like-gold15mo ago
Just realized you said v4 so I guess ignore the global solution. That's v5
old-apricot
old-apricot15mo ago
Actually, I just want to type the error
you can't. It's not guaranteed that the only errors that happen in your mutation are AxiosError. For example, if you do something wrong in onMutate, you might get a runtime error that isn't of type AxiosError. I would just use the isAxiosError function at runtime that also narrows

Did you find this page helpful?