Setting state in the Query component of react-apollo

Whatever component needs this data as state should be rendered inside the Query component, and then have the data passed down to it as a prop. For example:

class MyComponent extends React.Component {  constructor (props) {    this.state = {      title: props.post.title    }  }}<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>  {({ data, loading, error }) => {    <MyComponent post={data.post}/>  }}</Query>

You can use the onCompleted prop on Querycomponent to set the state. See below example:

class MyComponent extends React.Component {  constructor (props) {    this.state = {      isFirstRender: true      title: props.post.title    }  }    setTitle = title => {    if (this.state.isFirstRender){        this.setState({title, isFirstRender: false})    }  }    render () {    return <Query             query={POST_QUERY}             variables={{ id: this.props.match.params.id }}              onCompleted={data => this.setTitle(data.post.title)}           >      {({ data, loading, error }) => {        <MyComponent post={data.post}/>      }}    </Query>  }}

Edit:

As the bug of onCompleted firing multiple times has been resolved in the latest version of react-apollo, we can now simply do:

  ...     <Query        query={POST_QUERY}        variables={{ id: this.props.match.params.id }}        onCompleted={data => this.setState({ title: data.post.title})}     >      {({ data, loading, error }) => {         <MyComponent post={data.post}/>      }}    </Query>  )  ...