रिले

Question

का उपयोग कर खोज कार्यक्षमता रिले के साथ खोज कार्यक्षमता को कैसे कार्यान्वित करें?

तो, कार्यप्रवाह

• उपयोगकर्ता search form पर नेविगेट है।

दृश्य प्रारंभ करते समय कोई प्रश्न (रिले कंटेनर में) नहीं होना चाहिए।

• उपयोगकर्ता फ़ील्ड मान भरता है, और कार्रवाई/खोज बटन दबाता है।

एक रिले क्वेरी सर्वर

• परिणाम सर्वर से प्राप्त कर रहे हैं करने के लिए भेजा जाता है।

पृष्ठ इसे प्रदर्शित करता है और रिले स्थानीय कैश के साथ filtered परिणामों को पुन: स्थापित करता है।

मैंने विज्ञापन की क्वेरी का एक उदाहरण नहीं देखा है, लेकिन रिले कंटेनर का केवल एक हिस्सा (जिसे यह घटक प्रारंभ करने से पहले हल करता है)। तो, इसे कैसे मॉडल करें। यह एक उत्परिवर्तन की तरह होना चाहिए?

export default Relay.createContainer(Search, { 
    initialVariables: { 
    count: 3, 
    title: null, 
    category: null, 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     items(first: $count, title: $title, category: $category) { 
      edges { 
      node { 
       ... 
      } 
      } 
     } 
     } 
    `, 
    }, 
}); 

आपकी खोज प्रपत्र बस this.props.relay.setVariables और रिले का उपयोग कर नए डेटा क्वेरी करेगा initialVariables अद्यतन करने के लिए है:

Answer 1

यदि मैं सही ढंग से समझता हूं तो आप घटक के लिए कोई भी प्रश्न नहीं भेजना चाहते हैं जब तक कि उपयोगकर्ता कुछ खोज टेक्स्ट में प्रवेश न करे, जिस बिंदु पर क्वेरी भेजी जानी चाहिए। इसे @Xuorig द्वारा पोस्ट किए गए उदाहरण के साथ पूरा किया जा सकता है, एक अतिरिक्त के साथ: एक चर सेट होने तक खंड को छोड़ने के लिए ग्राफ़क्यूएल @include निर्देश का उपयोग करें। यहां विस्तारित उदाहरण दिया गया है:

export default Relay.createContainer(Search, { 
    initialVariables: { 
    count: 3, 
    query: null, 
    hasQuery: false, // `@include(if: ...)` takes a boolean 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     # add `@include` to skip the fragment unless $query/$hasQuery are set 
     items(first: $count, query: $query) @include(if: $hasQuery) { 
      edges { 
      node { 
       ... 
      } 
      } 
     } 
     } 
    `, 
    }, 
}); 

यह क्वेरी प्रारंभ में छोड़ दी जाएगी क्योंकि स्थिति शामिल है गलत है। फिर, जब घटक इनपुट बदल जाता है तो घटक setVariables({query: someQueryText, hasQuery: true}) पर कॉल कर सकता है, जिस बिंदु पर @include स्थिति सत्य हो जाएगी और क्वेरी सर्वर पर भेजी जाएगी।

Answer 2

इस तरह मैं अपने प्रोजेक्ट में सरल खोज को क्रियान्वित किया है है।