Typescript with useMutation custom hook

[jairenee]

I have the following custom hook:

interface CreateBlogInput {
  blogTitle: string,
  isFeatured: boolean,
  user: string,
}

export function createBlog(cache) {
  return useMutation<Blog, Error>(async ({blogTitle, isFeatured, user}: CreateBlogInput) => {
    const graphQLClient = makeClient(), 
          query = <...gql_query...>
          data = await graphQLClient.request(query)

    return data.createBlog
  }, {
    onSuccess: () => {
      cache.invalidateQueries("blogs")
    },
  })
}

And use it as such:

const [ mutate ] = createBlog(cache)
...
const data = await mutate({blogTitle, isFeatured, user})

I receive the following typescript error in my editor:

Argument of type '{ blogTitle: string; isFeatured: boolean; user: string; }' is not assignable to parameter of type 'undefined'.

This error should not be thrown. Everything is typed correctly, so why is the mutate function parameters of type undefined?

Typescript reports the mutate function as this:

const mutate: (variables?: undefined, config?: MutateConfig<Blog, Error, undefined, unknown>) => Promise<Blog>

Any assistance would be greatly appreciated, this is a time sensitive issue.

[TkDodo]

If you add generics to useMutation, I think you have to add all 4 of them, as it will use the defaults otherwise, and the default for TVariables is undefined:

export function useMutation<
  TResult,
  TError = unknown,
  TVariables = undefined,
  TSnapshot = unknown
>

In your case, that would be at least:

return useMutation<Blog, Error, CreateBlogInput >

however, I rarely needed to do that, as type inference works pretty well if your mutate function is statically typed as well. So I would try to remove the generic annotations and see how that works first.