Relay QueryRenderer Does Not Return Expected Props From Query
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. E.g
<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
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
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?