Relay-Modern FragmentContainer-Daten nicht belegt

Question

Ich verwende Relay Modern, um zu versuchen, Daten in eine FragmentContainer zu laden. Ich verwende das vertraute Container (Smart)/Presenter (Dumb) -Muster und die Daten werden nicht wie erwartet in meinen untergeordneten Container übergeben. Wenn ich jedoch die Anweisung von Relay verwende, um festzustellen, ob die Daten des Fragments korrekt geladen sind, durch QueryRenderer, , sind die Fragmentdaten dort.

Ich verstehe nicht, warum die Daten nicht an meinen Container gesendet werden. Jede Hilfe wird sehr geschätzt.

ScreenContainer.js (rendert QueryRenderer):

/* ScreenContainer.js */ 

import ScreenPresenter from './ScreenPreseenter'; 
const query = graphql` 
query ScreenContainerQuery($id: ID!) { 
    viewer { 
    User(id: $id) { 
     id 
     ...NestedFragmentContainer_user 
    } 
    } 
}` 
export default class ScreenContainer extends Component { 
    render() { 
    <QueryRenderer 
     query={query} 
     variables={{id: id}} 
     render={() => <ScreenPresenter />} 
    /> 
    } 
} 

ScreenPresenter.js:

/* ScreenPresenter.js */ 

import NestedFragmentContainer from './NestedFragment'; 

export default class ScreenPresenter extends Component { 
    render() { 
    return <NestedFragmentContainer /> 
    } 
} 

Und schließlich NestedFragmentContainer.js:

/* ./NestedFragmentContainer.js */ 

class NestedFragmentContainer extends Component { 
    render() { 
    const { user } = this.props; 
    console.log(user); // <-- Always null, not undefined 
    return <Text>{user.account.name}</Text>; 
    } 
} 
export default createFragmentContainer(
    NestedFragmentContainer, 
    graphql` 
    fragment NestedFragmentContainer_user on User { 
     account { 
     name 
     } 
    } 
    ` 

Außerdem, wenn NestedFragmentContainer macht, ich einen Fehler zu sehen, dass seine user Prop ist undefined. Jedoch zeigt console.log(), dass sein Wert tatsächlich null ist und nicht undefined.

Warning: createFragmentContainerSpecResolver: Expected prop `user` 
to be supplied to Relay(NestedFragmentContainer)`, but got 
`undefined`. Pass an explicit `null` if this is intentional. 

Hat jemand eine Idee, warum der FragmentContainer nicht mit seinen Daten gerendert wird?

Answer 1

Angenommen, die Abfrage war erfolgreich, die Daten müssen an die gerenderte Komponente übergeben werden. Wie in der Relay-Dokumentation angegeben:

QueryRenderer ist die Wurzel eines Relay-Baums. Er nimmt eine Abfrage, ruft die Daten ab und ruft den Render-Callback mit den Daten auf.

In Ihrem Fall sollte die queryRenderer wie folgt aussehen:

render() { 
    return (
     <QueryRenderer 
     environment={environment} 
     query={query} 
     variables={{id: id}} 
     render={({error, props}) => { 
      if (error) { 
      return <div>{error.message}</div> 
      } else if (props) { 
      /* Here is the crucial part */ 
      return < ScreenPresenter data={props.viewer} />    
      } 
      return <div>Loading</div> 
     }} 
     /> 
    ) 
    } 
} 

Dann werden Sie in der Lage sein, die Requisiten nach unten aus dem Behälter Komponente (smart) an die Präsentations ein (stumm) zu übergeben.

Answer 2

Sie sollten die Render-Funktion in der QueryRenderer-Komponente einchecken, wenn die Daten tatsächlich kommen oder ein Fehler auftritt. Wenn die Daten da sind, müssen Sie den Benutzer durch die Requisiten führen. Ich habe Relay nicht viel benutzt, aber ich hoffe, das kann helfen