Hey guys, can anyone share some advice on getting ...
# prisma-whats-newk
kuldar
09/01/2017, 11:37 AMHey guys, can anyone share some advice on getting data from Apollo with
react-apolloprops.datacomponentDidMount()d
dankent
09/01/2017, 11:52 AMIf you are using the graphql HOC component, it will deliver the data by updating props.data when it arrives. Until then, props.data.loading will be true
dankent
09/01/2017, 11:53 AMSo, you need to either respond to props.data.loading in the render method (the usual approach) or you could use componentDidReceiveProps to do something when the data arrives
dankent
09/01/2017, 11:54 AMIf you absolutely need the data to be there when the component mounts, you will need to get the data in the parent component and only render the component once you have the data
dankent
09/01/2017, 11:55 AMWhat is it that you are trying to do that needs to get the data early in the component lifecycle?
k
kuldar
09/01/2017, 12:31 PMThe goal is to render an object's edit form with values pulled from the state. That would allow to keep all the made changes in the state as well, and submit the whole state as the new object on submit.
Would the correct way of acheiving that be to have a subcomponent for the form, pass in the data as props to it, and have it keep the data in state and send everything back with a submit callback?
d
dankent
09/01/2017, 1:36 PMI do things similar to that for some components. If the component is responsible for the entire things, I use componentDidReceiveProps to set the state when the data has loaded, render the component based on the state (with a 'loading' message until the state has been set), update the state as the user makes changes and then use a mutation to write the changes when the user click save
dankent
09/01/2017, 1:37 PMIf the component is only responsible for some of the fields, I get the the data in the parent and pass it in as props - in those cases, the 'loading' message is handled by the parent component and I pass an onSave callback in the props so the parent component can deal with the mutation as well
k
kuldar
09/01/2017, 1:58 PMCorrect me if I'm missing something, but there doesn't seem to be such a thing as
componentDidReceivePropsd
dankent
09/01/2017, 2:12 PMsorry, componentWillReceiveProps
dankent
09/01/2017, 2:13 PMit takes the next props the component is being given as a parameter
k
kuldar
09/01/2017, 2:25 PMI believe this doesn't run on initial page load, though?
d
dankent
09/01/2017, 8:21 PMWhen the component mounts, the data will not have loaded yet (i.e. props.data.loading will be true) so you won't have any data to do anything with
dankent
09/01/2017, 8:29 PMWhen the data does load, componentWillReceiveProps will fire. nextProps.data.loading will be false and the data will be there (unless there has been an error and then nextProps.data.error will be populated)
dankent
09/01/2017, 8:29 PMSo in this case, that is not a problem. As an aside, when I have a situation where I need to initialise state from props at mount and when props change, I just have a function called setStateFromProps that I call from both componentDidMount and componentWillReceiveProps
dankent
09/01/2017, 8:31 PMI would recommend having a play with a component that has the graphql HOC and all the lifecycle handlers defined, with some logging to show what happens. It will all become clear.