0

I have a parent component that requests data from the root like so:

export default createFragmentContainer(App, {
  viewer: graphql`
    fragment App_viewer on User {
      id
      email
      name
    }
  `
})

Because I'm using React Router, the child routes are available through this component's this.props.children. I'd like to pass the email and name of the viewer to this child by setting data requirements through fragments.

I was doing something like this:

const childrenWithProps = React.Children.map(
  this.props.children, (child) => React.cloneElement(child, {viewer})
);

But that's really over-generalized for cases where all viewer data is not necessary. Is there a simple way to have the child declare its data needs? Thanks!

jordancooperman
  • 1,555
  • 2
  • 17
  • 30
  • What prevents you from making each child a fragment container also ? – yachaka Nov 14 '17 at 12:39
  • Hi @whitep4nther, I am trying to make each child a fragment container also, that would be ideal. However, I want to share the same data between parent and child, can't seem to find a way to do it. – jordancooperman Nov 14 '17 at 14:44
  • Do you know about Fragment spread ? – yachaka Nov 14 '17 at 18:12
  • I do, that was a good suggestion. I didn't understand that what I should be doing is pulling the children data requirements out of the parent. There were 2 layers deep repeated data requirements and I need to flatten it into a single layer. I'll write an answer soon. Thanks @whitep4nther – jordancooperman Nov 17 '17 at 02:30
  • Scratch that, that doesn't solve the problem. Because the child routes are nested, they don't get direct access to the apps primary query. Still stuck... – jordancooperman Nov 17 '17 at 04:25
  • Can you upload your code online ? Like on github or something. I'm still having a hard time figuring the big picture lol – yachaka Nov 17 '17 at 11:19

0 Answers0