कैसे एक GraphQL क्वेरी के लिए चर पारित करने के लिए?

Question

चलें मान मैं में निम्नलिखित GraphQL प्रश्न हैं प्रतिक्रिया-अपोलो

const CurrentUserForLayout = gql` 
    query CurrentUserForLayout($avatarID: Int!) { 
    currentUser { 
     avatar_url(avatarID: $avatarID) 
    } 
    } 
`; 

const ProfileWithData = graphql(CurrentUserForLayout, { 
    options: { variables: { avatarID: 1 } }, 
})(Profile); 

अब अगर मैं अपनी प्रतिक्रिया घटक Profile avatarID बदल देना चाहते हैं,

मैं यह कैसे करना होगा?

मैं प्रतिक्रिया करने के लिए नया हूँ और GraphQl और मैं वास्तव में कनेक्शन समझ में नहीं आता यहाँ:

graphql(CurrentUserForLayout, { 
     options: { variables: { avatarID: 1 } }, 
    })(Profile); 

मैं वास्तव में ProfileWithData चारों ओर एक और माता पिता के घटक क्वेरी के लिए एक और avatarID पारित करने के लिए की जरूरत है? लेकिन क्या होगा अगर आईडी प्रोफाइल घटक से छेड़छाड़ कर रहा है, मैं कैसे जनक घटक है कि के बारे में पता करते हैं?

Answer 1

अब तक, मुझे इसके लिए दो संभावित दृष्टिकोण पता हैं।

पहले प्रश्न में पहले से ही एक कहा गया है। चर एक ही समय में ProfileWithData का सहारा है। तो आपको प्रोप को बदलने और घटक को फिर से प्रस्तुत करने का एक तरीका ढूंढना होगा। यह आमतौर पर एक मूल घटक के साथ हासिल किया जाता है। तो आम तौर पर आप ProfileWithData के अंदर चर नहीं बदलते। इस घटक का उपयोग केवल प्रदर्शन उद्देश्यों के लिए किया जाना चाहिए। हालांकि, यह नहीं कहता कि यह नहीं किया जा सकता है। माता-पिता की स्थिति में हेरफेर करने के लिए आप अपने मूल घटक के तरीकों को बच्चे को पास कर सकते हैं। यह दोनों घटकों को दोबारा प्रस्तुत करेगा और नए प्रोप/चर के साथ ProfileWithData प्रस्तुत करेगा।

दूसरा दृष्टिकोण ProfileWithData घटक के अंदर से पूछताछ करना है। फिर आप राज्य के साथ घटक के अंदर से चर का उपयोग कर सकते हैं। यह करने के लिए एक विधि here

पाया जा सकता है आप, withApollo उच्च क्रम-घटक का उपयोग अपोलो ग्राहक के लिए एक संदर्भ पारित करके यह कर सकते हैं के रूप में यहाँ प्रलेखित: फिर http://dev.apollodata.com/react/higher-order-components.html#withApollo

, आप कर सकते हैं उत्तीर्ण वस्तु पर client.query पर कॉल करें, जैसे:

class MyComponent extends React.Component { 
     runQuery() { 
     this.props.client.query({ 
      query: gql`...`, 
      variables: { ... }, 
     }); 
     } 

     render() { ... } 
    } 

    withApollo(MyComponent); 

Answer 2

आपका ProfileWithData घटक एक निश्चित उपयोगकर्ता के अवतार प्रतिपादन का एक अच्छा काम करता है। वर्तमान में प्रदर्शित अवतार घटक के परिवर्तनों को प्रबंधित करने के लिए यह इस घटक की जिम्मेदारी नहीं है।

एक तरह से एक नया प्रोप avatarId माता पिता घटक से नीचे पारित हो जाता है कि जोड़ना है। तो फिर तुम इस बारे में की आवश्यकता होगी:

graphql(CurrentUserForLayout, { 
    options: (ownProps) => ({ 
    variables: { 
     id: ownProps.avatarId 
    } 
    }) 
})(Profile); 

आप react-router से परिचित हैं, एक और रास्ता है पैरामीटर का उपयोग करने अवतार आईडी निर्धारित करने के लिए किया जाएगा। आप इस तरह graphql की कॉल को समायोजित करने की आवश्यकता होगी:

graphql(CurrentUserForLayout, { 
    options: (ownProps) => ({ 
    variables: { 
     id: ownProps.params.avatarId 
    } 
    }) 
})(Profile); 

इस तरह क्वेरी चर के उपयोग के बारे में अधिक जानकारी के लिए आप जाँच कर सकते हैं React Track of Learn Apollo।