Creating custom useMutation hook with 'options' parameter

[kg-lee]

I'm looking to create a custom useMutation hook to which I could configure the 'options' argument (using Typescript).

Example:

const useCustomMutation = ({ options?: TOptions }) => { return useMutation(..., { ...options }) };

Is there a way to achieve this using react-query?

All of the examples I've seen online have the 'options' argument explicitly set for custom hooks. I'm aware that passing options to a custom useQuery hook is possible (and well-documented), and I'm curious to see if there's a viable way to do the same for useMutation.

[TkDodo]

sure, its the same concept:

export function useMyMutation<
  TData = unknown,
  TError = unknown,
  TVariables = void,
  TContext = unknown
>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>
) {
  // do something
  return useMutation(...)
}

[licatajustin]

This seems to displease TypeScript when you try to extend the options within the useMutation fn. Any thoughts on how to address this?

function useMyMutation <
  TData = unknown,
  TError = unknown,
  TVariables = void,
  TContext = unknown
>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>,
) {
  // do something
  return useMutation({
    ...options,
    onMutate(variables) {
      // do something else

      if (options.onMutate) {
        options.onMutate(variables);
      }
    },
  });
}

// TypeScript error
// -----------------
//
// No overload matches this call.
//   The last overload gave the following error.
//     Argument of type '{ onMutate(variables: TVariables): void; context?: Context<QueryClient | undefined> | undefined; // useErrorBoundary?: boolean | ((error: TError) => boolean) | undefined; ... 9 more ...; meta?: MutationMeta | undefined; }' is not // assignable to parameter of type 'MutationKey'.
//       Object literal may only specify known properties, and 'onMutate' does not exist in type 'readonly unknown[]'.ts(2769)
// useMutation.d.ts(6, 25): The last overload is declared here.

[TkDodo]

onMutate needs to return something that conforms to TContext. Adding:

return "foo" as TContext

fixes it.

Also, in v5, the errors get better because we removed overloads (playground):

Type '(variables: TVariables) => void' is not assignable to type '(variables: TVariables) => TContext | Promise<TContext | undefined> | undefined'.
Type 'void' is not assignable to type 'TContext | Promise<TContext | undefined> | undefined'.(2322)
types.d.ts(357, 5): The expected type comes from property 'onMutate' which is declared here on type 'UseMutationOptions<TData, TError, TVariables, TContext>'
(property) onMutate?: ((variables: TVariables) => TContext | Promise<TContext | undefined> | undefined) | undefined