Reactjs/Apollo/AppSync Mutation triggered twice

Question

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>

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);
}

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 }
                })
            }),
        }
    ),
...

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

Any help would be hugely appreciated!

Can you try this again? There was an update to the AppSync JavaScript SDK which no longer requires you to use an optimistic response, which at the time might be why this was happening. Also you can use disableOffline:true in the constructor now if you don't need offline functionality. More info here: docs.aws.amazon.com/appsync/latest/devguide/… — Richard

Yashas Yashas · Accepted Answer · 2020-07-27T17:44:43

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.

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

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.

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

Originally posted here

Reactjs/Apollo/AppSync Mutation triggered twice

2 Answers