[英]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.我正在尝试将 QueryRenderer 与我打算用于分页的随附片段与 Relay 的createPaginationContainer
高阶组件结合使用。
I am using a fragment within the query I'm passing to QueryRenderer.我在传递给 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.此查询已成功执行 - 我可以在网络选项卡中看到,作为执行此 GraphQL 查询的结果,预期的 JSON 从服务器返回。
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).但是,我完全无法在 QueryRenderer 的query
道具的上下文中看到查询的结果(请注意上面代码片段中的日志记录)。 Here's the output of console.log(p)
.这是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
).这会阻止我将查询结果传递给 paginationContainer (在本例中它是MyComponent
)。
Why is this happening, and how can it be fixed?为什么会发生这种情况,如何解决?
For reference, the fragment MyComponent_students
is defined as:作为参考,片段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 } } } }
You need explicitly name props in QueryRenderer
when you use createPaginationContainer
当您使用createPaginationContainer
时,您需要在QueryRenderer
明确命名道具
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参见示例https://github.com/relayjs/relay-examples/blob/8ef8d2615d5294bf94dfeae4e6b0db574150f7f1/todo/js/app.js#L67
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.