React-apollo: Handling errors from mutation with an optimistic response

[dmitryyankowski]

Sorry if this is a stupid question.. or it's been asked. But i'm a little confused on how to handle errors from a mutation with an optimistic response. Since the mutation returns the optimistic response.. i'm not sure how to catch the error after the server finally receives it.

Here is my Apollo and handler code as an example.

```
createCoinflip = async e => {
e.stopPropagation();
e.preventDefault();

const { createCoinflip } = this.props;
const { side, amount } = this.state;

await createCoinflip({
  amount,
  side
});

this.setState({
  amount: '',
  side: ''
});

};

export default compose(
connect(mapStateToProps, mapDispatchToProps),
graphql(ListCoinflipGames, {
options: {
fetchPolicy: 'cache-and-network'
},
props: props => ({
coinflipGames: props.data.listActiveCoinflipGames
? props.data.listActiveCoinflipGames.items
: [],
loading: props.data.loading
})
}),
graphql(CreateCoinflip, {
options: props => ({
update: (proxy, { data: { createCoinflip } }) => {
const query = ListCoinflipGames;
const data = proxy.readQuery({ query });

    data.listActiveCoinflipGames = {
      ...data.listActiveCoinflipGames,
      items: [
        ...data.listActiveCoinflipGames.items.filter(
          c => c.id !== createCoinflip.id
        ),
        {
          ...createCoinflip,
          player2Id: null,
          player2Username: null,
          winner: -1,
          __typename: 'CoinflipGame'
        }
      ]
    };
    proxy.writeQuery({ query, data });
  }
}),
props: ({ ownProps, mutate }) => ({
  createCoinflip: coinflip => {
    return mutate({
      variables: coinflip,
      optimisticResponse: {
        createCoinflip: {
          ...coinflip,
          id: Math.round(Math.random() * -1000000),
          createdAt: new Date().toISOString(),
          player1Id: ownProps.auth.id,
          player1Username: ownProps.auth.username,
          player1Side: coinflip.side,
          player2Id: null,
          player2Username: null,
          state: 'waiting',
          status: 'open',
          winner: -1,
          __typename: 'CoinflipGame'
        }
      }
    });
  }
})

})
)(Coinflip);
```

Sometimes an error is returned from the mutation so I want to be able to catch it and handle it so the optimistic response value gets removed from the screen and also show an error to the user.

Note: Like I said above.. I tried putting a try-catch block around the await..but that won't work because the optimistic response is returned..so no error is returned.. when the server response has one.

Any ideas on how I can achieve this thanks?

[nghiepit]

With the new version 2.1 https://www.apollographql.com/docs/react/api/react-apollo.html#mutation-render-prop

For older versions, you can use catch

createCoinflip({
    amount,
    side
}).catch(error => console.log(error))

[deftomat]

@nghiepit I tried to read an error property in Mutation component and it is still empty when I provide optimisticResponse. Also, a no rollback of an optimisticResponse will happen.

Setting an optimisticResponse leads to ignoring all the errors from the server.

EDIT: We find out that, for us, the issue was caused by AWS AppSync client which is using Apollo internally. Switching to Apollo itself solved our issues.

[blackPeanut]

@lolcoolkat Hey, how you solved this issue? I'm not getting an errors from server too when I have an optimistic response. When I comment out optimistic response, my error object works as expected.