How to tell relay to update a dataset? - reactjs

Question

TL;DR:
After reading through various resources about React and Relay and by building a prototype app with react-relay, I came across a problem that I cannot solve without help. It's about how to tell a mutation which data to save.
I have a component that shows details of a User entity. It's loaded via a relay query. This component has an <input /> field with the name of the user and a save button that triggers a relay.commitUpdate(...) call. Whenever I change the name of the user in the input field and click on save, I can see that not the changed but the original name is send to the backend.
I am building an app with react-relay and I am working on a component that should display details about a user entity with the possibility to change these data and save it. It`s the detail part of the Master-Detail-Pattern.
Loading and changing of data works fine. But changes are not commited to the backend. For data updates I am trying to use relay mutations.
After clicking on save, I can see in the developer console in my chrome browser, that unaltered data is send to my backend. What do I miss? Here is what I have so far (Typescript code).
(Update: when placing break points into the onSaveClick() method of the component and the getVariables() method in the mutation, I see that in onSaveClick the property this.props.user contains made changes while this.props.user in getVariables() returns the initial data.)
export interface IUserDetailsProps { user: User }
export interface IUserDetailsStates { user: User }
class UserDetails extends React.Component<IUserDetailsProps, IUserDetailsStates> {
constructor(props: IUserDetailsProps) {
super(props);
this.state = { user: this.props.user };
}
public onFirstNameChange(event: any) {
let user = this.state.user;
this.state.user.firstName = event.target.value;
this.props.user.firstName = event.target.value; // is this needed?
this.setState({ user: user });
}
public onSaveClick() {
this.props.relay.commitUpdate(new UserMutation({ user: this.props.user }));
}
public render(): JSX.Element {
let user: User = this.props.user;
return <div>
<input type="text" value={user.firstName} onChange={this.onFirstNameChange.bind(this)} />
<button onClick={this.onSaveClick}>Save</button>
</div>;
}
}
class UserMutation extends Relay.Mutation {
public getMutation() {
return Relay.QL`mutation {saveUser}`;
}
public getVariables() {
return this.props.user;
}
public getFatQuery() {
return Relay.QL`
fragment on UserPayload {
user {
id,
firstName
}
}
`;
}
public getConfigs() {
return [{
type: "FIELDS_CHANGE",
fieldIDs: {
user: this.props.user.id
}
}];
}
static fragments = {
user: () => Relay.QL`
fragment on User {
id,
firstName
}
`
}
}
export default Relay.createContainer(UserDetails, {
fragments: {
user: () => Relay.QL`
fragment on User {
id,
firstName,
${UserMutation.getFragment("user")}
}
`
}
});
Solution attempt:
I changed the line for the input field of the user's first name to this:
<input type="text"
ref={(ref) => {
this.myTextBox = ref;
ref.value = this.props.user.firstName;
}} />
and removed the change event handler and removed all state code.
My click handler now looks like this:
public onSaveClick() {
let user = Object.assign({}, this.props.user);
user.firstName = this.myTextBox.value;
this.props.relay.commitUpdate(new UserMutation({user: user}));
}
and I can see, that the user object passed to the mutation now has the new value for firstName that I have changed in the text input. But again, relay sends the unchanged user to my backend. Here is a screenshot that shows my problem: