UI not reflecting changes after mutation

Question

I am using a QueryRenderer to populate an edit form in my application. The data is also being displayed in additional DOM elements throughout the page. I am then saving the values back on form submit through a mutation. Everything works great, except for the fact that my UI is not reflecting the changes afterwords. Here is my initial query:

    query EditPlanDialogQuery($planId: Int!) {
        planByPlanId(planId: $planId) {
            nodeId
            ...fields
        }
        allSchedules {
            nodes {
                ...fields
            }
        }            
    }

Then my mutation and wrapper function are defined as follows:

    mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
        updatePlan(input: $input) {
            plan {
                ...fields
            }
        }
    }

...

    editPlan = (values: any) => {
        const {
            nodeId,
            ...otherValues
        } = values;
        const variables = {
            input: {
                nodeId: nodeId,
                planPatch: { ...otherValues },
            },
        };
        commitMutation(
            environment,
            {
                mutation,
                variables,
                onCompleted: (response, errors) => alert(response),
                onError: err => alert(err),
            }
        );
    }

Again, the data is being saved to the database properly, however the other DOM elements that are displaying the data are not rendered to reflect the changes. I thought for simple updates Relay handled this? According to their docs anyway this should be the case. I tried messing with the updater callback, and ultimately got the page to update, but it seemed very clunky. Any advice is appreciated, thanks!

Answer 1

Not sure what fields you're getting, but I guess you don't get id from the mutation. You always have to ask for node's id, so relay can match updated nodes in the store. And node's id have to be named id (not nodeId)

mutation EditPlanDialogMutation($input: UpdatePlanInput!) {
    updatePlan(input: $input) {
        plan {
            id
            ...fields
        }
    }
}