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__
これは本当にそれに有用な何かを持っていないようだ。これに関する助けがあれば大いに感謝します。私は何時間も解決策を探していました。私が提供していない情報があれば、私に知らせてください。
私はgraphiqlがグラフの端点をデバッグするための素晴らしいツールであることを発見しました。あなたはそれをここに見つけることができます:https://github.com/graphql/graphiql – alexi2
@ alexi2チップをありがとう。私は実際にそのツールを使用します。それは素晴らしいです!私は自分の問題がサーバー側のgraphQLの問題ではないことを確認しました。これはRelay.jsのものです –
これをうまくやったことがあります。あなたの投稿を少し編集して、問題の内容とその解決方法をさらに明確にする必要があります。偉大な仕事、それは他の人が将来従うのが良い例かもしれないと思います。特に、問題をゼロにして、参考のためにドキュメントを指している場合。 – alexi2