如何让Apollo Client的useMutation成功执行时仅触发一次onSuccess并解决模态框无法正常打开问题

我来帮你拆解并解决这两个问题：

1. 启用onSuccess后模态框无法打开的原因及修复 #

你当前遇到的核心问题是错误地在onSuccess配置中立即执行了onClose()函数，而不是传递函数引用。

当你写onSuccess: onClose()时，这段代码会在组件首次渲染时就直接调用onClose，触发父组件的closeModal把isModalShown设为false——相当于模态框刚打开就被强制关闭了，自然看不到它。

修复步骤： #

• 把函数引用传给onSuccess，不要加括号（加括号会立即执行）
• 用useCallback包裹onClose，避免每次重渲染创建新函数实例，提升性能同时避免不必要的副作用

修改后的子组件代码片段：

export default function DeviceModal(props) { 
  const device = useQuery(getDevice_query, {variables: {id: dataRowId}}); 

  // 用useCallback稳定函数引用
  const onClose = React.useCallback(() => { 
    props.closeModal(); 
  }, [props.closeModal]); // 依赖项加入父组件传递的closeModal

  const [dbUpdate,{ data, loading, error }] = useMutation(insertDevice_query, { 
    onSuccess: onClose, // 这里只传函数名，不要加括号！
  }); 

  return ( <ModalMarkup /> ); 
}

2. 确保useMutation的onSuccess仅触发一次 #

Apollo Client的useMutation默认行为就是每次mutation成功完成时只触发一次onSuccess回调，但如果你的场景中出现了多次触发的情况，可能是以下原因：

• mutation被意外重复调用（比如按钮点击未做防抖处理）
• 回调函数在重渲染时被频繁重建（不过这不会导致重复触发，只是影响性能）

如果需要严格确保即使mutation被多次调用，closeModal也只执行一次（比如特殊业务场景），可以用useRef来标记执行状态：

export default function DeviceModal(props) { 
  const device = useQuery(getDevice_query, {variables: {id: dataRowId}}); 
  // 用ref记录是否已经执行过关闭操作
  const hasTriggeredClose = React.useRef(false);

  const onClose = React.useCallback(() => { 
    if (!hasTriggeredClose.current) {
      props.closeModal();
      hasTriggeredClose.current = true;
    }
  }, [props.closeModal]);

  // 模态框打开时重置标记，确保下次打开能正常触发
  React.useEffect(() => {
    if (props.isModalShown) { // 假设父组件把isModalShown传给子组件
      hasTriggeredClose.current = false;
    }
  }, [props.isModalShown]);

  const [dbUpdate,{ data, loading, error }] = useMutation(insertDevice_query, { 
    onSuccess: onClose,
  }); 

  return ( <ModalMarkup /> ); 
}

关于"重渲染前/每次重渲染时执行closeModal"的补充 #

如果你的需求是无论mutation是否成功，只要组件重渲染就执行closeModal，那应该用useEffect实现，但这通常不符合模态框的使用逻辑（频繁重渲染会导致模态框频繁关闭）。更合理的逻辑还是绑定到mutation成功的时机，也就是上面的onSuccess方案。

内容的提问来源于stack exchange，提问作者Neal Rogers