2016-08-23 11 views
2

FluxアプリケーションをRelay.jsに変換しようとしていて、いくつかの問題が発生しています。私は、構成要素の構成が適切に動作するようには見えません。正しいデータがサーバーから返されますが、何らかの理由で合成データが親コンポーネントの小道具に戻されることはありません。Relay.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。 LibraryLongDescription.jsのログプロップをコンソールすると、そのクエリからすべての値が取得されますが、Ordersフラグメントから何も取得されません。私は、ネットワークを介して来たものを見るために見てみると、私はこの形式でデータを取得する:

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

を私は図書館ロング記述から小道具を記録慰めるとき、私は注文の何も表示されません。私はまた、このプロパティを得る:__fragment__これは本当にそれに有用な何かを持っていないようだ。これに関する助けがあれば大いに感謝します。私は何時間も解決策を探していました。私が提供していない情報があれば、私に知らせてください。

+0

私はgraphiqlがグラフの端点をデバッグするための素晴らしいツールであることを発見しました。あなたはそれをここに見つけることができます:https://github.com/graphql/graphiql – alexi2

+0

@ alexi2チップをありがとう。私は実際にそのツールを使用します。それは素晴らしいです!私は自分の問題がサーバー側のgraphQLの問題ではないことを確認しました。これはRelay.jsのものです –

+0

これをうまくやったことがあります。あなたの投稿を少し編集して、問題の内容とその解決方法をさらに明確にする必要があります。偉大な仕事、それは他の人が将来従うのが良い例かもしれないと思います。特に、問題をゼロにして、参考のためにドキュメントを指している場合。 – alexi2

答えて

5

この問題を解決しようとすると愚かな時間を費やした後、私は中継器がフラグメントクエリで型フィールドを定義していないのを発見しました。

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)この名前をリレーの依存関係として宣言して、その名前をそのコンポーネントに渡します。その名前がなければ、リレーはその名前を必要とするコンポーネントを見ず、それを渡しません。私はこれがいつか誰かを助けることを願っています。私は一日以上過ごして、これを理解しようとしました。

関連する問題