[英]Relay Modern, prop not supplied
我从服务器正确返回了数据,但是却出现了prop not not found错误。
~ expected prop `query` to be supplied to `Relay(ContactsPage)`, but got `undefined`.
随着以下。
import makeRouteConfig from 'found/lib/makeRouteConfig';
import Route from 'found/lib/Route';
import React from 'react';
import { graphql } from 'react-relay';
import ContactsPage from '../components/ContactsPage';
export default makeRouteConfig(
<Route
path="/contacts"
Component={ContactsPage}
prepareVariables={ (params) => ({
...params,
count: 5,
order: "title",
postType: ['mp_contact'],
})}
query={graphql`
query contacts_WPQuery_Query(
$count: Int!
$order: String!
$cursor: String
$categoryName: String
$postType: [String]
) {
...ContactsPage_query
}
`}
/>
);
我可以看到数据是从服务器获取的。
我还有其他组件,它们遵循类似的模式:/这是ContactsPage组件
import React, { Component } from 'react'
import ContactsList from './ContactsList'
import { createFragmentContainer, graphql } from 'react-relay'
class ContactsPage extends Component {
render() {
const {query} = this.props
return (
<div>
<ContactsList wp_query={query.wp_query} />
</div>
)
}
}
export default createFragmentContainer(
ContactsPage,
{
query: graphql`
fragment ContactsPage_query on Query {
wp_query {
id
...ContactsList_wp_query
}
}
`
}
)
我可以通过更改查询{}下的根查询嵌套来解决此问题
query={graphql`
query contacts_WPQuery_Query(
$count: Int!
$order: String!
$cursor: String
$categoryName: String
$postType: [String]
) {
query {
...ContactsPage_query
}
}
`}
我需要更新我的graphql服务器,以将查询节点嵌套到更深的一层(我认为这在Relay Modern中不是必需的。但似乎是这样。也许这是Found路由库的约束。我不确定。
我认为您正在混淆Relay Modern的两个不同方面。
我已经使用我们用作根类型名称的名称更新了您的代码,以便您可以更清楚地看到它们之间的区别。 自然,您可以随心所欲地调用它。
该query
您在定义Route
类是“QueryRenderer” - https://facebook.github.io/relay/docs/query-renderer.html
graphql`
query contactsQuery (
$count: Int!
$order: String!
$cursor: String
$categoryName: String
$postType: [String]
) {
viewer {
...ContactsPage_viewer
}
}
`}
如果您有多个路线,则可能会有多个以上路线,因此不建议您嵌套这些路线。
然而,在您的容器中的片段中,可以定义你的数据依赖于graphql - https://facebook.github.io/relay/docs/fragment-container.html
export default createFragmentContainer(
ContactsPage,
{
viewer: graphql`
fragment ContactsPage_viewer on Viewer {
wp_query {
id
...ContactsList_wp_viewer
}
}
`
}
)
请注意,如果要创建“ refetch”容器,则可以将查询添加到容器声明中。 例如,如果你根据你传递一些参数是在您的graphQL决心过滤列表- https://facebook.github.io/relay/docs/refetch-container.html
希望这有助于消除任何混乱。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.