Реле Модерн, опора не поставляется

Question

Я получаю данные, возвращенные с моего сервера правильно, но я получаю сообщение об ошибке не указано.

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

Answer 1

Я смог это исправить, изменив вложенность корневого запроса в запросе { }, вот так

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

Мне нужно было обновить свой сервер GraphQl, чтобы вложить узел запроса на один уровень глубины (я думал, что это не требуется в Relay Modern. Но, похоже, это так. Может быть, это ограничение библиотеки маршрутизации Found. Я не уверен.

Answer 2

Я думаю, что вы смешиваете два разных аспекта 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

Надеюсь, это поможет прояснить ситуацию.