How can I get Relay Modern fragment composition to work? - reactjs

Question

I am struggling to understand how to get fragment composition to work correctly. I have a root <QueryRenderer /> which contains the fragments I need. I can see that the fragments are merged and the query returns all the data I need. The data is passed to the main render node in my page but when this is passed to a child node Relay complains:
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`.
Code:
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} />;
}}
/>
);
};
In the render() of BoardComponent:
<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
});
So BoardDataQuery includes the ProcessMeta fields for 2 components and checking the network debug console in the browsers confirms all the data is coming back as requested. Passing this data on as a prop causes Relay to complain as it is expecting a fragment and not a populated object. Not only that but that actual object that gets passed doesn't have the extra fields that were specified.
What am I doing wrong here?

Answer 1

This turned out to be my misunderstanding of how Relay composes the fragments.
Firstly, Relay will only pass an internal object if the target component hasn't defined a fragment as per the naming standard.
Secondly, even though the fragments were getting composed into the root query in order to use the data, each component must specify its own data requirements. Essentially I need to add extra fields into my BoardDataQuery so that they were available to the BoardContainer component.