Docs need clarity around useMutation and Typescript

[shamilovtim]

Describe the bug
Using useMutation as-is without a generic throws errors in Typescript. There are no docs that explain how to useMutation with Typescript and the type definitions aren't clear enough.

To Reproduce
Steps to reproduce the behavior:

1. useMutation without a generic
2. type errors will present themselves
3. https://react-query.tanstack.com/typescript#_top has no docs on useMutation

Expected behavior
Expectation would be that there are docs on how to type useMutation and that it doesn't need to be ts-ignored

[TkDodo]

Have a look at the optimistic updates example: https://react-query.tanstack.com/examples/optimistic-updates-typescript

types are inferred as long as your mutateFn or onMutate are properly typed. Type inference also works well for useQuery (unless you need to have error typed), so yeah, we could improve the TS docs in that regard :)

[shamilovtim]

Do you know what TContext is? Would it be possible for you guys to add JSDocs for the types? Many of the types are completely opaque for end users.

[TkDodo]

because you usually don't need it. TContext is inferred from the return type of onMutate. It is then passed to the onError config option, usually to rollback optimistic updates (it makes an appearance in the example I linked above)

[shamilovtim]

because you usually don't need it. TContext is inferred from the return type of onMutate. It is then passed to the onError config option, usually to rollback optimistic updates (it makes an appearance in the example I linked above)

I agree that many of the types are inferable but with no JSDoc and no web docs I'm going to hold firm on my previous stance that the framework types are too opaque

[TkDodo]

it's described here what the return value of onMutate is:https://react-query.tanstack.com/guides/optimistic-updates

To do this, useMutation's onMutate handler option allows you to return a value that will later be passed to both onError and onSettled handlers as the last argument. In most cases, it is most useful to pass a rollback function.

and in the example:

     // Return a context object with the snapshotted value
     return { previousTodos }
   },
   // If the mutation fails, use the context returned from onMutate to roll back
   onError: (err, newTodo, context) => {
     queryClient.setQueryData('todos', context.previousTodos)
   },

if you feel that the docs could be improved, please open a PR.