中继QueryRenderer不会从查询中返回预期的道具

时间:2018-09-03 07:53:05

标签: reactjs graphql relayjs relay

我正在尝试将QueryRenderer及其我打算用于分页的附带片段与Relay的createPaginationContainer高阶组件结合使用。

我在传递给QueryRenderer的查询中使用一个片段。例如

  <QueryRenderer
    environment={environment}
    query={
      graphql`
        query MyComponentQuery($count: Int!, $cursor: String) {
          ...MyComponent_students @arguments(count: $count, cursor: $cursor)
        }
      `
    }
    variables={{count: 10}}
    render={(p) => {
      console.log('render of QueryRenderer');
      console.log(p);
      return (<MyComponent {...p.props} error={p.error} />);
    }}/>

此查询已成功执行-我可以在网络标签中看到由于执行此GraphQL查询而从服务器返回了预期的JSON。

但是,我完全无法在QueryRenderer的query道具的上下文中看到查询的结果(请注意上面的代码段中的日志记录)。这是console.log(p)的输出。

{…}​
  error: null​
  props: {…}​​
    __fragments: {…}​​​
      MyComponent_students: {…}​​​​
        count: 10​​​​
        cursor: null​​​​
        <prototype>: Object { … }​​​
      <prototype>: Object { … }
  ​​  __id: "client:root"
​​    <prototype>: Object { … }​
  retry: function retry()​
  <prototype>: Object { … }

然后,这阻止了我将查询结果传递给paginationContainer(在本例中为MyComponent)。

为什么会这样,怎么解决?

作为参考,片段MyComponent_students定义为:

fragment MyComponent_students on Query @argumentDefinitions( count: {type: "Int", defaultValue: 10} cursor: {type: "String"} ) { students( first: $count after: $cursor ) @connection(key: "MyComponent_students") { edges { node { id createdAt } } } }

1 个答案:

答案 0 :(得分:1)

使用QueryRenderer时,您需要在createPaginationContainer中明确命名道具

return (<MyComponent xxxx={p.props} error={p.error} />);

代替

return (<MyComponent {...p.props} error={p.error} />);

请参见示例https://github.com/relayjs/relay-examples/blob/8ef8d2615d5294bf94dfeae4e6b0db574150f7f1/todo/js/app.js#L67