Relay QueryRenderer 不會從查詢中返回預期的道具

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