How to keep React component state and Apollo in sync after updating Apollo cache

I have a component with form data. A Query is used to fetch the data. There is a Mutation to mutate the data. The changed input values are stored in the React component using setState.

The problem now is that I’ve got some state in Apollo and some state in the React component – and togheter they represent my state. I need those to be in sync – that is, they should be changed as an atomic operation and trigger exactly one render.

I got the impression that apollo-link-state was the answer for client state, and I tried to reimplement the form using that. While that solved this particular issue, it was a more verbose solution, the performance was a lot worse, and I decided for these reasons to go back to using setState.

A dirty hack I’m doing now is writing to the Apollo cache and then updating the React component state. While it seems to work for this component and the way it is currently used, it can lead to race conditions, and the state is invalid until both are updated (given that they finish execution in the order one would expect). Right now my Mutation.update method ends with this:

cache.writeQuery({
    query: GET_TODOS,
    data: nextState
});

setTimeout(() => {
    this.setState({
        changedTodos: {},
    });
}, 500);

This is not ideal. I’d appreciate any help finding a way to overcome this issue.