Question

我正在努力了解如何让片段组合正常工作。我有一个根<QueryRenderer />，其中包含我需要的片段。我可以看到片段被合并，查询返回我需要的所有数据。数据传递到我的页面中的主渲染节点，但是当它传递给子节点时，Relay会抱怨：

Warning: RelayModernSelector: Expected object to contain data for fragment `BoardControlsComponent_processMeta`, got `{"item": 1, "name": "Test"}`. Make sure that the parent operation/fragment included fragment `...BoardControlsComponent_processMeta`.

代码：

export let BoardContainer = createFragmentContainer(BoardComponent, {
        processMeta: NavbarFragment.processMeta,
});
export const Board = ({match}) => {
        return (<QueryRenderer
                environment={environment}
                variables={{
                    processId: match.params.processId,
                    boardType: match.params.boardType,
                    boardClass: match.params.boardClass
                }}
                query={BoardDataQuery}
                render={({error, props}) => {
                    if (error) {
                        return <div>{error.message}</div>;
                    } else if (props) {
                        //console.log(props);
                        return (<BoardContainer {...props} match={match}/>);
                    }
                    return <ProgressBar active now={100} />;
                }}
            />


        );
};

在BoardComponent的render（）中：

<BoardControlsContainer processMeta={this.props.processMeta} />

BoardDataQuery ：

export const BoardDataQuery = graphql`
                    query BoardDataQuery($processId: Int!, $boardClass: String!, $boardType: String!) {
                        processMeta(processId: $processId, boardClass: $boardClass, boardType: $boardType) {
                            ...NavbarComponent_processMeta
                            ...BoardControlsComponent_processMeta
                        }
                    }
                `;

BoardControlsContainer ：

export const BoardControlsContainer = createFragmentContainer(BoardControlsComponent, {
    processMeta: BoardControlsFragment.processMeta
});

因此，BoardDataQuery包含2个组件的ProcessMeta字段，并在浏览器中检查网络调试控制台确认所有数据都按要求返回。将此数据作为prop传递将导致Relay抱怨，因为它期望片段而不是填充对象。不仅如此，传递的实际对象还没有指定的额外字段。

我在这里做错了什么？

Answer 1

事实证明，这是我对Relay如何组成片段的误解。

首先，如果目标组件没有按照命名标准定义片段，则Relay只会传递内部对象。

其次，即使片段被组合到根查询中以便使用数据，每个组件也必须指定自己的数据要求。基本上我需要在 BoardDataQuery 中添加额外的字段，以便它们可供BoardContainer组件使用。

如何让Relay Modern片段组合工作？

1 个答案: