2

我遇到了 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 }
                })
            }),
        }
    ),
...

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

任何帮助将不胜感激！

4

2 回答 2

3

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

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

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

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

最初发布在这里

于 2020-07-27T17:44:43.260 回答
2

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

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

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

于 2018-01-19T20:26:50.840 回答