React-apollo: Access data prop in component life cycle methods with new render props API

[farzd]

The following screen gets re-rendered by a parent component [Navigation], so i have a simple shouldComponentUpdate check. I'm able to access the data prop with HOC, however is this some how possible with render props API? All the props are only going to be available in the enclosed render prop function

import React from 'react'
import { graphql } from 'react-apollo'
import CheckIn from './CheckIn'
import Feed from './Feed'
import localCheckedInQuery from '../queries/local/checkedIn'

const CheckInOrFeed = class CheckInOrFeed extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data.checkedIn !== nextProps.data.checkedIn
  }

  render() {
    const { checkedIn } = this.props.data

    if (checkedIn) {
      return <Feed />
    }

    return <CheckIn />
  }
}

export default graphql(localCheckedInQuery)(CheckInOrFeed)

• [email protected]
• [email protected]

[cooperka]

This would be possible if you create a new, higher-order component that renders <Query query={localCheckedInQuery}><CheckInOrFeed /></Query>. Then CheckInOrFeed can remain the same, and shouldComponentUpdate will work.

Of course, that's what the graphql wrapper already does! I don't think you'd benefit from the new render API in this case. (I have a similar situation with my app. Maybe someone can enlighten me if I've overlooked a different solution.)

[rosskevin]

You have to wrap the component that requires data in the lifecycle with the Query and pass in the result, or use the hoc, which is the rough equivalent.