Relay-Modern FragmentContainerデータが入力されていません

Question

私はFragmentContainerにデータをロードしようとするためにRelay Modernを使用しています。私はおなじみのコンテナ（スマート）/プレゼンター（ダム）パターンを使用していますが、データは期待通りに子コンテナに渡されません。しかし、Relayの@relay(mask: false)指示文を使用して、フラグメントのデータがQueryRendererによって正しくロードされているかどうかを確認すると、のフラグメントデータはになります。

データがコンテナに送信されない理由を理解できません。どんな助けでも大歓迎です。

ScreenContainer.js（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 /> 
    } 
} 

そして最後に、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 
     } 
    } 
    ` 

、NestedFragmentContainerのレンダリング時はいつでも、私はそのエラーを参照してくださいuser小道具はundefinedです。しかし、console.log()は、その値が実際にnullであり、undefinedではないことを示しています。

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

なぜFragmentContainerがそのデータでレンダリングされないのですか？

Answer 1

クエリが成功したと仮定すると、データはレンダリングされたコンポーネントに渡される必要があります。リレーの現代文書に記載されているとおり：

QueryRendererはリレーツリーのルートです。クエリを受け取り、データを取得し、データでレンダリングコールバックを呼び出します。あなたのケースでは

、queryRendererは次のようになります。

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

次に、あなたは、プレゼンテーション1（ダム）までコンテナコンポーネント（スマート）から小道具を渡すことができるようになります。

Answer 2

実際にデータが来ているかエラーがある場合は、QueryRendererコンポーネント内のレンダー機能をチェックインする必要があります。次に、データがある場合は、ユーザーを小道具に通す必要があります。私はRelayをあまり使用していませんが、これが助けてくれることを願っています。