[Typescript] How to correctly type custom hook with useMutation

[jamesthomsondev]

Is this correct? I want to type the options param of my hook and this is the only way I've been able to get it to type properly, but it seems awfully verbose.

type TMutationOptions = Omit<
  UseMutationOptions<unknown, unknown, unknown, unknown>,
  'mutationKey' | 'mutationFn'
>;

const useCreateLocation = (options: TMutationOptions = {}) =>
  useMutation(
    'locations',
    (payload: ILocationPayload) => Api.locations.create(payload),
    options,
  );

[TkDodo]

by typing them all to unknown, you'll likely have a hard time using e.g. the context or the returned data / error with correct types.

The generics are:

1. TData = unknown: The type of data, in your case, what Api.locations.create returns
2. TError = unknown: The type of error that is thrown, unknown is most correct here, but you can also narrow it to AxiosError or so if you're using that.
3. TVariables = void: The variables passed, ILocationPayload in your case.
4. TContext = unknown: context is used for optimistic updates and is usually inferred from the return value of onMutate. Since you let the users of your custom hook specify onMutate, you can't use that without explicitly using a generic.

so, for most cases, this should work:

UseMutationOptions<ReturnType<typeof Api.locations.create>, unknown, ILocationPayload>,

omitting the key and the fn is good because you statically provide that.

but all in all, I would rarely create abstractions that allow for all the options to be passed on consumers side. onSuccess / onError / onSettled can also be used with .mutate, so I'd rather let consumers specify those and keep the rest internal to the custom hook.

I've described that separation a little bit here: https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[jamesthomsondev]

@TkDodo Thanks for your reply. I ended up ripping out passing through the options as I've been using the mutate methods so this extra abstraction didn't make sense - as you said.