Relay Moderne Fragmentdaten ist null

Question

{dies ist Relay Moderne}

In meinem 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; 

Also das ist die Wurzel des Userquery ist, wo die QueryRenderer genannt wird. Nun ist die Komponente .. 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 
    } 
    } 
    ` 
) 

Benutzerliste Fragment, das die Informationen für das Kind enthält userItem dh

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

Das Problem ist, wenn console.log (this.props.users) in userlist, es gibt Null . Und das Fragment userList = {}

Aber wenn ich es tun, ohne Fragmente zu verwenden, indem Sie einfach this.props.users aus der UserQuery-Komponente an die Kinder übergeben, funktioniert es gut.

Es wird großartig, wenn jemand createFragmentContainer mit einem besseren Beispiel erarbeiten kann. Dank ..

Answer 1

Ich bin neu zu modern Relais, aber soweit ich verstehe, müssen Sie das Objekt abgefragt, um das Kind wie in diesem Beispiel passieren:

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

Und Sie anscheinend brauchen die Dateneigenschaft zu verwenden, weil sie das richtige Fragment extrahiert

Ich stolperte über diese Frage, während ich versuchte, herauszufinden, ob ich es irgendwie vermeiden kann, dies zu tun, da es ein wenig unnötig erscheint.

Answer 2

Vermutlich GetAllUsers ist etwas entlang der Linien von:

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

In diesem Fall werden Sie sicherstellen möchten, UserList ist die richtigen Requisiten bekommen:

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

Insbesondere fragment userList_users on userEdges in UserList erwartet ein users Requisite, die ein Array von userEdges enthält.

Answer 3

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> 
    } 
    }/>