接力createFragmentContainer的现代目的

Question

I've been trying relay-modern for some time, and I'm wondering what are the purposes of createFragmentContainer other than just for describing the fragment that should beloing to the Component .

eg this is how documentation show how it is supposed to 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.js in that way, I can just rewrite or splitting the component with query to 2 different files like this:

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 is still going to work ( Parent.js will still recognize the fragment). So this makes me wondering if createFragmentContainer just for syntactic sugar to make things tidier.

If anyone can shed a light with this one, that would be awesome! can't find so much in the documentation about this

Answer 1

Your example if a fairly static implementation... I think what you need to consider is that these are containers that provide additional functionality, fragmentContainer being one of the more abstract layers.

I would look more at how the refetchContainer and paginationContainer expand upon the idea of a fragmentContainer and also look at the Github repository itself,

https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayFragmentContainer.js

So certainly child containers could simply be a file filled with fragments that you are exporting out, but ideally you should think of them as containers which are extensions of React components. They are container fragments that bubble up into a compositional query which afford you conveniences for managing state in the context of React.

Answer 2

Relay compiler will find your Child.js file so the fragment will be created and your query will be fetched. However, the difference is createFragmentContainer is a HOC that Relay uses to guarantee that the component won't render until all necessary data is available. This is the purpose of FragmentContainer and that's why you should use it.