未填充Relay-Modern FragmentContainer数据

时间:2017-11-30 23:27:49

标签: javascript reactjs graphql relaymodern react-relay

我使用Relay Modern尝试将数据加载到FragmentContainer。我使用熟悉的Container(Smart)/ Presenter(Dumb)模式,数据没有按预期传递到我的子容器中。但是,如果我使用Relay的@relay(mask: false)指令来查看片段的数据是否由QueryRenderer正确加载,片段数据是。< / p>

我不明白为什么没有将数据发送到我的Container。非常感谢任何帮助。

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没有用它的数据进行渲染?

2 个答案:

答案 0 :(得分: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 :(得分:0)

如果数据实际到达或出现错误,您应该检查QueryRenderer组件内的render函数。然后,如果数据存在,则必须通过道具传递用户。我没有太多使用Relay,但我希望这可以帮助