继电器现代的分段数据为空
问题描述:
{这是继电器现代}继电器现代的分段数据为空
在我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,那将会很棒。谢谢..
答
我是新来传达现代也是如此,但据我了解您需要查询的对象传递给孩子就像这个例子:
https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32
而且很显然,你需要使用数据属性,因为它提取正确的片段
我偶然发现这个问题,同时试图找出我是否可以以某种方式避免这样做,因为它似乎有点不必要。
答
想必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
道具。
答
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>
}
}/>
我有完全相同的问题并卡住。找到解决方案? –