अपोलो क्लाइंट। अब रिएक्ट हुक के साथ

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का कहना है कि अपोलो क्लाइंट डेवलपर्स का मिशन इस उपकरण को प्रतिक्रिया अनुप्रयोगों के प्रबंधन के लिए सबसे आधुनिक और सुविधाजनक समाधान बनाना है। रिएक्ट समुदाय उपयोगकर्ता इंटरफेस विकसित करने के लिए नए और प्रभावी तरीके विकसित कर रहा है। अपोलो क्लाइंट के निर्माता यह सुनिश्चित करने का प्रयास करते हैं कि उनकी परियोजना रिएक्ट दुनिया के सभी सबसे अधिक प्रासंगिक का समर्थन करती है। इस परंपरा के बाद, अपोलो क्लाइंट डेवलपर्स रिएक्ट हुक समर्थन से लैस सिस्टम का एक नया संस्करण पेश कर रहे हैं।



16.8 रिएक्ट में हुक पेश किए गए थे। यह एक नया तंत्र है जो आपको क्लास-आधारित घटकों के लिए विशिष्ट समस्याओं से निपटने के लिए बिना राज्य के घटकों को बनाने की अनुमति देता है। अब अपोलो क्लाइंट में तीन हुक शामिल हैं जिनका उपयोग अनुप्रयोगों में किया जा सकता है - उन सभी स्थानों पर जहां उच्च-क्रम के घटक या रेंडर प्रॉप मैकेनिज्म का उपयोग किया जाता है। ये उपयोग करने वाले, useMutation करने वाले, useMutation और useSubscription । ये हुक सीखना आसान है, पहले से मौजूद एपीआई पर उनके कई फायदे हैं। विशेष रूप से, यह चिंता आवेदन बंडल के आकार को कम करने और बॉयलरप्लेट कोड की मात्रा को कम करने के लिए है।

शुरुआत हो रही है

यदि आप एक नई अपोलो परियोजना बनाने जा रहे हैं, तो हम आपके अपोलो क्लाइंट उदाहरण को कॉन्फ़िगर करने के बाद निम्नलिखित पैकेज स्थापित करने की सलाह देते हैं:

 npm install @apollo/react-hooks 

यह पैकेज ApolloProvider घटक को निर्यात करता है, जिसका उपयोग अपोलो क्लाइंट को रिएक्ट एप्लिकेशन से कनेक्ट करने के लिए किया जाता है। उसी तरह, पुराने एपीआई का उपयोग करके काम का आयोजन किया गया था।

यदि आपके पास पहले से ही एक परियोजना है जो अपोलो का उपयोग करती है, तो इसका मतलब है कि आपके पास हुक करने के लिए स्विच करने के कई तरीके हैं। एक विशिष्ट विधि का चुनाव इस बात पर निर्भर करता है कि आप संक्रमण कैसे करना चाहते हैं। इस पर विवरण यहां पाया जा सकता है ।

भविष्य में हुक क्यों हैं?

अपोलो क्लाइंट अभी भी उच्च-क्रम के घटकों और रेंडर प्रॉप्स के आधार पर एपीआई का समर्थन करता है। ये API आने वाले कुछ समय के लिए सिस्टम में मौजूद रहेगा। हमारा मानना ​​है कि भविष्य में, अपोलो क्लाइंट का उपयोग करके डेटा लोड करने के लिए हुक सबसे अच्छा तंत्र होगा। हालांकि जो लोग पहले से ही अपोलो का उपयोग करते हैं, उन्हें अभी हुक करने के लिए स्विच नहीं करना है, उन्हें नए घटकों के लिए हुक का उपयोग करना चाहिए। इस सिफारिश के कई कारण हैं जिन पर अब हम विचार करेंगे।

Used जब हुक का उपयोग करते हैं, तो आपको डेटा के साथ काम करने के लिए कम कोड की आवश्यकता होती है

हुक डेटा के साथ काम करने के लिए उपयोग किए जाने वाले बॉयलरप्लेट कोड की मात्रा को कम करते हैं। यह घटकों के आकार में कमी की ओर जाता है और इस तथ्य से कि ऐसे घटकों को समझना आसान है। नतीजतन, डेवलपर्स को अब उच्च-क्रम के घटकों की व्यवस्था करने, या रेंडर प्रॉप्स के जटिल तर्क का विश्लेषण करने की आवश्यकता नहीं होगी। डेटा लोड करने के लिए, यह केवल useQuery फ़ंक्शन को कॉल करने के लिए पर्याप्त है:

 const LAST_LAUNCH = gql`  query lastLaunch {    launch {      id      timestamp    }  } `; export function LastLaunch() {  const { loading, data } = useQuery(LAST_LAUNCH);  return (    <div>      <h1>Last Launch</h1>      {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}    </div>  ); } 

यहां useQuery है कि अपोलो क्लाइंट का उपयोग डेटा लोड हो रहा है useQuery
इस ट्यूटोरियल एप्लिकेशन पर एक नज़र डालें जहाँ आप अपोलो क्लाइंट हुक का उपयोग करने का एक कार्यशील उदाहरण देख सकते हैं।

UltMultiple उत्परिवर्तन

जब आप किसी एकल घटक में कई म्यूटेशन करते हैं, तो उच्च-क्रम के घटकों या रेंडर प्रॉप्स मैकेनिज्म का उपयोग करके कोड को जन्म दे सकता है जो समझना मुश्किल है। एपीआई रेंडर प्रोप का उपयोग, एक दूसरे में एम्बेडेड Mutation घटकों से युक्त संरचनाओं का निर्माण, संरचित कोड और इसकी स्पष्ट पदानुक्रम की झूठी भावना देता है। नया useMutation हुक इस समस्या को पूरी तरह से useMutation । तथ्य यह है कि इसका उपयोग एक साधारण फ़ंक्शन कॉल में कम हो जाता है। निम्नलिखित उदाहरण से पता चलता है कि कितने उत्परिवर्तन और प्रश्न एक दूसरे के साथ बातचीत कर सकते हैं। यह सब एक ही घटक के भीतर होता है:

 function Message() {  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);  const [deleteMessage] = useMutation(DELETE_MESSAGE);  const { data } = useQuery(GET_MESSAGE);  return (    <div>      <p>        {loading          ? 'Loading ...'          : `Message: ${data && data.message ? data.message.content : ''}`}      </p>      <p>        <button onClick={() => saveMessage()}>Save</button>        <button onClick={() => deleteMessage()}>Delete</button>      </p>    </div>  ); } 

useMutation हुक का उपयोग useMutation किया जाता useMutation । आप यहां एक्शन में कई म्यूटेशन देख सकते हैं। इस नमूना अनुप्रयोग में रेंडर प्रॉप्स का उपयोग करके बनाया गया एक समान घटक भी शामिल है। यह आपको हुक का उपयोग करके बनाए गए इस घटक के साथ तुलना करने का अवसर देता है।

Ved बेहतर टाइपस्क्रिप्ट समर्थन

यह कोई रहस्य नहीं है कि हम बड़े टाइपस्क्रिप्ट प्रशंसक हैं। नए हुक की क्षमताओं को अपोलो सीएलआई द्वारा उत्पन्न स्वचालित प्रकार की परिभाषाओं के साथ अच्छी तरह से जाना जाता है। यह रिएक्ट घटकों के लिए टाइप-सेफ कोड लिखने की सुविधा प्रदान करता है। यहाँ क्या लोड हो रहा है डेटा का उपयोग करते हुए उपयोग कर useQuery और टाइपस्क्रिप्ट हुक जैसा दिखता है:

 import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql`  query getRocketInventory($year: Int!) {    rocketInventory(year: $year) {      id      year    }  } `; export function RocketInventoryList() {  const { loading, data } = useQuery<RocketData, RocketVars>(    GET_ROCKET_INVENTORY,    { variables: { year: 2019 } }  );  return (/* ... show data ... */); } 

अपोलो और टाइपस्क्रिप्ट हुक, दृढ़ता से टाइप किए गए रिएक्ट घटकों को विकसित करना आसान बनाते हैं।

रिएक्टर डेवलपर्स के लिए अतिरिक्त अपोलो क्लाइंट एन्हांसमेंट

हालांकि अपोलो की यह रिलीज़ नए हुक पर केंद्रित है, हम कुछ और दिलचस्प नई विशेषताओं के बारे में बात कर सकते हैं।

बंडल आकार में in 50% की कमी

जबकि छोटे और संकुचित gzip पैकेज react-apollo@2 का आकार 10.6 Kb है , जबकि react-apollo@3 पैकेज का आकार केवल 7.8 Kb है । इसके अलावा, यदि आपके लिए @apollo/react-hooks पैकेज पर्याप्त है, तो बंडल का आकार केवल 5.1 Kb तक कम हो जाता है। यह react-apollo@2 की तुलना में 50% बचत देता है।

▍ विलंबित क्वेरी निष्पादन

जिस समय फ़ंक्शन को बुलाया जाता है, उस समय उपयोग करने useQuery अपनी क्वेरी निष्पादित करता है। लेकिन यह ठीक उसी प्रणाली का व्यवहार है जिसकी हमेशा जरूरत नहीं होती है। उदाहरण के लिए, खोज क्वेरी दर्ज करने के लिए एक फ़ील्ड, जो उपयोगकर्ता को संकेत देता है। उपयोगकर्ता को प्रवेश करने के लिए आपको इस तरह के क्षेत्र के साथ एक घटक प्रदर्शित करने की आवश्यकता हो सकती है। लेकिन एक ही समय में, खोज सर्वर के लिए क्वेरी का निष्पादन उस समय तक विलंबित हो जाएगा जब उपयोगकर्ता फ़ील्ड में कुछ दर्ज करना शुरू करता है। इस परिदृश्य को कार्यान्वित करने के लिए, आप उपयोग कर सकते useLazyQuery हुक, जो दूसरी स्थिति में execute कार्य के साथ एक ट्यूपल लौटाता है:

 const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY); 

अनुरोध तब तक निष्पादित नहीं किया जाएगा जब तक कि आप execute फ़ंक्शन को कॉल नहीं करते हैं। इस बिंदु पर, घटक को फिर से प्रस्तुत किया जाएगा और उपयोग की useQuery का उपयोग करके कार्यान्वित सामान्य क्वेरी निष्पादन योजना को लागू किया जाएगा।

Ewनई एपीआई प्रलेखन

हमने हुक जानकारी जोड़कर अपोलो क्लाइंट प्रलेखन को अद्यतन किया। हम उन्हें उन लोगों द्वारा उपयोग करने की सलाह देते हैं, जिन्होंने अभी-अभी हमारे सिस्टम के साथ काम करना शुरू किया है। हालांकि, इसके बावजूद, हमने उच्च-क्रम के घटकों के साथ और रेंडर प्रॉप मैकेनिज्म के साथ काम करने के बारे में प्रलेखन से जानकारी नहीं हटाई। कोड उदाहरणों में जो दस्तावेज़ में पाए जा सकते हैं, अब आप नए ड्रॉप-डाउन मेनू का उपयोग कर सकते हैं जो आपको कोड के बीच स्विच करने की अनुमति देता है जो उसी समस्या के समाधान को प्रदर्शित करता है जो पाठक को सबसे अच्छा लगता है।


प्रलेखन में उपलब्ध विभिन्न कोड विकल्प

परिणाम

अपोलो क्लाइंट के रचनाकारों का कहना है कि रिएक्ट के बारे में उन्हें जो सबसे ज्यादा पसंद है, वह यह है कि इस लाइब्रेरी के डेवलपर्स की कोर टीम और इसके आसपास के उत्साही लोगों का प्रोग्रामर के दृष्टिकोण से रिएक्ट की उपयोगिता में सुधार करने के लिए लगातार प्रयास कर रहे हैं। हुक की उपस्थिति, जो पूरी तरह से हर किसी की कोशिश करने के लिए अनुशंसित है, ऐसी आकांक्षा के उज्ज्वल उदाहरणों में से एक है।

हमें उम्मीद है कि अपोलो क्लाइंट में पेश किए गए रिएक्ट हुक उन लोगों से अपील करेंगे जो इस परियोजना का उपयोग अपने अनुप्रयोगों को विकसित करने के लिए करते हैं।

प्रिय पाठकों! क्या आप अपोलो क्लाइंट का उपयोग करते हैं?