Reactjs/Apollo/AppSync Mutation 触发了两次答案

【问题标题】：Reactjs/Apollo/AppSync Mutation triggered twiceReactjs/Apollo/AppSync Mutation 触发了两次
【发布时间】：2018-06-28 11:23:00
【问题描述】：

我遇到了 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

任何帮助将不胜感激！

【问题讨论】：

你能再试一次吗？ AppSync JavaScript SDK 有一个更新，不再要求您使用乐观响应，这在当时可能就是发生这种情况的原因。如果您不需要离线功能，您现在也可以在构造函数中使用disableOffline:true。更多信息在这里：docs.aws.amazon.com/appsync/latest/devguide/…

标签： reactjs graphql react-apollo apollo-client aws-appsync

【解决方案1】：

您可以尝试提供乐观响应吗？

例如https://github.com/aws-samples/aws-mobile-appsync-events-starter-react/blob/362efe95af89c01af46696cc356d0f5922d27bf5/src/Components/NewEvent.js#L122-L126

AppSync 客户端当前需要一个乐观响应作为突变的一部分

【讨论】：

【解决方案2】：

我也有同样的问题。就我而言，突变运行了很长时间。突变解析器被调用了两次，因为正在向服务器发出第二个 POST 请求。但是客户端只发出一个请求，这可以从浏览器开发者工具的“网络”选项卡中看出。

我发现问题不是由 apollo 服务器或客户端引起的。

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

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

原帖here

【讨论】：