如何在React的React-Query mutation中添加onSuccess回调

你修改后的代码完全可以添加onSuccess回调，和React-Query的常规用法一致，只需要在useMutation的第二个参数中传入配置对象即可。如果需要在回调中操作缓存（比如失效查询），记得重新引入useQueryClient。

完整示例代码（含缓存操作） #

import { useMutation, useQueryClient } from 'react-query';
import { IUploadFieldRequest } from '../constants/types';
import { licenseServiceAPI } from '../services';

export const URI = () => '/licenses/upload';

export const useUploadLicense = () => {
  const queryClient = useQueryClient();
  const [apiService] = licenseServiceAPI<FormData>({
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });

  const {
    data: response,
    mutateAsync,
    isLoading,
    isSuccess
  } = useMutation(
    // 自定义Mutation逻辑：处理文件并发起POST请求
    (formData: IUploadFieldRequest) => {
      const form = new FormData();
      Array.from(formData.files)?.forEach((file) => {
        form.append('license-file', file);
      });

      return apiService.post(URI(), form);
    },
    // 配置对象：添加onSuccess回调
    {
      onSuccess: () => {
        // 示例：失效指定查询缓存，触发数据重新获取
        queryClient.invalidateQueries('test');
        // 可添加其他成功后逻辑，如用户提示
        console.log('文件上传成功');
      }
    }
  );

  return {
    data: response?.data,
    uploadFiles: mutateAsync,
    isLoading,
    isSuccess
  };
};

export default useUploadLicense;

简化版（无需缓存操作） #

如果不需要操作缓存，只需移除useQueryClient相关代码即可：

import { useMutation } from 'react-query';
import { IUploadFieldRequest } from '../constants/types';
import { licenseServiceAPI } from '../services';

export const URI = () => '/licenses/upload';

export const useUploadLicense = () => {
  const [apiService] = licenseServiceAPI<FormData>({
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });

  const {
    data: response,
    mutateAsync,
    isLoading,
    isSuccess
  } = useMutation(
    (formData: IUploadFieldRequest) => {
      const form = new FormData();
      Array.from(formData.files)?.forEach((file) => {
        form.append('license-file', file);
      });

      return apiService.post(URI(), form);
    },
    {
      onSuccess: () => {
        console.log('文件上传成功');
        // 自定义其他成功逻辑
      }
    }
  );

  return {
    data: response?.data,
    uploadFiles: mutateAsync,
    isLoading,
    isSuccess
  };
};

export default useUploadLicense;

关键说明 #

• useMutation接收两个核心参数：第一个是执行异步请求的自定义函数，第二个是配置对象，onSuccess就定义在这个配置对象中。
• onSuccess回调会在Mutation异步请求成功完成后自动触发，可用于缓存更新、用户提示、页面跳转等后续操作。

内容的提问来源于stack exchange，提问作者Leo Messi