Relay.js无法正确解析组合片段

Question

我正在努力将Flux应用程序转换为Relay.js,我遇到了一些问题.我似乎无法让组件片段组合正常工作.正确的数据从服务器返回,但由于某种原因,组合数据永远不会传递回父组件的props.

到目前为止这是我的代码:

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

在花了一大笔时间试图解决这个问题后,我发现relay不喜欢你在片段查询中定义一个类型字段.这就是我的意思......库查询更改为:

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)您声明该名称作为继电器的依赖项将其传递到该组件.没有该名称,继电器不会看到您的组件需要该名称,并且它不会通过它.我希望有一天能帮助其他人.我花了一整天的时间试图弄明白这个.