如何编写带onCompleted参数的useMutation自定义Hook？

要让你的自定义Hook支持传入onCompleted参数并正确传递给底层的useMutation，只需按以下步骤修改代码：

修改后的完整代码 #

import { useMutation } from '@apollo/client'; // 假设你使用Apollo Client的useMutation
import { CLEAR_WORKER_MUTATION } from './your-mutation-path'; // 替换为你的mutation文件路径
import type { ClearWorkerMutationData, ClearWorkerMutationInput } from './your-types-path'; // 替换为你的类型定义路径

export function useClearWorkerMutation(options?: { 
  onCompleted?: (data: ClearWorkerMutationData) => void 
}) {
  // 解构外部传入的onCompleted，处理未传参的边界情况
  const { onCompleted: externalOnCompleted } = options || {};

  return useMutation<ClearWorkerMutationData, ClearWorkerMutationInput>(
    CLEAR_WORKER_MUTATION,
    {
      onCompleted: (data) => {
        // 这里可以添加Hook内部的自定义逻辑（如果需要）
        // 示例：console.log('ClearWorker mutation执行完成:', data);

        // 调用外部传入的onCompleted回调，传递mutation返回数据
        externalOnCompleted?.(data);
      },
    },
  );
}

关键说明 #

• 参数接收：让useClearWorkerMutation接受一个可选的配置对象，其中包含类型匹配的onCompleted回调，保证TypeScript类型安全。
• 回调传递：在底层useMutation的onCompleted中，先执行你需要的内部逻辑（如果有），再调用外部传入的回调并传递返回数据。
• 容错处理：使用可选链externalOnCompleted?.(data)，避免未传入onCompleted时出现调用错误。

使用方式 #

完全符合你预期的调用形式：

const [mutate, { data }] = useClearWorkerMutation({ 
  onCompleted: (mutationData) => {
    // 这里处理mutation完成后的业务逻辑，比如更新页面状态、提示用户等
    console.log('外部回调接收到数据:', mutationData);
  } 
});

内容的提问来源于stack exchange，提问作者Anastasiya Straltsova