How do you put apollo query data into a controlled input?

Question

So using Apollo's <Query> component, I can get data just fine. At some point I'm going to have to feed some of this data into a user input. I would like this input to be controlled which means the data needs to live in component state. So it seems like I need to convert the data from the Apollo query into component state, or more accurately, data from Apollo query -> passed down as component prop -> component state.

The only way I know how to achieve that is to use componentDidUpdate or getDerivedStateFromProps. The React docs make it very clear that using those functions are bad practices, especially when dealing with inputs... So how are we supposed to do this? I must be missing something really obvious here.

Answer 1

I opted to go this route: Querying and Mutating a Form with Apollo Client GraphQL

Basically, wait till you have the data, then render your form/inputs. Pass the data from apollo down and set the initial state in the form/input constructor. Then use setState like normal.

I'm a little disappointed though because what if I wanted to update the data in the form from another graphql query after the first render? Seems like you're just out of luck in that case.