React में Apollo Client सेट अप करना

@apollo/client और graphql इंस्टॉल कीजिए। graphql पैकेज एक सह-निर्भरता है, जिसकी Apollo Client को gql टेम्पलेट टैग से क्वेरी दस्तावेज़ों को पार्स करने के लिए आवश्यकता होती है।

TypeScript प्रोजेक्ट के लिए दोनों पैकेज अपनी प्रकार-परिभाषाएँ स्वयं देते हैं, इसलिए किसी @types पैकेज की आवश्यकता नहीं होती।

कैश और लिंक के साथ ApolloClient का इंस्टेंस बनाइए। सबसे सरल सेटअप है: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' })। uri का संक्षिप्त रूप अंदर ही अंदर HttpLink बनाता है।

अधिक नियंत्रण के लिए लिंक श्रृंखला स्वयं बनाइए और उसे uri के बजाय link विकल्प में पास कीजिए।

अपने React अनुप्रयोग को client प्रॉप के साथ ApolloProvider में रैप कीजिए: ApolloProvider client={client}। इससे Apollo Client का इंस्टेंस React कॉन्टेक्स्ट के माध्यम से सभी वंशज कॉम्पोनेंट के लिए उपलब्ध हो जाता है।

कॉम्पोनेंट ट्री में प्रत्येक useQuery और useMutation कॉल इस क्लाइंट का अपने-आप उपयोग करती है, इसलिए प्रॉप ड्रिलिंग की आवश्यकता नहीं होती।

InMemoryCache, Apollo Client का डिफ़ॉल्ट कैश है। यह प्राप्त डेटा को प्रकार और ID के आधार पर सामान्यीकृत करता है तथा प्रत्येक इकाई को एक अद्वितीय कैश कुंजी (जैसे, User:1) के अंतर्गत संग्रहीत करता है। जब कोई क्वेरी User:1 प्राप्त करती है, तो उस इकाई को पढ़ने वाले सभी अगले पाठों को अपडेट किया हुआ डेटा मिलता है।

इस सामान्यीकरण का अर्थ है कि किसी एक म्यूटेशन में उपयोगकर्ता को अपडेट करने पर उस उपयोगकर्ता को शामिल करने वाले प्रत्येक क्वेरी परिणाम में अपने-आप बदलाव हो जाता है; अतिरिक्त कोड की आवश्यकता नहीं होती।

HttpLink, Apollo Client से आपके GraphQL सर्वर तक HTTP परिवहन संभालता है। इसे uri और वैकल्पिक रूप से fetch, headers तथा credentials के साथ कॉन्फ़िगर कीजिए।

उन्नत उपयोग के मामलों में, स्प्लिट लिंक अलग-अलग ऑपरेशन को अलग-अलग एंडपॉइंट पर भेजते हैं: सब्सक्रिप्शन WebSocket (WebSocketLink) के माध्यम से और क्वेरी तथा म्यूटेशन HTTP (HttpLink) के माध्यम से जाते हैं।

@apollo/client/link/context से setContext इम्पोर्ट कीजिए। एक प्रमाणीकरण लिंक बनाइए: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } }))। इसे HttpLink से पहले श्रृंखलाबद्ध कीजिए: authLink.concat(httpLink)।

setContext लिंक प्रत्येक अनुरोध से पहले चलता है और हर ऑपरेशन में प्रमाणीकरण हेडर गतिशील रूप से जोड़ता है।

लिंक का संयोजन ApolloLink.from([authLink, errorLink, httpLink]) या authLink.concat(httpLink) का उपयोग करके कीजिए। लिंक मिडलवेयर होते हैं: प्रत्येक लिंक ऑपरेशन को प्रोसेस करके next() को पास करता है। श्रृंखला का अंतिम लिंक वास्तविक HTTP अनुरोध भेजता है।

सामान्य श्रृंखलाएँ हैं: प्रमाणीकरण लिंक (हेडर जोड़ना) + त्रुटि लिंक (त्रुटियाँ संभालना) + HTTP लिंक (अनुरोध भेजना)।

@apollo/client/link/error से onError इम्पोर्ट कीजिए। त्रुटि लिंक GraphQL त्रुटियों और नेटवर्क त्रुटियों को वैश्विक रूप से बीच में पकड़ता है। इसका उपयोग UNAUTHENTICATED त्रुटियों पर लॉगिन पृष्ठ पर भेजने या नेटवर्क विफलताओं पर वैश्विक त्रुटि सूचना दिखाने के लिए कीजिए।

त्रुटि लिंक को श्रृंखला में HTTP लिंक से पहले होना चाहिए, लेकिन अनुरोध को दोबारा भेजने के लिए यह forward(operation) कॉल कर सकता है।

cache-first (डिफ़ॉल्ट): कैश किया हुआ डेटा तुरंत लौटाएँ; पुराना होने पर पृष्ठभूमि में फिर से प्राप्त करें। network-only: हमेशा सर्वर से प्राप्त करें और कैश अपडेट करें। cache-and-network: कैश तुरंत लौटाएँ और साथ ही डेटा प्राप्त करें; प्रतिक्रिया आने पर यूआई अपडेट करें। cache-only: केवल कैश से पढ़ें; कैश में डेटा न होने पर त्रुटि दें। no-cache: हमेशा डेटा प्राप्त करें, लेकिन कैश में कभी न लिखें।

डेटा की ताज़गी संबंधी आवश्यकताओं के आधार पर चुनाव कीजिए: डैशबोर्ड अक्सर cache-and-network का उपयोग करते हैं; उपयोगकर्ता प्रोफ़ाइल फ़ॉर्म network-only का।

InMemoryCache के defaultOptions में डिफ़ॉल्ट fetchPolicy सेट कीजिए: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } })। अलग-अलग useQuery कॉल प्रत्येक क्वेरी के लिए इसे बदल सकती हैं।

उचित वैश्विक डिफ़ॉल्ट सेट करने से प्रत्येक हुक कॉल में fetchPolicy निर्दिष्ट करने की अतिरिक्त औपचारिकता कम हो जाती है।

Apollo Client DevTools का ब्राउज़र एक्सटेंशन Chrome DevTools में एक Apollo पैनल जोड़ता है। यह सभी कैश की गई क्वेरी और उनका वर्तमान डेटा दिखाता है, आपको सामान्यीकृत कैश देखने देता है और DevTools पैनल से क्वेरी दोबारा चलाने की सुविधा देता है।

इसे Chrome Web Store से इंस्टॉल कीजिए और क्लाइंट को devtools: { enabled: true } के साथ प्रारंभ कीजिए (विकास मोड में यह डिफ़ॉल्ट होता है)।

@apollo/client और graphql इंस्टॉल कीजिए, InMemoryCache और लिंक श्रृंखला के साथ ApolloClient बनाइए तथा ऐप को ApolloProvider में रैप कीजिए। लिंक श्रृंखला authLink (टोकन जोड़ना), errorLink (वैश्विक त्रुटि-संभालना) और httpLink (HTTP परिवहन) का संयोजन करती है। फ़ेच नीति कैश और नेटवर्क की प्राथमिकता नियंत्रित करती है; InMemoryCache इकाइयों को प्रकार+आईडी के आधार पर सामान्यीकृत करता है।

Apollo DevTools का ब्राउज़र एक्सटेंशन कैश की जाँच और डीबगिंग को सरल बना देता है।