继电器现代的分段数据为空

在我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的根源。现在，用户列表组件..

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 
    } 
    } 
    ` 
)

用户列表片段包含了孩子的信息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）时的问题是，它返回Null 。而片段userList = {}

但是，当我通过从UserQuery组件传递this.props.users而不使用碎片来做到这一点，它工作正常。

如果任何人都可以用更好的例子来阐述createFragmentContainer，那将会很棒。谢谢..

来源

2017-04-23 Saud Punjwani

我有完全相同的问题并卡住。找到解决方案？ –

我是新来传达现代也是如此，但据我了解您需要查询的对象传递给孩子就像这个例子：

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

而且很显然，你需要使用数据属性，因为它提取正确的片段

我偶然发现这个问题，同时试图找出我是否可以以某种方式避免这样做，因为它似乎有点不必要。

来源

2017-05-11 09:26:51 MatijaG

谢谢！通过一些奇怪的巧合，你刚刚救了我的一天！ ;-) – jhm

但我同意，在整个树中传递数据似乎很奇怪。我天真地认为，Relay会通过片段容器将声明的GQL /片段数据“注入”道具，但显然不是 - 我似乎无法让它工作至少..你有没有找到一种方法来做到这一点？我发现FragmentContainer的官方文档在这种情况下是非常具有误导性的，因为它只提到了片段的命名，并且如果您按照将使用给定的propname暴露在组件中的“_”，或者如果声明只是''，则'else'数据。： - / – jhm

想必GetAllUsers是沿着线的东西：

graphql` 
    query UserQuery { 
    viewer { 
     users { 
     edges { 
      ...userList_users 
     } 
     } 
    } 
    } 
`

在这种情况下，要确保UserList越来越正确的道具：

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

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

具体来说，fragment userList_users on userEdges在UserList期待一个包含userEdges数组的users道具。

来源

2017-05-16 21:03:16 james

I fixed it by changing the UserList fragment 

fragment userList_user on Viewer { //removed userEdges 
     edges { 
      node { //moved node to the main query 
      id 
      } 
     } 
    ` 
<QueryRenderer 
     environment={environment} 
     query={graphql` 
     query getUsersQuery { 
     viewer { 
      ...userList_user 
     } 
     } 
    `} 
     render={({error, props}) => { 
     if(props) return <UserList users={props.viewer}/> 
     return <Text style={{marginTop:20}}>Loading...</Text> 
    } 
    }/>

来源

2017-05-18 07:02:37

继电器现代的分段数据为空

回答

相关问题