Relay-Modern FragmentContainer 데이터가 채워지지 않았습니다.

Question

FragmentContainer에 데이터를로드하려고 Relay Modern을 사용하고 있습니다. 친숙한 Container (Smart)/Presenter (Dumb) 패턴을 사용하고 있으며 예상대로 데이터가 내 하위 컨테이너로 전달되지 않습니다. 그러나 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가 렌더링 될 때마다, I는 해당 오류를보고 그 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> 
     }} 
     /> 
    ) 
    } 
} 

은 그럼 당신은 아래로 (스마트) 컨테이너 구성 요소의 표상 일 (벙어리)에 소품을 통과 할 수있을 것입니다.

Answer 2

데이터가 실제로 오거나 오류가있는 경우 QueryRenderer 구성 요소 내부의 렌더링 기능을 체크 인해야합니다. 그런 다음 데이터가있는 경우 사용자를 소품을 통해 전달해야합니다. Relay를 많이 사용하지는 않았지만 도움이 되었기를 바랍니다.