繼電器現代的分段數據爲空

在我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

繼電器現代的分段數據爲空

回答

相關問題