Title: why withApollo's query doesn't receive props?
Tags: reactjs;apollo;react-apollo
Question: Code below, when this component loaded it will send two queries, then in the  life cycle method, I checked if some info is exist such as id in this example. if this id is exist, it will execute another new query base on this id.
the thing is the query is success resolve and the back data is the real info I wanted, but I can't find it in this.props.data (the this.props.data is undefined) in the render function.
What's the problem of this approach, and why the this.props.data is undefined?
class UserInfo extends Component {
constructor(props) {
super(props);
this.state = {
};
componentWillReceiveProps(nextProps) {
if (nextProps.wechat.wechatUser &amp;&amp; nextProps.wechat.wechatUser.binded &gt; 0) {
const id = nextProps.wechat.wechatUser.binded;
this.props.client
.query({
query: QUERY_PLAYER,
fetchPolicy: 'network-only',
variables: {
id,
},
})
.then(({ data }) =&gt; {
console.log(data);
});
render() {
if (this.props.data.player) {
return (
<div&gt;
{this.props.data.player.name}
</div&gt;
);
return <div&gt;loading</div&gt;;
const WECHATUSER_QUERY = gql`
query WechatUser($id: Int!) {
wechatUser(id: $id) {
id
nickname
sex
city
province
openid
unionid
headimgurl
role_id
game_id
type_id
parent_id
tel
disabled
remainder
created_at
updated_at
language
weixin_account
is_api_user
binded
const QUERY_TYPE = gql`
listAgentCategory {
id
name
num
price
profit
investment
const QUERY_PLAYER = gql`
query player($id: Int!) {
player(id: $id) {
id
roomid
headimg
name
sex
lv
exp
coins
gems
roomid
reg_time
login_time
logout_time
online_time
lock
platform
agent
const withData = graphql(QUERY_TYPE, { name: 'agentType' })(
graphql(WECHATUSER_QUERY, {
name: 'wechat',
options: props =&gt; ({
fetchPolicy: 'network-only',
variables: {
id: JSON.parse(localStorage.getItem('userinfo')).user.id,
},
}),
})(UserInfo)
export default withApollo(withData);
Comment: In the given code block, where did you use `this.props.data`?

Comment: @JudeNiroshan cause in my render function I need the info from `this.porps.data` such as `{this.props.data&&this.props.data.name}`


Here is another answer: As you are receiving the result from an asynchronous call, you should use the state. You cannot modify the props. The convention is to use the state object in a scenario like this.
constructor() {
super();
this.state = {
data: ''
};
then, modify your componentWillReceiveProps() as follows:
this.props.client
.query({
query: QUERY_PLAYER,
fetchPolicy: 'network-only',
variables: {
id,
},
})
.then(({ data }) =&gt; {
this.setState({
'data': data
});
});
});
then use this in your render() like below:
<div&gt;{this.state.data &amp;&amp; this.state.data.name}</div&gt;
Hope this will help you. :-)
Comment for this answer: Ohh, I didn't know about that. I just tried to help you with what I know. :)
Comment for this answer: IMO, it's counter-pattern with react and react-apollo, `react-apollo` container      give u the access to props properties directly.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:08/11/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<reactjs><apollo><react-apollo>', 'Title': "why withApollo's query doesn't receive props?", 'ViewCount': 523, 'id': 45628048, 'user_AboutMe': '', 'user_AccountId': 10266166.0, 'user_DisplayName': 'Liuuil', 'user_Reputation': 1331.0, 'user_Views': 58.0, 'user_id': 7576088.0}}