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!

Answer 1

Can you try providing an optimisticResponse?

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

The AppSync client currently needs an optimisticResponse being present as part of the mutation