React Native中使用React Apollo时data prop为何未定义？

我猜你肯定挠头半天了——明明用了graphql高阶组件，却拿不到data prop来做下拉刷新对吧？先看看你贴的代码：

class abc extends Component {
  render() {
    return (
      <View>
        <ScrollView
          onRefresh={this.props.data.refetch} // undefined error
          refreshing={this.props.data.loading} // undefined error
        >
          .....
        </ScrollView>
      </View>
    );
  }
}

export default compose(
  ....,
  graphql( MyQuery,{ ..... } )
)(abc);

出现data未定义的情况，大概率是这几个原因：

1. compose里HOC的顺序搞反了 #

compose是从右到左执行的，也就是说数组里最后一个HOC会先包裹你的组件。如果graphql不是放在最后一位，前面的HOC可能没有把data prop传递下去，甚至覆盖掉它。比如你如果把其他HOC放在graphql后面，那这个HOC拿到的props里就没有data，自然也传不到你的组件里。

解决办法：把graphql HOC放在compose数组的最后一位，确保它是第一个包裹组件的：

export default compose(
  // 其他HOC放在前面
  withSomeOtherStuff(),
  // graphql放在最后，最靠近你的组件
  graphql(MyQuery, { /* 你的配置 */ })
)(abc);

2. 给graphql设置了name选项 #

如果你在graphql的配置里写了name字段，比如：

graphql(MyQuery, {
  name: 'myCustomQuery' // 自定义了名字
})

那查询结果就不会注入到this.props.data里，而是会变成this.props.myCustomQuery。这时候你再用data自然就找不到了。

解决办法：要么去掉name配置，要么把代码里的data换成你自定义的名字，比如this.props.myCustomQuery.refetch。

3. 先调试看看实际的props是什么 #

最直接的办法就是在render里打印this.props，看看到底有没有data这个属性，或者它是不是叫别的名字：

render() {
  console.log('当前组件的props:', this.props);
  // 剩下的代码
}

打开控制台一看，你就能清楚知道问题出在哪——是根本没注入，还是名字不对。

4. 检查查询本身有没有问题 #

如果MyQuery这个GraphQL查询本身有语法错误，或者和后端的Schema不匹配，graphql HOC可能无法正常注入data prop。可以先单独测试一下这个查询，确认它能正常返回数据。

试完这几个方法，应该就能解决data未定义的问题啦！

内容的提问来源于stack exchange，提问作者Naveen Vignesh