Relay.js 没有正确解析组合片段

Posted 2023-03-08

【中文标题】Relay.js 没有正确解析组合片段

【英文标题】：Relay.js is not resolving composed fragment correctly

【发布时间】：2016-12-30 22:29:55

【问题描述】：

我正在将 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__，它似乎并没有什么有用的东西。对此的任何帮助将不胜感激。我已经在互联网上搜索了几个小时的解决方案。如果我没有提供任何有用的信息，请告诉我。

【问题讨论】：

我发现 graphiql 是调试我的 graphql 端点的好工具，它可能很有用。你可以在这里找到它：github.com/graphql/graphiql

@alexi2 感谢您的提示。我实际上使用该工具。这很棒！我已经验证我的问题不是服务器端的 graphQL 问题。这是 Relay.js 的东西

很好地解决了这个问题，也许你应该稍微编辑一下你的帖子，以进一步澄清问题是什么以及它是如何解决的。干得好，只是认为这可能是其他人将来效仿的好榜样。特别是如果您将问题归零并指向文档以供参考。

@alexi2 谢谢。今天我会听取你的建议并清理它。希望没有其他人像我一样挣扎。大声笑

【参考方案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) 您将该名称声明为中继的依赖项，以将其传递给该组件。如果没有该名称，中继看不到您的组件需要该名称，并且不会通过它。我希望有一天这可以帮助其他人。我花了一整天的时间试图弄清楚这一点。