How to handle unresolved props in relay mutations?

Question

I created a Relay.Mutation that should trigger updates on User objects:

class UserMutation extends Relay.Mutation {
    public getMutation() {
        return Relay.QL`mutation {saveUser}`;
    }

    public getVariables() {
        return {
            id: this.props.user.id,
            loginName: this.props.user.loginName,
            firstName: this.props.user.firstName,
            lastName: this.props.user.lastName,
            mail: this.props.user.mail
        }
    }

    public getFatQuery() {
        return Relay.QL`
            fragment on UserPayload {
                user {
                    id,
                    loginName,
                    firstName,
                    lastName,
                    mail
                }
            }
        `;
    }

    public getConfigs() {
        return [{
            type: "FIELDS_CHANGE",
            fieldIDs: {
                user: this.props.user.id
            }
        }];
    }

    static fragments = {
        user: () => Relay.QL`
            fragment on User {
                id,
                // I initially had only id here
                loginName,
                firstName,
                lastName,
                mail
            }
        `
    }
}

I'm using this mutation in my component UserDetails like this:

// I initially passed this.props.user to the mutation
this.props.relay.commitUpdate(new UserMutation({ user: this.state.user })

When executing, relay passes a user to the backend with only id set, without any other property. The mutation is not executed, because the input variable is missing the other fields.

After debugging into the mutation, I saw that this.props.user has set undefined on all fields but id. However, this._unresolvedProps.user is a user with all fields set correctly.

When I change the code of the mutation and replace all this.props by this._unresolvedProps , all necessary data is transmitted to the backend and the mutation is executed without any error. Frontend cache seems to be updated correctly, too (fields like firstName are updated in other components). But I don`t expect this to be the right way to go.

What do I miss?

UPDATE

The UserDetails component loads users data like loginName and provides text boxes to change these properties. The corresponding relay container looks like this:

export default Relay.createContainer(UserDetails, {
    fragments: {
        user: () => Relay.QL`
            fragment on User {
                id,
                loginName,
                firstName,
                lastName,
                mail,
                roles {
                    id,
                    name
                },
                ${UserMutation.getFragment("user")}
            }
        `
    }
});

I handle text box changes in a text input handler...

public handleTextInput(fieldName: string, event: any) {
    let user = this.state.user;

    switch (fieldName) {
        case "loginName": {
            user.loginName = event.target.value;
            break;
        }
        case "firstName": {
            user.firstName = event.target.value;
            break;
        }
        case "lastName": {
            user.lastName = event.target.value;
            break;
        }
        case "mail": {
            user.mail = event.target.value;
            break;
        }
    }

    this.setState({ user: user });
}

...and form submit in a submit handler, where I now pass this.state.user to the mutation:

public handleSubmit(e: any) {
    e.preventDefault();
    this.props.relay.commitUpdate(new UserMutation({ user: this.state.user }), {
        onSuccess: (response: any) => {
            this.setState({ user: response.saveUser.user });
        }
    });
}

I use a C# backend: graphql-dotnet . This is what I have defined for the mutation:

public class ApplicationSchema : Schema
{
    public ApplicationSchema()
    {
        this.Query = new ApplicationQuery();
        this.Mutation = new ApplicationMutation();
    }
}

public class ApplicationMutation : ObjectGraphType
{
    public ApplicationMutation()
    {
        this.Name = "Mutation";

        // save a user
        this.Field<UserPayloadType>(
            "saveUser",
             arguments: new QueryArguments(
             new QueryArgument<NonNullGraphType<UserInputType>>
             {
                 Name = "input",
                 Description = "the user that should be saved"
             }),
            resolve: context =>
                {
                    var userInput = context.Argument<UserInput>("input");
                    var clientMutationId = userInput.ClientMutationId;

                    var user = MemoryRepository.UpdateUser(new User()
                    {
                        Id = userInput.Id,
                        LoginName = userInput.LoginName,
                        FirstName = userInput.FirstName,
                        LastName = userInput.LastName,
                        Mail = userInput.Mail
                    });

                    return new UserPayload()
                    {
                        ClientMutationId = clientMutationId,
                        User = user
                    };
                });
    }
}

public class UserInputType : InputObjectGraphType
{
    public UserInputType()
    {
        this.Name = "UserInput";

        this.Field<NonNullGraphType<StringGraphType>>("id", "The id of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("loginName", "The login name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("firstName", "The first name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("lastName", "The last name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("mail", "The mail adress of the user.");

        this.Field<NonNullGraphType<StringGraphType>>("clientMutationId", "react-relay property.");
    }
}

public class UserPayloadType : ObjectGraphType
{
    public UserPayloadType()
    {
        this.Name = "UserPayload";

        this.Field<NonNullGraphType<UserType>>("user", "The user.");

        this.Field<NonNullGraphType<StringGraphType>>("clientMutationId", "react-relay property.");
    }
}

public class UserType : ObjectGraphType
{
    public UserType()
    {
        this.Name = "User";
        this.Field<NonNullGraphType<StringGraphType>>("id", "The id of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("loginName", "The login name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("firstName", "The first name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("lastName", "The last name of the user.");
        this.Field<NonNullGraphType<StringGraphType>>("mail", "The mail adress of the user.");

        Field<ListGraphType<RoleType>>("roles", resolve: context => MemoryRepository.GetRolesOfUser(context.Source as DomainModel.Models.User));
    }
}

Answer 1

Is your Relay container fetching the User fragment correctly? I see in your static fragments definition fragment on User is only id field, so I wonder if your parent Relay component is fetching them all.

Since your mutation is really dependent on those fields, add them to fragments property.

class UserMutation extends Relay.Mutation {
    public getMutation() { ... }

    // getVariables, FatQuery and Configs ...

    static fragments = {
      user: () => Relay.QL`
          fragment on User {
              id,
              loginName,
              firstName,
              lastName,
              mail
          }
      `
    }
}

And then try including this fragment in Relay component, which uses your mutation. Example React-Relay component:

import UserMutation from 'mutations/user';

class User extends Component {
  commit(e) {
    Relay.Store.commitUpdate(
      new UserMutation({
        user: this.props.user
      })
    );
  }

  render() {
    return (
      <div>Hello</div>
    );
  }
};

export default Relay.createContainer(User, {
  fragments: {
    user: () => Relay.QL`
      fragment on User {
        ${UserMutation.getFragment('user')}
      }
    `,
  }
});

Answer 2

Use REQUIRED_CHILDREN and update state in the component.

Rather than use FIELDS_CHANGE you could use REQUIRED_CHILDREN which will enable you to add the returned saved object into your store. What you would do is set up your getConfigs like this:

getConfigs() {
  return [{
    type: 'REQUIRED_CHILDREN',
      children: [
        Relay.QL`
          fragment on UserPayload {
            user {
              id
              loginName
              firstName
              lastName
              mail
            }
          }
        `
      ]
  }]
}

And in change your commitUpdate like this:

this.props.relay.commitUpdate(
  new UserMutation({user: this.props.user}),
  {
    onSuccess: response => this.setState({
      user: response.user,
    }),
    onError: err => console.log(err)
  }
);

As you can see, the onSuccess callback enables you to call an actionCreator and put the new user into the state of your application. This you would do using whatever state management you are using in your application. In this case it is simply setState.

REQUIRED_CHILDREN config is used to append additional children to the mutation query. You may need to use this, for example, to fetch fields on a new object created by the mutation (and which Relay would normally not attempt to fetch because it has not previously fetched anything for that object).

Data fetched as a result of a REQUIRED_CHILDREN config is not written into the client store, but you can add code that processes it in the onSuccess callback that you pass into commitUpdate()

There is more information in the documentation about REQUIRED_CHILDREN here.