Relay QueryRenderer does not return expected props from query

Question

I'm attempting to use a QueryRenderer with an accompanying fragment that I intend to use for pagination, in combination with Relay's createPaginationContainer higher-order component.

I am using a fragment within the query I'm passing to QueryRenderer. Eg

  <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} />);
    }}/>

This query is performed successfully - I can see in the network tab that the expected JSON is returned from the server as a result of executing this GraphQL query.

However, I am entirely unable to see the result of the query within the context of the QueryRenderer's query prop (note the logging in the snippet above). Here's the output of 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 { … }

This then prevents me from passing the result of the query down to the paginationContainer (in this instance it's MyComponent ).

Why is this happening, and how can it be fixed?

For reference, the fragment MyComponent_students is defined as:

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

You need explicitly name props in QueryRenderer when you use createPaginationContainer

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

instead of

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

see example https://github.com/relayjs/relay-examples/blob/8ef8d2615d5294bf94dfeae4e6b0db574150f7f1/todo/js/app.js#L67