Relay.js правильно не разрешает скомпонованный фрагмент

Question

Я работаю над преобразованием приложения Flux в Relay.js, и у меня возникают некоторые проблемы. Кажется, я не могу заставить состав фрагментов компонентов работать правильно. Правильные данные возвращаются с сервера, но собранные данные по какой-либо причине никогда не возвращаются в реквизиты родительского компонента.

вот мой код до сих пор:

LibraryLongDescription.js

import React, {Component, PropTypes} from 'react'; 
import Relay from 'react-relay'; 
import DocumentTitle from 'react-document-title'; 
import Address from '../components/Address'; 
import Orders from '../pages/Orders'; 

export default class LibraryLongDescription extends Component { 
    constructor(props) 
    { 
     super(props); 

     this.state = { 
      library: {} 
     }; 

     console.log(props); 
     if(props.library){ 
      this.state.library = props.library; 
     } 
    } 

    render() 
    { 
     return (
      <DocumentTitle title="Libraries"> 
       <div> 
        {this.state.library.name} 
        <div className="row"> 
         <Address type={"Address"} address={this.state.library.address} /> 
        </div> 

        <div className="top-space-60"> 
         <h3>Orders</h3> 
         <Orders /> 
        </div> 


       </div> 
      </DocumentTitle> 
     ); 
    } 
} 


export default Relay.createContainer(LibraryLongDescription, { 
    fragments: { 
     library:() => Relay.QL`fragment on Library { 
      id, 
      name, 
      address{ 
       id 
       sanNumber, 
       addressLine1, 
       addressLine2, 
       city, 
       state, 
       zip 
      }, 
      ${Orders.getFragment('orders')} 
     }`, 
    } 
}); 

Orders.js

import React, {Component, PropTypes} from 'react'; 
import Relay from 'react-relay'; 

class Orders extends Component { 
    constructor(props) 
    { 
     super(props); 
     console.log(props); 
    } 

    render() 
    { 
     return (<h1>This is where the order goes</h1>); 
    } 
} 

export default Relay.createContainer(Orders, { 
    fragments: { 
     orders:() => Relay.QL`fragment on Library { 
      orders(first: 10){ 
       edges{ 
        node{ 
         id, 
         message_number, 
         order_total 
        } 
       } 
       pageInfo{ 
        hasPreviousPage, 
        hasNextPage 
       } 
      } 
     }` 
    } 
}); 

Это не решает правильно. Когда я объединяю реквизиты журнала в LibraryLongDescription.js, я получаю все значения из этого запроса, но я ничего не получаю от фрагмента Orders. Когда я смотрю, чтобы увидеть, что пришел по сети я получаю данные в этой форме:

{ 
    "data":{ 
     "library":{ 
     "id":"valid", 
     "name":"valid", 
     "address":{ 
      correct data 
     }, 
     "_orders1mpmPX":{ 
      "edges":[ 
       { 
        "node":{ 
        correct data 
        }, 
        "cursor":"correct data" 
       }, 
      ], 
      "pageInfo":{ 
       correct data 
      } 
     } 
     } 
    } 
} 

но когда я утешаю реквизит из библиотеки Длинных описаний входа я не вижу ничего для заказов. Я также получаю это свойство: __fragment__, который, похоже, не имеет ничего полезного в этом. Любая помощь с этим была бы весьма признательна. Я много часов искал в Интернете решения. Если есть какая-либо информация, которую я не предоставил, это было бы полезно, дайте мне знать.

Answer 1

Проведя глупое время, пытаясь решить эту проблему, я обнаружил, что реле не похоже, что вы определяете поле типа в запросе фрагмента. вот что я имею в виду ... запрос библиотека изменен следующим образом:

export default Relay.createContainer(LibraryLongDescription, { 
    fragments: { 
     library:() => Relay.QL` 
      fragment on Library { 
       id, 
       name, 
       address{ 
        id 
        sanNumber, 
        addressLine1, 
        addressLine2, 
        city, 
        state, 
        zip 
       }, 
       orders(first: 500){ 
        ${Orders.getFragment('orders')} 
       } 
      } 
     `, 
    } 
}); 

и запрос заказов изменен следующим образом:

export default Relay.createContainer(Orders, { 
    fragments: { 
     orders:() => Relay.QL`fragment on OrderConnection { 
      edges{ 
       node{ 
        id 
        purchaseDate 
       } 
      } 
      pageInfo{ 
       hasPreviousPage 
       hasNextPage 
      } 
     }` 
    }, 
}); 

, если у вас нет какой-то корень поля, как группы, определяемые на родительском элементе реле не будет знать, как разрешить это поле обратно родительскому объекту, который будет передан обратно в ваш дочерний компонент. сделав это: orders(first: 500), вы объявляете это имя как зависимость для реле, чтобы передать его в этот компонент. Без этого имени реле не видит ваш компонент, требующий этого имени, и он не пройдет его. Надеюсь, это когда-нибудь поможет кому-то другому. Я потратил больше, чем целый день, пытаясь понять это.