Relay optimistic response when using REQUIRED_CHILDREN config

Question

I have a mutation that looks like so:

export default class CreateTaskMutation extends Relay.Mutation {
    //noinspection JSUnusedGlobalSymbols
    getMutation() {
        return Relay.QL`
            mutation {
                createTaskMutation
            }
        `;
    }
    //noinspection JSUnusedGlobalSymbols
    getCollisionKey() {
        return `check_${this.props.id}`;
    }

    //noinspection JSMethodCanBeStatic,JSUnusedGlobalSymbols
    getFatQuery() {
        return Relay.QL`
            fragment on CreateTaskMutationPayload {
                savedTask {
                    _id,
                    isPublic,
                    isDone,
                    taskDescription {
                        description
                    }
                }
            }
        `;
    }

    // noinspection JSUnusedGlobalSymbols
    getConfigs() {
        return [{
            type: 'REQUIRED_CHILDREN',
            children: [
                Relay.QL`
                    fragment on CreateTaskMutationPayload {
                        savedTask {
                            _id,
                            isPublic,
                            isDone,
                            taskDescription {
                                description
                            }
                        }
                    }
                `
            ]
        }];
    }

    //noinspection JSUnusedGlobalSymbols
    getVariables() {
        return {
            cookie: this.props.cookie,
            owner: this.props.owner,
            taskDescription: this.props.taskDescription,
            isPublic: this.props.isPublic,
            isDone: this.props.isDone
        };
    }

    //noinspection JSUnusedGlobalSymbols
    getOptimisticResponse() {
        return {
            savedTask: {
                owner: this.props.owner,
                taskDescription: this.props.taskDescription,
                isPublic: this.props.isPublic,
                isDone: this.props.isDone
            }
        };
    }
}

And I am using it like so:

Relay.Store.commitUpdate(
    new CreateTaskMutation({
        cookie: this.state.cookie,
        owner: this.state.id,
        taskDescription: {description: this.state.taskDescriptionInput},
        isPublic: this.state.isTaskPublic,
        isDone: this.state.isTaskDone
    }),
    {
        onSuccess: (response) =>  {
            const newArray = this.state.newlyAddedTasks;
            newArray.push(response.createTaskMutation.savedTask);
            this.setState({
                newlyAddedTasks: newArray
            });
        }
    }
);

Now, when you use a config like FIELDS_CHANGED I could do this.props.relay.hasOptimisticUpdates(<some item>), but since I am creating something that the relay store does not know about yet, there is no DataID for it to look up. So, my current solution is to use two sources for tasks, the relay fragment response, and a piece of state that I update on success.

<CreateTaskRequestBox
    tasks={this.props.currentUserFragment.userField.tasks}
    newTasks={this.state.newlyAddedTasks}
/>

Is there a neat way for me to put an optimistic response in the Relay Store and have it be update like if I had used FIELDS_CHANGED config? My current solution seems a bit hacky, and it isn't optimistic.

Answer 1

So, you want this mutation to actually modify the graph, not just return the payload to use temporarily? Then use one of the documented mutation configs: both FIELDS_CHANGE and RANGE_ADD will mutate the connection in the local graph and update your views accordingly. REQUIRED_CHILDREN is explicitly not for mutations that shouldn't actually affect the local graph, and isn't documented so I'm not sure why you are using it... :)

To use FIELDS_CHANGE, update your payload to include the parent node (looks like userField in your case), and then just do a fat query of userField { tasks }.

To use RANGE_ADD, update your payload to also include the new task edge (e.g. savedTaskEdge { cursor, node }), and reference that in the mutation config.