T
TanStack12mo ago
ratty-blush

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
quickest-silver
quickest-silver12mo 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
ratty-blush
ratty-blushOP12mo 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.
useful-bronze
useful-bronze12mo 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
useful-bronze
useful-bronze12mo ago
Just realized you said v4 so I guess ignore the global solution. That's v5
automatic-azure
automatic-azure12mo 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?