Reactjs/Apollo/AppSync 突变触发两次

Question

我遇到了 React/Apollo/AppSync 的问题，突变触发了两次(或多次)。我有一个 React 应用程序，它有一个由通常的 UI 按钮 onClick 触发的更新突变。

<button className={`btn btn-sm`} onClick={(event) => { that.toggleSubscription(event, subscriptionid, serviceid, status); }}>
    <i className={`fas ${icon} fa-fw`} />
    {title}
</button>

toggleSubscription 函数如下所示:

toggleSubscription = async (event, subscriptionid, serviceid, currentStatus) => {
    event.preventDefault();
    event.stopPropagation();

    if (currentStatus === "mandatory") return;
    console.log(serviceid);
    await this.props.toggleSubscription(this.props.match.params.id, serviceid);
}

还有所讨论的 graphql 突变(尽管这似乎发生在所有突变上)。这是导出声明上的:

export default compose(
    graphql(
        MutationToggleSubscription,
        {
            props: ({ ownProps, mutate }) => ({
                toggleSubscription: (personid, serviceid) => mutate({
                    variables: { personid: personid, serviceid: serviceid }
                })
            }),
        }
    ),
...

Shows multiple and simultaneous calls to the GraphQL server这些调用几乎相同，但还有一些额外的堆栈跟踪调用: The two requests are almost identical. The calls highlighted in Red seem to be the difference between the two

任何帮助将不胜感激!

Answer 1

我也有同样的问题。在我的例子中，突变会持续很长时间。突变解析器被调用两次，因为正在向服务器发出第二个 POST 请求。但客户端仅发出单个请求，这从浏览器开发人员工具中的“网络”选项卡中可以明显看出。

据我了解，该问题不是由apollo服务器或客户端引起的。

经过大量研究，我发现Node.js 服务器默认在 120 秒后超时请求并关闭与客户端的连接。这反过来会导致 browser to retry the request 但浏览器不会在开发人员工具的网络选项卡中记录重试的请求，这会造成很多困惑。

所以，changing the request timeout duration 在 ExpressJS 服务器中为我解决了这个问题。

最初发布here