[TypeError] useMutation v5 because removed mutationFn at type definiation

[in-ch]

Hello
I have been using the useMutation hook separately by utilizing react-query in my project. Recently, I updated the library from version 4 to version 5, and encountered the following type error:

Error message

Type '({ title, officeCode, service, contents, product, }: CreateContentPackBodyParams) => Promise' has no properties in common with type 'UseMutationOptions, CreateContentPackBodyParams, unknown>'.

Here's an example of my code:

Code snippet

const createContentPack = async ({
  title,
  officeCode,
  service,
  contents,
  product,
}: CreateContentPackBodyParams): Promise<boolean> => {
  return apiService
    .post(apiPaths.clinic2Pack.create, {
      title,
      officeCode,
      service,
      contents,
      product,
    })
    .then((response) => {
      const { code, message } = response.data;
      if (code === '000' && message === 'Success') {
        return true;
      } else {
        return false;
      }
    });
};

export default function useCreateContentPack(): UseMutationResult<boolean, AxiosError> {
  const { setDialog } = useDialog();
  const router = useRouter();
  return useMutation<boolean, AxiosError, CreateContentPackBodyParams>(createContentPack, {
    onSuccess: (d) => {
      if (d) {
        setDialog({
          title: '[Success] Content Pack Add!',
          text: 'Thank you!',
          isAlert: true,
        });
        router.back();
      } else {
        setDialog({
          title: '[Error] An error has occurred',
          text: 'Please contact the service development team.',
          isAlert: true,
        });
      }
    },
  });
}

Upon investigating, I noticed that there has been a change in type definitions for useMutation in version 5. The declaration now looks like this:

v5.4.3:

declare function useMutation<TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TError, TVariables, TContext>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TContext>;

v4.29.25:

export function useMutation<
  TData = unknown,
  TError = unknown,
  TVariables = void,
  TContext = unknown,
>(
  mutationFn: MutationFunction<TData, TVariables>,
  options?: Omit<
    UseMutationOptions<TData, TError, TVariables, TContext>,
    'mutationFn'
  >,
): UseMutationResult<TData, TError, TVariables, TContext>

I'm wondering why MutationFunction has been removed. Does this mean we can no longer use it in version 5?

[TkDodo]

have you even looked at the v5 migration guide? It's a major release for a reason: apis changed in a breaking way!

- return useMutation(createContentPack, { onSuccess })
+ return useMutation({ mutationFn: createContentPack, onSuccess })

[deaduchiha]

declaring type for useMutation in version 5 RaectQuery it's so simple, this is simple example for that:

const useCheckOtp = () => {
  const checkCode = ({
    mobile,
    code,
  }: {
    mobile: string;
    code: string;
  }): Promise<TMyMutationData> => api.post("/auth/check-otp", { mobile, code });

  return useMutation({
    mutationFn: checkCode,
    mutationKey: ["check-otp"],
    onSuccess: (data) => {
      return data;
    },
    onError: (error) => {
      console.log(error.message);
    },
  });
};

I created a custom hook for checking OTP code from the backend. It uses Axios interceptors and axios.create. You should set a type for the mutation function. Since it always returns a Promise, you can use a generic type with Promise to simplify it.