ApolloProvider useMutation Promise解析触发React无限重渲染报错

无限重渲染的核心触发逻辑是：

• 你将useMutation返回的mutation触发函数直接写在了组件渲染的顶层作用域执行，每次组件进入渲染流程都会调用一次promiseObj()发起请求
• mutation的执行状态（loading/error/data）由Apollo内部状态维护，状态变更会自动触发组件重渲染
• 重渲染时顶层的promiseObj()会再次被调用，形成「渲染→发起mutation→状态更新→重渲染→再次发起mutation」的死循环，最终触发React的重渲染次数保护报错。

所有会触发状态更新的副作用（异步请求、mutation调用、直接的state更新）都不能放在组件渲染顶层执行，需要放到事件回调或者useEffect这类专门的副作用执行位置，结合你在showDialog中使用Apollo上下文的场景，正确实现如下：

1. 先修正ApolloProvider的传参，必须传入初始化完成的Apollo Client实例，否则上下文会失效
2. 将mutation逻辑抽离到showDialog渲染的内部组件中，按需触发：如果需要对话框挂载后自动执行mutation，用空依赖的useEffect包裹调用逻辑，确保只执行一次；如果需要用户点击按钮触发，直接将调用逻辑绑定到按钮的onClick事件即可。

正确代码示例 #

showDialog调用部分：

await showDialog(renderProps => (
  <ApolloProvider client={/* 替换为你项目中初始化好的apollo client实例 */}>
    <MutationDialogContent />
  </ApolloProvider>
));

对话框内部组件实现：

import { useMutation } from '@apollo/client';
import { useState, useEffect } from 'react';

const MutationDialogContent = () => {
  const [runMutation, { loading, error }] = useMutation(MUTATION);
  const [resultData, setResultData] = useState(null);

  // 组件挂载时自动执行mutation，需要点击触发的话删掉这段useEffect，把runMutation放到对应按钮的onClick里即可
  useEffect(() => {
    runMutation()
      .then(result => {
        console.log(result.data);
        setResultData(result.data);
      })
      .catch(err => console.error('mutation执行失败', err));
  }, [runMutation]);

  // 不同状态下的UI渲染
  if (loading) return <div>请求处理中...</div>;
  if (error) return <div>操作失败：{error.message}</div>;
  if (resultData) {
    return (
      <>
        {/* 替换为你需要渲染的对话框UI元素 */}
        <div>操作完成，对应业务UI</div>
      </>
    );
  }

  return null;
};

关键注意点 #

• 不要在组件函数的顶层直接写setState、发起异步请求这类会触发组件重渲染的逻辑，这类操作必须放在非渲染阶段执行
• useEffect的依赖数组要正确配置，需要仅挂载时执行一次的逻辑，依赖数组不要漏填必要依赖，也不要放入会频繁变化的引用类型值导致effect重复触发
• 如果是点击按钮触发mutation的场景，不需要使用useEffect，直接在onClick回调中调用runMutation即可，不会触发循环重渲染

内容的提问来源于stack exchange，提问作者Petar Yordanov