Relay.js löst zusammengesetztes Fragment nicht richtig auf

Question

Ich arbeite an der Konvertierung einer Flux App zu Relay.js und ich stoße auf einige Probleme. Ich kann nicht scheinen, dass die Komponentenfragmentzusammensetzung richtig funktioniert. Die richtigen Daten kommen vom Server zurück, aber die zusammengesetzten Daten werden aus irgendeinem Grund niemals in die Props der übergeordneten Komponente zurückgegeben.

hier ist mein Code so weit:

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

Dies nicht richtig lösen. Wenn ich Konsolenrequisiten in LibraryLongDescription.js trenne, bekomme ich alle Werte aus dieser Abfrage, aber ich bekomme nichts aus dem Orders-Fragment. Wenn ich sehe, schauen auf das, was über das Netzwerk kam bekomme ich Daten in dieser Form:

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

aber wenn ich Requisiten aus der Bibliothek Lange Beschreibung Konsolenprotokoll sehe ich nicht alles für Bestellungen. Ich bekomme auch diese Eigenschaft: __fragment__ die scheint nicht wirklich etwas nützliches zu haben. Jede Hilfe mit diesem würde sehr geschätzt werden. Ich habe stundenlang im Internet nach Lösungen gesucht. Wenn es irgendwelche Informationen gibt, die ich nicht zur Verfügung gestellt habe, die nützlich sein würden, lassen Sie es mich wissen.

Answer 1

Nachdem ich eine dumme Zeit damit verbracht habe, dieses Problem zu lösen, habe ich entdeckt, dass Relais es nicht mag, ein Typfeld in einer Fragmentabfrage zu definieren. hier ist, was ich meine ... änderte sich die Bibliothek Abfrage dazu:

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')} 
       } 
      } 
     `, 
    } 
}); 

und die Abfrage Aufträge geändert dazu:

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

wenn Sie wie Aufträge nicht irgendeine Art von Wurzelfeld definiert haben Auf dem übergeordneten Element kann Relay nicht wissen, wie dieses Feld wieder in das übergeordnete Element aufgelöst wird, damit es an die untergeordnete Komponente zurückgegeben wird. indem Sie das tun: orders(first: 500) Sie erklären diesen Namen als eine Abhängigkeit für Relais, um es in diese Komponente zu übergeben. Ohne diesen Namen erkennt relay nicht, dass Ihre Komponente diesen Namen erfordert und wird nicht übergeben. Ich hoffe, dass dies einem anderen irgendwann hilft. Ich habe mehr als einen ganzen Tag damit verbracht, diesen herauszufinden.