React Apollo串行Mutation处理咨询：组件卸载后Promise回调问题

嘿，这个场景我太熟悉了——异步操作跑完的时候组件已经卸载，setState直接报错，简直是React异步开发的经典坑！先聊聊你提到的两个方案的小问题，再给你几个更贴合React和Apollo生态的最优解。

先说说你现有方案的优缺点 #

• EventEmitter方案：可行，但手动管理订阅/取消订阅会让代码变得繁琐，尤其是组件内部逻辑的话，有点“杀鸡用牛刀”的感觉，还容易遗漏取消订阅导致内存泄漏。
• 可取消Promise方案：确实能解决问题，但非标准特性，实现起来有点hack感，团队协作时维护成本会比较高，不太推荐作为长期方案。

更优方案：结合挂载状态跟踪 + Apollo原生回调 #

核心思路是：在异步操作完成后，先检查组件是否仍处于挂载状态，再执行setState或后续操作。同时利用Apollo的原生回调来保证两个Mutation的执行顺序。

方案1：函数组件 + useMutation + useRef（最推荐） #

用useRef跟踪组件挂载状态，配合useMutation的onCompleted回调，既能保证远程Mutation→客户端Mutation→设置状态的顺序，又能避免组件卸载后的无效操作：

import { useMutation } from '@apollo/client';
import { useState, useRef, useEffect } from 'react';
import REMOTE_MUTATION from './remoteMutation.graphql';
import CLIENT_MUTATION from './clientMutation.graphql';

const MyComponent = () => {
  const [localState, setLocalState] = useState('');
  // 用ref跟踪组件是否挂载
  const isMounted = useRef(false);
  
  useEffect(() => {
    isMounted.current = true;
    // 组件卸载时标记为false
    return () => {
      isMounted.current = false;
    };
  }, []);

  // 远程Mutation
  const [executeRemoteMutation] = useMutation(REMOTE_MUTATION, {
    onCompleted: async (remoteData) => {
      // 先执行客户端Mutation
      await executeClientMutation({ variables: { /* 客户端Mutation所需变量 */ } });
      // 检查组件仍挂载，再设置状态
      if (isMounted.current) {
        setLocalState(remoteData.targetValue);
      }
    },
    onError: (error) => {
      // 别忘了处理错误
      console.error('远程Mutation失败:', error);
    }
  });

  // 客户端Mutation
  const [executeClientMutation] = useMutation(CLIENT_MUTATION);

  const handleTrigger = () => {
    executeRemoteMutation({ variables: { /* 远程Mutation所需变量 */ } });
  };

  return (
    <div>
      <button onClick={handleTrigger}>执行操作</button>
      <p>当前状态：{localState}</p>
    </div>
  );
};

方案2：类组件 + 挂载状态标记 #

如果你还在维护类组件，同样可以用实例变量跟踪挂载状态，配合Apollo的mutate方法：

import React from 'react';
import { ApolloConsumer } from '@apollo/client';
import REMOTE_MUTATION from './remoteMutation.graphql';
import CLIENT_MUTATION from './clientMutation.graphql';

class MyComponent extends React.Component {
  state = { localState: '' };
  isMounted = false;

  componentDidMount() {
    this.isMounted = true;
  }

  componentWillUnmount() {
    this.isMounted = false;
  }

  handleExecute = (client) => async () => {
    try {
      // 执行远程Mutation
      const { data: remoteData } = await client.mutate({
        mutation: REMOTE_MUTATION,
        variables: { /* 远程变量 */ }
      });
      // 执行客户端Mutation
      await client.mutate({
        mutation: CLIENT_MUTATION,
        variables: { /* 客户端变量 */ }
      });
      // 检查挂载状态后更新组件
      if (this.isMounted) {
        this.setState({ localState: remoteData.targetValue });
      }
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  render() {
    return (
      <ApolloConsumer>
        {(client) => (
          <div>
            <button onClick={this.handleExecute(client)}>执行操作</button>
            <p>当前状态：{this.state.localState}</p>
          </div>
        )}
      </ApolloConsumer>
    );
  }
}

进阶优化：用Apollo的update函数替代客户端Mutation #

如果你的客户端Mutation只是用来更新Apollo缓存，完全可以把逻辑整合到远程Mutation的update回调里，这样不需要单独调用客户端Mutation，更贴合Apollo的缓存管理设计：

const [executeRemoteMutation] = useMutation(REMOTE_MUTATION, {
  update: (cache, { data: remoteData }) => {
    // 这里直接执行缓存更新逻辑，替代客户端Mutation
    cache.modify({
      id: cache.identify({ __typename: 'TargetType', id: 'xxx' }),
      fields: {
        targetField: () => remoteData.newValue,
      },
    });
  },
  onCompleted: (remoteData) => {
    if (isMounted.current) {
      setLocalState(remoteData.targetValue);
    }
  },
});

总结 #

• 优先选择挂载状态跟踪 + Apollo原生回调的方案，简单直接，没有额外依赖，也符合React和Apollo的设计思路。
• 如果客户端Mutation是为了更新缓存，用update函数替代单独的客户端Mutation，代码更简洁，也能减少异步嵌套。
• 核心原则：异步操作完成后，务必先检查组件是否仍挂载，再执行状态更新，避免无效操作和内存泄漏。

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