如何让 Relay Modern 片段合成发挥作用？

Question

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

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 片段合成发挥作用？

How can I get Relay Modern fragment composition to work?

relay

reactjs