रिले कंटेनर

Question

के बीच चर पारित करने के लिए कैसे मैं एक मूल कंटेनर से एक बच्चे कंटेनर में एक चर पारित करने के लिए अच्छा वाक्यविन्यास की तलाश में हूं।

मान लें कि मेरे पास / पर वैश्विक विजेट सूची और /widgets/:WidgetListID पर विशिष्ट विजेट सूचियों के साथ थेस रूट हैं।

नोट: मैं प्रतिक्रिया रूटर-रिले का उपयोग

<Route 
    path='/' component={Layout} 
    > 
    <IndexRoute 
     component={WidgetListContainer} 
     queries={ViewerQueries} 
    /> 
    <Route 
     path='/widgets/:WidgetListID' 
     component={WidgetListContainer} 
     queries={ViewerQueries} 
    /> 
    </Route> 

यह वही <WidgetList/> घटक, <Layout/> अंदर <WidgetListContainer/> के भीतर प्रस्तुत किये और यहाँ कैसे मैं WidgetListID चर पारित करने के लिए कोशिश है है:

Layout.js

class Layout extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     {children} 
     ... 
     </div> 
    ); 
    } 
} 

WidgetListContainer.js

class WidgetListContainer extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     <WidgetList 
      viewer={viewer} 
     /> 
     </div> 
    ) 
    } 
} 

export default Relay.createContainer(WidgetListContainer, { 
    initialVariables: { 
    WidgetListID: null 
    }, 
    fragments: { 
    viewer: ($WidgetListID) => Relay.QL` 
     fragment on User { 
     ${WidgetList.getFragment('viewer', $WidgetListID)} 
     } 
    `, 
    }, 
}) 

WidgetList.js

class WidgetList extends React.Component { 
    render() { 
    return (
     <div> 
     <ul> 
      {viewer.widgets.edges.map(edge => 
      <li key={edge.node.id}>{edge.node.widget.name}</li> 
     )} 
     </ul> 
     </div> 
    ) 
    } 
} 
export default Relay.createContainer(WidgetList, { 
    initialVariables: { 
    WidgetListID: null 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on User { 
     widgets(first: 10, WidgetListID:$WidgetListID) { 
      edges { 
      node { 
       id, 
       name 
      } 
      } 
     } 
     } 
    `, 
    }, 
}) 

मैं WidgetList रिले कंटेनर के अंदर सीधे WidgetListID चर स्थापित करने में कोई समस्या नहीं है, यह जैसे ही बिल्कुल ठीक है, लेकिन काम करता है मैं इसे विजेट लिस्टकॉन्टेनर रिले कंटेनर से पास करने का प्रयास करता हूं मेरे पास एक खाली डेटा ऑब्जेक्ट {__dataID__: "VXNlcjo="} है। हालांकि, वैरिएबल मेरे getWidget() फ़ंक्शन में अच्छी तरह से मुद्रित है। तो कुछ बिंदु पर कुछ काम नहीं करता है लेकिन मुझे पता नहीं लगा सकता क्या?

क्या बच्चा कंटेनर के लिए पैरेंट कंटेनर से WidgetListID चर पारित करने के लिए अच्छा वाक्य रचना हो सकता है?

fragments: { 
    viewer: ($WidgetListID) => Relay.QL` 
     fragment on User { 
     ${WidgetList.getFragment('viewer', $WidgetListID)} 
     } 
    `, 
    }, 

को

fragments: { 
    viewer: ({WidgetListID}) => Relay.QL` 
     fragment on User { 
     ${WidgetList.getFragment('viewer', {WidgetListID})} 
     } 
    `, 
    }, 

टुकड़ा बिल्डर के लिए पहला तर्क रिले variables है:

Answer 1

WidgetListContainer में, यह बदल जाते हैं। तो सबसे पहले आप WidgetListContainer के चर के बाहर WidgetListID चर खींचने के लिए की जरूरत है, और फिर आप इसे WidgetList.getFragment() में पारित कर सकते हैं।

ध्यान दें कि $ प्रतीक केवल Relay.QL टेम्पलेट स्ट्रिंग के अंदर उपयोग किया जाता है। वेरिएबल्स ऑब्जेक्ट के अंदर, आप $ के बिना, वेरिएबल को नाम से संदर्भित करते हैं।

Answer 2

हाय मैं भी एक बिट के लिए इस के साथ संघर्ष किया। इस बदलें:

class WidgetListContainer extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     <WidgetList 
      viewer={viewer} 
     /> 
     </div> 
    ) 
    } 
} 

यह करने के लिए: अपने WidgetList घटक के रिले कंटेनर में

class WidgetListContainer extends React.Component { 
    render() { 
    return (
     <div> 
     ... 
     <WidgetList 
      WidgetListID={this.props.relay.variables.WidgetListID} 
      viewer={viewer} 
     /> 
     </div> 
    ) 
    } 
} 

भी भूल नहीं है initialVariables के लिए प्रारंभिक चर सेट करने के लिए: { WidgetListID: अशक्त }, इस सेटअप आपके WidgetListID चर आपके विजेटलिस्ट घटक के रिले कंटेनर के लिए उपलब्ध कराएगा।