[英]Relay Modern fragment data is null
{這是Relay Modern}
在我的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
}
`
)
問題是當userList中的console.log(this.props.users)時,它返回Null。 片段userList = {}
但是當我通過將User.Component中的this.props.users傳遞給子節點而不使用Fragments時,它可以正常工作。
如果有人能用更好的例子來詳細說明createFragmentContainer,那將是很棒的。 謝謝..
我也是新手來傳遞現代,但據我所知,你需要將查詢過的對象傳遞給孩子,就像在這個例子中一樣:
https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32
顯然你需要使用data屬性,因為它提取了正確的片段
我偶然發現了這個問題,同時試圖弄清楚我是否可以以某種方式避免這樣做,因為它似乎有點不必要。
據推測, 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>
}}
/>
)
}
}
具體來說, UserList
fragment userList_users on userEdges
期望包含userEdges
數組的users
prop。
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>
}
}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.