I’ve tried modern relay for some time, and I’m wondering what goals createFragmentContainerare different from how to describe the fragment, which should be lower Component.
eg. this is how the documentation shows how it should be
Parent.js
<QueryRenderer
render={({error, props}) => {
if (error || props) {
return <Child someData={someData}>
}
return <div>Loading</div>
}}
query={graphql`
query SomeQuery($id: ID!) {
endpoint(id: $id) {
...Child_someData
}
}
`}
/>
Child.js
export default createFragmentContainer(
({someData}) => <header>{someData.title} - {someData.name}</header>,
graphql`
fragment Child_someData on EndPoint {
title
name
}
`
)
But instead, doing Child.jsso in this way, I can simply rewrite or split the component with the request into two different files, for example:
ChildComponent.js
export default ({someData}) => <header>{someData.title} - {someData.name}</header>
Child.js
export default graphql`
fragment Child_someData on EndPoint {
title
name
}
`
and it will still work ( Parent.js will still recognize the fragment). So this makes me wonder if it's createFragmentContainerjust for syntactic sugar to make things tidier.
- , !