React/Apollo/AppSync中Mutation重复触发问题求助
我来帮你排查这个Mutation重复触发的问题，这种情况在React + Apollo的组合里其实挺常见的，咱们一步步拆解可能的原因和解决办法：
一、先定位问题根源：函数调用还是Apollo内部触发？
首先建议你先加个简单的调试日志，确认是toggleSubscription函数被调用了多次，还是函数只执行一次但Apollo发起了多次请求：
toggleSubscription = async (event, subscriptionid, serviceid, currentStatus) => { event.preventDefault(); event.stopPropagation(); if (currentStatus === "mandatory") return; console.log('👉 toggleSubscription 被调用了，serviceid:', serviceid); // 新增调试日志 await this.props.toggleSubscription(this.props.match.params.id, serviceid); }
如果控制台每次点击都输出多次日志，那问题出在事件绑定或组件重复渲染导致的函数多次执行；如果只输出一次，但网络请求有多个，那问题在Apollo/AppSync的配置或重试机制。
二、针对不同根源的解决方案
情况1：toggleSubscription函数被多次调用
1. 排查事件冒泡与重复绑定
虽然你加了event.stopPropagation()和event.preventDefault()，但还是要确认按钮是否嵌套在另一个可点击元素（比如<a>、带onClick的<div>）里，父元素的点击事件可能会连带触发按钮的逻辑。可以临时给父元素也加个日志，验证是否存在事件冒泡的情况。
2. 解决组件重复渲染导致的函数重复创建
如果你的组件因为父组件更新、自身state变化频繁重渲染，compose包裹的graphql高阶函数可能会重复生成toggleSubscription方法的实例，导致点击时触发多次。
- 类组件可以尝试继承
PureComponent代替Component，减少不必要的重渲染：
class YourComponent extends React.PureComponent { // ... 你的组件代码 }
- 检查组件的props，有没有传递不稳定的引用（比如父组件每次渲染都新建一个对象/函数作为props），这会导致子组件无意义重渲染。
情况2：函数只调用一次，但Apollo发起多次请求
1. 关闭Apollo的自动重试机制
Apollo Client默认可能会对失败的请求进行重试，如果你的请求因为网络波动、服务器短暂无响应触发了重试，就会出现多个请求。可以在调用mutate时显式关闭重试：
toggleSubscription: (personid, serviceid) => mutate({ variables: { personid: personid, serviceid: serviceid }, retry: false // 新增该行关闭重试 })
2. 检查AppSync服务端配置
AppSync本身可能有默认的重试或幂等设置，你可以登录AppSync控制台，查看对应的Mutation配置，确认是否开启了自动重试或者有其他导致重复请求的设置。
3. 确认组件是否被多次挂载
如果你的组件在路由切换、条件渲染时没有被正确卸载，而是被重复挂载，也会导致graphql高阶函数重复注册Mutation实例。可以在componentDidMount里加日志验证：
componentDidMount() { console.log('组件已挂载'); }
如果是这个问题，确保组件在不需要时被正确卸载，或者给组件设置唯一的key属性，让React区分不同的组件实例。
三、额外排查技巧
- 打开浏览器网络面板，查看重复请求的状态码：如果是
5xx/4xx错误后跟着200成功请求，大概率是重试导致的；如果都是200，那就是触发逻辑的问题。 - 检查Apollo Client的初始化代码，有没有全局设置
defaultOptions里的mutate.retry为true，如果有，改成false或者在单个Mutation里覆盖。
内容的提问来源于stack exchange，提问作者Gareth Bradley
