Question

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

<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

您可以尝试提供optimisticResponse吗？

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

AppSync客户端当前需要将optimisticResponse作为突变的一部分存在

Answer 2

我有同样的问题。就我而言，这种变异运行了很长时间。由于对服务器发出了第二个POST请求，因此两次调用了突变解析器。但是客户端只发出了一个请求，这在浏览器开发人员工具的“网络”选项卡中很明显。

我发现，问题不是由阿波罗服务器或客户端引起的。

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

因此，ExpressJS服务器中的 changing the request timeout duration 为我解决了该问题。

最初发布的here

Reactjs / Apollo / AppSync Mutation触发两次

2 个答案: