React-Apollo - render getting called before getDerivedStateFromProps - reactjs

Question

I have a component that includes a verification form for a user. This component runs a graphql query upon mount. In the Verification component, I need to use the data from the graphql query to set the state so I can use it to update any values, and then submit them with the form. I have since learned about getDerivedStateFromProps and that is working to populate a new state from that data. But, the data isn't available in the DOM. It's as if render gets called before getDerivedStateFromProps.
Here is the component:
class Verification extends React.Component {
constructor(props) {
super(props);
this.state = {
company: {
legalName: ''
},
openCorporatesCompany: {}
};
}
handleLegalNameChange = (legalName) => {
let company = _.cloneDeep(this.state.company);
company.legalName = legalName;
this.setState({
company
})
};
static getDerivedStateFromProps(next, prev) {
let newState = _.cloneDeep(prev);
let {openCorporates: {getEntityAttribute}} = next;
if (getEntityAttribute && getEntityAttribute.value) {
let openCorporatesCompany = JSON.parse(getEntityAttribute.value);
let company = _.cloneDeep(newState.company);
company.legalName = openCorporatesCompany.name;
newState.openCorporatesCompany = openCorporatesCompany;
newState.company = company;
return newState;
}
return null;
}
render() {
console.log(this.state);
return (
<Input
label='Legal Name'
placeholder='Legal entity name...'
type='text'
subtext='Use the name your customers or clients will recognize'
onChange={this.handleLegalNameChange}
value={this.state.legalName}
/>
);
}
}
export const VerificationContainer = compose(
connect(mapStateToProps, mapDispatchToProps)
graphql(GetEntityAttributeQuery, {
name: "openCorporates",
options: (props) => ({
variables: {
entityId: props.currentEntity.id,
type: EntityAttributes.TypeOpenCorporates
}
})
})
)(Verification);
The console output of the console.log(this.state) in render looks like this:
As you can see, the field gets updated in state in company.legalName. But, it never gets populated in the Input box:
Why does the input not get updated with the new state? It's as if the render gets called before getDerivedStateFromProps.

Answer 1

I know your struggle with react and component updating, but I guess there's no bullet proof to get rid of it; 80% I guess you should try any of the different life cycle methods. Back in the day there was componentWillReceiveProps for async calls but since it's been marked unsafe (I guess) you should try getDerivedStateFromProps(props, state)
getDerivedStateFromProps(props, state) {
console.log("*************** PROPS:", props);
let { openCorporates: { getEntityAttribute } } = props;
if (getEntityAttribute && getEntityAttribute.value) {
let openCorporatesCompany = JSON.parse(getEntityAttribute.value);
let company = _.cloneDeep(this.state.company);
company.legalName = openCorporatesCompany.name;
this.setState({
openCorporatesCompany,
company
})
}
}
Take into account I haven't run the snippet.

Answer 2

This ended up doing the trick, thanks to #Charlie's answer:
static getDerivedStateFromProps(props, state) {
let newState = _.cloneDeep(state);
let { openCorporates: { getEntityAttribute } } = props;
if (getEntityAttribute && getEntityAttribute.value) {
let openCorporatesCompany = JSON.parse(getEntityAttribute.value);
let company = _.cloneDeep(newState.company);
company.legalName = openCorporatesCompany.name;
newState.openCorporatesCompany = openCorporatesCompany;
newState.company = company;
}
return newState;
}