FragmentContainer vs just another React component as a wrapper?

Question

I am writing code to plug in an existing React component into another component.

The way it's been originally done in code is using a fragmentContainer. I understand a fragmentContainer is a Higher Order Component that acts as a wrapper, and returns another React component. However, I am trying to understand whether I really need to use a fragmentContainer to plug in my existing component, or I can create another wrapper component instead.

Is there a sure way of telling where a fragmentContainer should be used vs React Component within a React Component?

I have looked at the official docs(https://relay.dev/docs/en/fragment-container), and other resources, but it seems like either way can be used? Are there special cases where fragment containers should be used?

score 0 · Answer 1 · answered Oct 23 '19 at 11:42

You use a fragmentContainer to ensure what data you need in a component.

For exemple:

parent.js

const ParentComponent = ({list}) => (
   <QueryRenderer
      query={graphql`
         query List {
            id
            ...childComponent_item
         }
      `}
      render={
         list.map(item => (
            <ChildComponent item={item} key={item.id} />
         ))
      }
   />
);
export default ParentComponent;
// Here, in  the parent component
// I need the id of each item of the list but I don't need the others values.

childComponent.js

const ChildComponent = item => (
   <>
      <div>{item.name}</div>
      <div>{item.avatar}</div>
      <div>{item.othervalue}</div>
   </>
)
const ChildComponentWithFragment = createFragmdentContainer(
   ChildComponent, 
   {
      list: graphql`
         fragment childComponent_item on ItemType {
            name
            avatar
            othervalue
         }
      `
   };
export default ChildComponentWithFragment;
// Here in the child component
// I need the others data of the Item object so i have to get these values
// in my fragment

FragmentContainer vs just another React component as a wrapper?

1 Answers1