reactjs - Relay Modern 片段数据为空

Question

{这是现代接力赛}

在我的 UserQuery.js 中，

class UserQuery extends Component {
  render () {
    return (
      <QueryRenderer
      environment={environment}
      query={GetAllUsers}
      render={({err, props}) => {
        if(props){
          return <UserList />
        }

        return <Text>Loading...</Text>
      }
    }/>
    )
  }
}

export default UserQuery;

所以这是调用 QueryRenderer 的 UserQuery 的根。现在是 userList 组件..

class UserList extends Component {
  render () {
    const users = this.props.users
    return (
      <View>
        {this.renderUsers(users)}
      </View>
    )
  }
  renderUsers(users) {
    if(!users) {
      return <Text>No Users</Text>
    }
    return users.edges.map(user=>{
      return <UserItem user={user}/>
    })
  }
}
module.exports = createFragmentContainer(
  UserList,
  graphql`
  fragment userList_users on userEdges {
    node {
      ...userItem_user
    }
  }
  `
)

Userlist 片段包含子 userItem 的信息，即

class UserItem extends React.Component {
  render() {
    const user = this.props.user;
    return (
      <View>
        <Text>{user}</Text>
      </View>
    )
  }
}
module.exports = createFragmentContainer(
  UserItem,
  graphql`
    fragment userItem_user on User {
      username
    }
  `
)

问题是当console.log(this.props.users)在userList中时，它返回Null。片段 userList={}

但是，当我在不使用 Fragment 的情况下通过将 this.props.users 从 UserQuery 组件传递给子组件来完成此操作时，它工作得很好。

如果有人能用更好的例子来详细阐述 createFragmentContainer 那就太好了。谢谢..

Answer 1

我也是中继现代的新手，但据我了解，您需要将查询的对象传递给 child ，如下例所示:

https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32

显然您需要使用 data 属性，因为它提取正确的片段

我在试图弄清楚是否可以以某种方式避免这样做时偶然发现了这个问题，因为这似乎有点不必要。