Relay: Relay Modern fragments only work, when the prop name is the same as the field name

[chrish-21]

The fragment naming convention in Relay Modern states that a fragment should be named:
<FileName>_<propName>, and when there is no <propName>, then the data prop will be used as default.

Currently the only way for me to get data into a prop, is by naming the prop the same as the GraphQL field.

This works:
fragment FileName_user on User

The way I understand it these should work to, but don't:
fragment FileName on User <- this should populate the prop data, containing the user.
fragment FileName_test on User <- this should populate the prop test, containing the user

In all 3 cases, a correct GraphQL Query is send to the server and the correct data is send back in the response. Also in all 3 cases the component receives the correct prop (user, data or test). However in the last two cases, these props will not contain the data and be null instead.

[robrichard]

@chrish-21 you do need to make sure that the parent of these fragment containers passes the objects correctly as the right prop. For example:

<QueryRenderer
    query={graphql`
        query MyQuery {
            user {
                ...MyComponent_user
                ...FileName_test
                ...MyOtherComponent
            }
        }
    `}
    render={({props}) => {
        if (!props) {
            return <div>loading</div>;
        }
        return (
            <div>
                <MyComponent user={props.user} />
                <FileName test={props.user} />
                <MyOtherComponent data={props.user} />
            </div>
        );
    }}
/>

[chrish-21]

Oh I see, I understand it now. Thanks for that!