继电器现代，未提供道具

Question

我正在正确地获取从我的服务器返回的数据，但是我得到了一个prop not prop错误。

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

​

​

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

Answer 1

我可以通过将根查询嵌套在query {}下来修复这个问题，如下所示

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

我需要更新我的graphql服务器，以便将查询节点嵌套到更深一层(我认为这在Relay Modern中不是必需的。也许这是由找到的路由库造成的约束。我没有把握。

Answer 2

我认为你把接力现代的两个不同方面混为一谈了。

我已经使用根类型的名称更新了您的代码，以便您可以更清楚地看到不同之处。当然，你可以随心所欲地叫它。

您在Route类中定义的query是一个"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

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