useMutation: mutationFn callback data is of type void

[kelvin-homann]

I am writing the following Hook to wrap the useMutation Hook:

import { useEffect, useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Problem } from '../../../../abciBackendApi/src'
import { useDefaultApi } from '../useDefaultApi'

export function useFetchUpdate<T>(
  queryKey: string,
  createFetch: (requestParameters: any) => Promise<T>,
  showNotifications: boolean = false
) {
  const [data, setData] = useState<T>({} as T)
  const queryClient = useQueryClient()
  const defaultApi = useDefaultApi()

  const {
    isLoading,
    error,
    data: updateData,
    mutate: update
  } = useMutation<T, Problem>({
    mutationFn: (formData) => createFetch.bind(defaultApi, formData)(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [queryKey] })
    },
    onError: (error) => {
      if (showNotifications) {
        // TODO render error notification
      }
    }
  })

  // making sure data is not undefined
  useEffect(() => {
    if (updateData) {
      setData(updateData)
    }
  }, [updateData])

  return {
    isLoading,
    error,
    data,
    update
  }
}

Its purpose is to handle all update in our application that are pretty similar. Thus i can pass a function that includes the fetch request and will update on the server. Now i am wondering why the formData Type here is void, i am expecting it to be T.

The mutate (L19) i am exporting as update function also only accepts void for the variables:

What am i missing? I assuming passing my generic in line 20 to useMutation would be enough.

Would appreciate help from any typescript wizard!

[TkDodo]

• useMutation has 4 generics, and the 3rd types variables, which you haven't typed, so it falls back to void.
• it's a lot better to just type mutationFn and let the rest be inferred:

useMutation({
    mutationFn: (formData: string) => createFetch.bind(defaultApi, formData)(),
})

string is just an example - fill in with the real type of formData

[kelvin-homann]

Ah thats what i was missing, i needed the my Error Type to be of a specific type. But setting the third generic did the trick. Appreciate the quick help

[TkDodo]

pro tip: infer the generic for error with the onError function:

useMutation({
    mutationFn: (formData: string) => createFetch.bind(defaultApi, formData)(),
    onError: (error: MyError) => {}
})

even if you leave the function empty, type will be inferred from there.

[fernandoperigolo]

If you copy and paste the code from the docs, https://tanstack.com/query/latest/docs/framework/react/guides/mutations, it will show this exact same error. Would be nice to have more information on the docs and the example updated.

When im working with TS, it usually infer any, in this case, it falls back to void. This is the first time i see this pattern, im new to TS, and i was like, "How can i satisfy void if i need to send the variables object?".