Relay QueryRenderer 没有 return 预期的查询道具

Question

我正在尝试将 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 } } } }

Answer 1

当您使用 createPaginationContainer

时，您需要在 QueryRenderer 中明确命名道具

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

Relay QueryRenderer 没有 return 预期的查询道具

Relay QueryRenderer does not return expected props from query

relay

reactjs

graphql

relayjs