Question

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

到目前为止，这是我的代码：

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

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

1 个答案: