Javascript 现代继电器，未提供道具

我正确地从服务器返回了数据，但我得到了一个未提供的道具错误

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

从'found/lib/makeRouteConfig'导入makeRouteConfig；
从“found/lib/Route”导入路由；
从“React”导入React；
从'react relay'导入{graphql}；
从“../components/ContactsPage”导入ContactsPage；
导出默认makeRouteConfig(
({
…参数，
计数：5，
命令：“标题”，
postType:['mp_contact']，
})}
查询={graphql`
查询联系人(
$count:Int！
$order:String！
$cursor:String
$categoryName:String
$postType:[字符串]
) {
…联系SPAGE_查询
}
`}
/>
);

我可以看到数据是从服务器获取的

我还有其他类似模式的组件：/ 这是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
          }
      }
    `
  }
)

import React，{Component}来自“React”
从“./ContactsList”导入联系人列表
从“react relay”导入{createFragmentContainer，graphql}
类ContactsPage扩展组件{
render（）{
const{query}=this.props
返回(
)
}
}
导出默认createFragmentContainer(
联系斯帕奇，
{
查询：graphql`
片段ContactsPage\u查询上的查询{
wp_查询{
身份证件
…联系人列表\u wp\u查询
}
}
`
}
)

我可以通过将根查询嵌套在查询{}下来解决这个问题，就像这样

query={graphql`
        query contacts_WPQuery_Query(
          $count: Int!
          $order: String!
          $cursor: String
          $categoryName: String
          $postType: [String]
        ) {
            query {
               ...ContactsPage_query
            }
        }
      `}

---

我需要更新我的graphql服务器，以将查询节点嵌套一层（我认为这在Relay Modern中不是必需的。但似乎是。这可能是找到的路由库的一个限制。我不确定。

我认为您将Relay Modern的两个不同方面混为一谈

我已经用我们用作根类型名称的名称更新了您的代码，这样您可以更清楚地看到差异。当然，您可以随意调用它

在

Route

类中定义的

query

是一个“QueryRenderer”——

如果有多条路由，则可能有多条路由，建议不要嵌套这些路由

但是，容器中的片段是定义对graphql的数据依赖关系的地方-

请注意，如果要创建“refetch”容器，则可以将查询添加到容器声明中。例如，如果在graphQL解析中根据传入的某个参数筛选了一个列表，则-

希望这有助于澄清任何困惑

graphql`
  query contactsQuery (
    $count: Int!
    $order: String!
    $cursor: String
    $categoryName: String
    $postType: [String]
  ) {
    viewer {
      ...ContactsPage_viewer
    }
  }
`}

export default createFragmentContainer(
  ContactsPage,
  {
    viewer: graphql`
      fragment ContactsPage_viewer on Viewer {
          wp_query {
            id
            ...ContactsList_wp_viewer
          }
      }
    `
  }
)