Reactjs/Apollo/AppSync 突变触发两次 [英] Reactjs/Apollo/AppSync Mutation triggered twice

问题描述

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

I'm having an issue with React/Apollo/AppSync with mutations triggering twice (or more). I have a React app that has an update mutation triggered by the usual UI button onClick.

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

toggleSubscription 函数如下所示:

The toggleSubscription function looks like this:

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 突变(尽管这似乎发生在所有突变上).这是出口声明:

And the graphql mutation in question (although this seems to happen on all mutations). This is on the export statement:

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

显示对 GraphQL 服务器的多个并发调用这些调用几乎相同，但还有一些额外的堆栈跟踪调用:这两个请求几乎相同.红色突出显示的调用似乎是两者之间的区别

Shows multiple and simultaneous calls to the GraphQL server The calls are almost identical, but there are some additional stacktrace calls: The two requests are almost identical. The calls highlighted in Red seem to be the difference between the two

任何帮助将不胜感激！

推荐答案

我有同样的问题.在我的情况下，突变运行了很长时间.由于向服务器发出第二个 POST 请求，因此突变解析器被调用了两次.但是客户端只发出一个请求，这在浏览器开发者工具的网络"选项卡中很明显.

I have the same issue. The mutation runs for a long time in my case. The mutation resolver was getting called twice because a 2nd POST request was being made to the server. But the client was making only a single request which was evident from the Network tab in browser developer tools.

据我所知，问题不是由 apollo 服务器或客户端引起的.

As I found out, the issue was not caused by apollo server or the client.

经过大量研究，我发现Node.js 服务器默认在 120 秒后超时请求并关闭与客户端的连接.这反过来会导致浏览器重试请求，但浏览器不会记录重试在开发者工具的网络选项卡中请求，这会引起很多混乱.

After a lot of research, I found that Node.js server by default times out a request after 120 seconds and closes the connection to the client. This in turn causes the browser to retry the request but the browser doesn't log that retried request in the network tab in developer tools which is a cause of lot of confusion.

因此，ExpressJS 服务器中的更改请求超时持续时间 为我解决了这个问题.

So, changing the request timeout duration in the ExpressJS server resolved the issue for me.

最初发布在这里

这篇关于Reactjs/Apollo/AppSync 突变触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！