javascript - 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 中控制日志 Prop 时，我从该查询中获取了所有值，但我没有从 Orders 片段中获取任何内容。当我查看通过网络传输的内容时，我会以这种形式获取数据:

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

但是当我从库中控制日志 Prop 时 详细描述我没有看到任何订单。我还得到了这个属性:__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) 您声明该名称作为中继的依赖项以将其传递到该组件。如果没有该名称，中继将看不到您的组件需要该名称，并且不会通过它。我希望有一天这能帮助别人。我花了一整天多的时间试图弄清楚这个问题。