हाय हेलो दोस्तों बहुत-बहुत स्वागत है आपका और एक नए वीडियो के अंदर और आप कैसे हो मैं उम्मीद करता हूं कि आप सब लोग अच्छे होंगे तो दोस्तों आज की इस वीडियो के अंदर हम ऐसे एक टूल के बारे में जानने वाले हैं जिसकी आपको बहुत ज्यादा हेल्प होने वाली है अगर आप आपके एप्लीकेशन के अंदर डटा फेचिंग करते हो राइट थोड़ा सोचिए अगर अच्छा होता था ना अगर सर्वर पर जब भी आप रिक्वेस्ट करते हो तो कोई एरर ही ना आ जाए या फिर सर्वर से डाटा एकदम तुरंत फास्ट जो है एक सेकंड के अंदर आपका फेच होके आपके फ्रंट एंड के अंदर दिखे या फिर अगर आपकी जो रिक्वेस्ट है वो अगर फेल हो जाती है तो ऑटोमेटिक जो है वो रिट्रायबल रियल वर्ल्ड में ऐसा कुछ होता नहीं है आप सर्वर पे कॉल करते हो मतलब वो नेटवर्क रिक्वेस्ट होती है बहुत सारे प्रॉब्लम्स होते हैं बहुत सारे एरर्स आती है आपके फ्रंट एंड के ऊपर डाटा आने से पहले ही वो फेल हो जाती है डाटा आपको मिलता नहीं है और इन सब चीजों को हैंडल करने के लिए क्या होता है कि आपको बहुत सारा कोड लिखने की जरूरत होती है बहुत ज्यादा कोड लिखना होता है लेकिन जो आज के वीडियो के अंदर जो टूल हम देखने वाले हैं जो कि है रिएक्ट क्वेरी इसको अगर हम यूज करते हैं तो यह सारी चीजें रिएक्ट क्वेरी हमारे लिए हैंडल करता है इसका मतलब यह हुआ कि ना सिर्फ यह यूजर एक्सपीरियंस बढ़ाता है बल्कि यह आपका जो डेवलपर एक्सपीरियंस है आपका एज अ डेवलपर उसको भी बढ़ाता है क्योंकि आपको वह कॉम्प्लेक्शन रिट लिस्ट बहुत लंबी है यह जो है यह आपको खुद करने की जरूरत नहीं है यह रिएक्ट क्वेरी आपके लिए करेगा तो अगर आप कोई भी मॉडर्न एप्लीकेशन बिल कर रहे हो तो आपको रिएक्ट क्वेरी आनी ही चाहिए तो यह एक मॉडर्न टूल है और इंडस्ट्री के अंदर बहुत ज्यादा आजकल यूज होता है तो एज अ डेवलपर आपको इस टूल के बारे में पता ही होना चाहिए अगर आप सर्वर से डटा फेज करने का काम करते हो आपके रिएक्ट एप्लीकेशन के अंदर तो चलिए देखते हैं कि कैसे हम रिएक्ट क्वेरी को हमारे एप्लीकेशन के अंदर यूज करते हैं और कौन से प्रॉब्लम्स रिएक्ट क्वेरी हमारे लिए सॉल्व करती है बिल्कुल टाइम वेस्ट नहीं करते हैं लेट्स गो ओके ऑलराइट नमस्ते दोस्तों एक बार फिर से स्वागत है आपका इस वीडियो के अंदर और मैं आपको धन्यवाद देना चाहता हूं इस वीडियो को देखने के लिए और ऐसे ही आपका जो सपोर्ट है वह बनाए रखें तो यहां पर हम आप देख सकते हो आ चुके हैं जो रिएक्ट क्वेरी का जो ऑफिशियल डॉक्यूमेंटेशन है इस वेबसाइट के ऊपर आ चुके हैं यह वेबसाइट है इसकी और यहां पर आप देख सकते हो कि टेंस स्टैक क्वेरी यहां पर लिखा हुआ है यही आपकी रिएक्ट क्वेरी है और यहां पर आप देख सकते हो कि वर्जन थ्र यहां पर मुझे दिखा रहा है लेकिन अगर आप यहां पर देखोगे तो एक लेटेस्ट वर्जन भी अवेलेबल है तो जल्दी से इसको क्लिक करते हैं तो अभी आप देख सकते हो यह वर्जन फोर का डॉक्यूमेंटेशन यहां पर ओपन हो चुका है और थोड़ा सा यहां पर पढ़ते तो आप देख सकते हो पावरफुल एसिंक्रोनस स्टेट मैनेजमेंट ठीक है यह आप देख सकते हो यह इसके ऊपर इन्होंने अंडरलाइन की है क्योंकि यह एक इंपॉर्टेंट फ्रेज है इस लाइब्रेरी के बारे में एसिंक्रोनस स्टेट कौन सा होता है एसिंक्रोनस स्टेट हम स्टेट मैनेजमेंट की बात करते हैं तो हमारे एप्लीकेशन के अंदर नॉर्मली जो रिडक्स टूल किट हम यूज करते हैं वो आपका क्लाइंट स्टेट होता है और नॉर्मली वो क्या होता है कि एक सिंक्रोनस स्टेट होता है आप डाटा क्लाइंट का डाटा उसके अंदर स्टोर करते हो यूज करते हो लेकिन जबी एसिंक्रोनस स्टेट की बात आती है तो यह जो एसिंक्रोनस स्टेट है नॉर्मली कब करते हैं हम आप एप्लीकेशन के अंदर यूज इसको राइट जबी आप सर्वर से डेटा फेज करते हो तो वहां पर और आप जो एसिंक्रोनस एपीआई है उसको आप यूज करते हो तो यह जो रिएक्ट क्वेरी है यह आपकी हेल्प करती है यह जो आपका जो एसिंक्रोनस स्टेट है उसको मैनेज करने के लिए इसलिए इसको सर्वर स्टेट लाइब्रेरी भी बोला जाता है क्योंकि जो एसिंक्रोनस स्टेट है वो एक सर्वर स्टेट है और उसको मैनेज करने में आपकी यह रिएक्ट क्वेरी हेल्प करती है और अगर अभी आपको कुछ समझ में नहीं आ रहा है कोई बात नहीं इस वीडियो के अंदर जाके हम पूरा एग्जांपल के साथ में इसको समझने वाले हैं तो तभी आपको बिल्कुल अच्छी तरीके से समझ में आ जाएगा चलो स्टार्ट करते हैं सबसे पहले यहां पर आपको जाना है इस रिपोजिटरी के अंदर यहां पर मैं आपको लिंक दे दूंगा इसकी मैंने यह जो प्रोजेक्ट है इसको प्रिपेयर किया हुआ है इसके अंदर और कुछ नहीं है एक सिंपल रिएक्ट एप्लीकेशन जिसको वीट की मदद से मैंने इंस्टॉल किया हुआ है और रिएक्ट राउटर इसके अंदर ऐड किया हुआ है चलो इसको कॉपी करते हैं और चलते हैं टर्मिनल के अंदर और यहां पर करना है गिट क्लोन एंटर करते हैं और यह रिपोजिटरी हमारी क्लोन हो जाएगी सीडी करते हैं उसके अंदर तो सीडी वाटी रिएक्ट क्वेरी और यहां पर आपको क्या करना है आप देख सकते हो मैंने यहां पर बिफोर नाम की एक ब्रांच बनानी है उसके अंदर जाके वह आपका स्टार्टिंग पॉइंट होगा ठीक है मैं यहां पर मेन के ऊपर ही काम करूंगा आप जबी करोगे उसको तो बिफोर के ऊपर चेक आउट करके कर लेना ताकि आप यहां से क्लीन स्लेट से आप स्टार्ट करोगे चलो अभी सबसे पहले हमें करना है एनपीएम इंस्टॉल ताकि सारी जो डिपेंडेंसी वो इंस्टॉल हो जाए और उसके बाद करते हैं एनपीएम रन डे ठीक है एप्लीकेशन हमारा रन हो जाएगा यहां पर चलो ब्राउजर के अंदर इसको ओपन करते हैं और यह देखिए यह सिंपल सा एप्लीकेशन है दो लिंक्स है इसके ऊपर और यहां पर राउटिंग काम कर रहे है प्रोडक्ट्स नाम का एक कंपोनेंट है देखते हो स्लश प्रोडक्ट्स और यहां पर कुछ नहीं है अभी एमटी है कोड के अंदर अगर दे देखते हैं तो देखिए यहां पर इसको मैं बंद कर लेता हूं जल्दी से बहुत सारी एरर्स आजकल आती है वीएस कोड के अंदर ओके और ये ऐसे नहीं होगा मुझे हमें जाना होगा यहां पर और यहां पर करते हैं कोड इसको कोड के अंदर ओपन करेंगे और यहां पर चलो जल्दी से फिर से मैं बंद कर लेता हूं इसको देखिए अभी इसके अंदर अगर देखेंगे तो एक ऐप जेएस एक हमारा कंपोनेंट है जो कि होम पेज आपने देखा था सिंपल सा दो लिंक्स है इसके अंदर और कुछ इसमें कॉम्प्लेक्शन है एक है प्रोडक्ट्स इसके अंदर सिर्फ प्रोडक्ट्स लिखा हुआ है और कुछ नहीं और दूसरा है प्रोडक्ट ये सिंगल प्रोडक्ट के लिए और जो प्रोडक्ट्स है उसके अंदर प्रोडक्ट्स की जो लिस्ट होगी वो हम देखेंगे हमारे एग्जांपल के लिए हम जो प्रोडक्ट्स की जो एपीआई है उसको हम यूज करने वाले हैं तो उसके लिए ये दो कंपोनेंट्स है चलो अभी सबसे पहले यहां पर इस कंपोनेंट के अंदर हमें क्या करना है इसके अंदर जो प्रोडक्ट्स की लिस्ट है उसको हमें फेच करना है तो यहां पर आप देख सकते हो कि यह डमी जेसन हम यहां पर यूज करने वाले हैं एक फ्री सर्विस है और यहां पर प्रोडक्ट्स जो है वह हमें चाहिए तो मैं यहां पर क्लिक करूंगा तो यह देखिए यह जेसन डाटा हमें मिल रहा है इसको हम हमारे यूज केस के लिए यूज करेंगे यह उसकी यूआरएल है बेसिकली तो रिक्ट के अंदर नॉर्मली हम डेटा फेज कैसे करते हैं है कैसे करते हैं यूज इफेक्ट के अंदर करते हैं स्टोर कैसे करते हैं यू स्टेट के अंदर करते हैं चलो वही करते हैं सो यहां पर यू स्टेट पहले बनाते हैं प्रोडक्ट्स और सेट प्रोडक्ट्स और मैं अजूम करके चल रहा हूं कि यह आपको पता होगा किस तरह से यू स्टेट वगैरह यूज करते हैं और यहां पर करते हैं यूज इफेक्ट और इस तरह से यहां पर आपको क्या देना है डिपेंडेंसी एरे ठीक है यहां पर यू स्टेट को भी मैं इस तरह से करूंगा और अभी इसके अंदर हमें क्या करना है फेज करना है प्रोडक्ट्स को तो जल्दी से मैं यहां पर एक फंक्शन बनाता हूं फेज प्रोडक्ट्स और यह एक एसिंग फंक्शन होगी तो इस तरह से मैं करूंगा इसको और यहां पर करते हैं कॉस्ट रिस्पांस यहां पर फेच एपीआई जो है उसको हम यूज करेंगे सो फेच और जो यूआरएल होगा यह वाला होगा इस तरह से और उसके बाद यहां पर करते हैं डाटा अवेट और यहां पर करना है रिस्पांस डॉट क्या करते हैं जेसन इस तरह से करते हैं हम नॉर्मली राइट फेज की मदद से और अभी यह जो डाटा है यह डाटा बेसिकली कुछ इस तरह से होगा देखिए ये ऑब्जेक्ट है इसके अंदर प्रोडक्ट्स नाम की एक की है और उसकी वैल्यू जो है वो यह एरे है प्रोडक्ट्स का तो यहां पर करते हैं सेट प्रोडक्ट्स और यहां पर करना है डटा डॉट प्रोडक्ट्स ठीक है देखिए और यह जो फेच प्रोडक्ट है इसको हमें कॉल करना है तो यहां पर करते हैं फेच प्रोडक्ट्स इस तरह से ओके कॉल कर दिया तो अभी क्या हो जाएगा जो हमारे प्रोडक्ट्स है वो यहां पर फेच हो जाएंगे और उसके बाद यहां पर क्या करते हैं जो प्रोडक्ट्स की लिस्ट है उसको हम दिखाएंगे तो ऐसे भी कर सकते हैं या फिर थोड़ा सा इसको खूबसूरत बनाते हैं तो आपको जाना है ब्राउजर के अंदर और यहां पर करना है प्रोडक्ट लिस्ट लविन सीएसएस और यह टेल विंड यूआ की जो वेबसाइट है यह ओपन हो जाएगी और यहां पर बहुत सारे आपको कंपोनेंट्स मिलते हैं फ्री में बहुत सारे पेड भी है लेकिन जो फ्री वाला है वो हमें चाहिए तो आप देख सकते हो यह कुछ इस तरह से हम प्रोडक्ट की जो लिस्ट है उसको हम दिखाएंगे सो यहां पर यह कोड और यहां पर रिएक्ट सेलेक्ट करते हैं और यहां पर जाके यह जो है इसको मैं कॉपी करता हूं देखिए इस तरह से कॉपी चलो कोड कोड एडिटर के अंदर और यहां पर जाके इसको करते हैं पेस्ट देखिए यह पूरा कोड हमारा यहां पर पेस्ट हो चुका है और यहां पर कुछ चीजें हमें चेंज करनी है सबसे पहले तो आप देख सकते हो प्रोडक्ट आईडी ठीक है इसके अंदर ऑलरेडी मैप वगैरह किया हुआ है देखिए प्रोडक्ट्स के ऊपर इसके अंदर इमेज एसआरसी जो है वह चेंज करना है हमें क्योंकि हमारे केस में अभी जो हमारे पास है वह है थंबनेल की चलो थंबनेल उसके बाद जो इमेज अल्ट है उसको हम टाइटल बनाएंगे जो टाइटल होगा प्रोडक्ट का उसको ही ये अल्ट की बनाएंगे इमेज की उसके बाद यहां पर आप देख सकते हो प्रोडक्ट ए रेप है इसको थोड़ी देर के लिए अ हम क्या करेंगे इसको इग्नोर करेंगे चलो इसको इग्नोर करते हैं थोड़ी देर के लिए ठीक है इसको हम अ चेंज करेंगे थोड़ी देर में लेकिन यहां पर प्रोडक्ट नेम की जगह यहां पर करते हैं टाइटल और प्रोडक्ट कलर जो है कलर हमारे पास नहीं लेकिन हमारे पास और एक फील्ड है जो कि है कैटेगरी वह हम दिखाएंगे सो कैटेगरी और यहां पर प्रोडक्ट प्राइस ठीक है देखिए यह कुछ अभी इस तरह से दिख रहा है हमारा कंपोनेंट सिंपल सा है चलो चलते हैं हमारे कहां चलना है हमें टर्मिनल के अंदर और इसको करते हैं एनपीएम रन डेव और चलते हैं ब्राउजर के अंदर और यहां पर यह हमारा मैं इसको रिफ्रेश करता हूं और चलते हैं प्रोडक्ट्स जो पेज है हमारा इसके ऊपर देखिए सारे प्रोडक्ट्स हमारे फेच यहां पर हो चुके हैं इसको स्टाइल में थोड़ा सा इशू आ रहा है यहां पर आप देख सकते हो यह जो कंपोनेंट था यह हमारा लविन सीएसएस का था तो हमारे एप्लीकेशन के अंदर लविन सीएसएस नहीं है तो जल्दी से क्या करते हैं यहां पर चलते हैं लविन सीएसएस सीडीएन आपको सर्च करना है और सीडीएन मतलब बेसिकली एक यूआरएल होता है जो कि आप यहां पर यूज कर सकते हो अगर आपको लविन सीएसएस को ट्राई करना है ठीक है यह प्रोडक्शन के अंदर रिकमेंडेटरी इस टाइप से यूआरएल को ऐड करना अगर प्रोडक्शन एप्लीकेशन है तो नॉर्मली आप क्या करते हो इसको इंस्टॉल करते हो सीआ की मदद से लेकिन हम यहां पर टेस्ट कर रहे हैं तो उसकी वजह से यहां पर सीडीएन ही यूज करेंगे कैसे ऐड कर सकते हैं इक्सड इसको मैं छोटा करता हूं ठीक है मैंने जूम करके रखा था देखिए अभी सारे हमारे प्रोडक्ट जो है यहां पर ये लोड हो चुके हैं इनफैक्ट अगर मैं आपको कंसोल यहां पर दिखा दूं तो रिफ्रेश करते हैं तो चलो सबसे पहले यहां पर लॉक करते हैं इसको सो कसोल डलॉग डटा ड प्रोडक्ट और अभी इसको सेव करके एक बार चलते हैं फिर से ब्राउजर के अंदर और रिफ्रेश करते है तो आप देख सकते हो यहां पर दो एरे आपको दिखेंगे और यह दो बार दिख रहा है क्योंकि इसका रीजन है जो रिएक्ट के अंदर स्ट्रिक्ट मोड है यह इसको मैं बंद करूंगा ठीक है यह दो बार दिखेगा बस आपके डेवलपमेंट के अंदर प्रोडक्शन के अंदर व ऐसे नहीं दिखेगा तो यह देखिए यह अभी एक बार दिख रहा है और सारा जो डाटा है हमारे पास इसके अंदर है देखिए सारी चीजें हैं चलो इसको मैं बंद करता हूं और अभी तो हो गया हमारा डाटा आ रहा है हमारा यहां पर रेंडर भी हो रहा है अभी बहुत बार क्या होता है ना कि आप जब भी एप्लीकेशन बनाते हो तो आपको यहां पर लोडिंग स्टेट दिखाना होता है थोड़ा सा यूजर एक्सपीरियंस बढ़ाना होता है राइट तो उसके लिए जो जब तक सर्वर का डाटा लोड हो रहा है फेच हो रहा है तब तक हम क्या करते हैं नॉर्मली एक लोडिंग स्पिनर दिखाते हैं या फिर टेक्स्ट दिखाते हैं तो इसको कैसे कर सकते हैं रिएक्ट के अंदर कैसे करते हैं यह हम देखते हैं सबसे पहले चलो उसके लिए हमें और एक स्टेट की जरूरत पड़ेगी सो यहां पर करते हैं इस लोडिंग सेट इ लोडिंग और यहां पर करते हैं यूज स्टेट और बाय डिफॉल्ट इसको फॉल्स रखेंगे और यहां पर अभी रिक्वेस्ट सेंड करने से पहले करते हैं सेट सेट इज लोडिंग इसको करते हैं ट्रू और रिक्वेस्ट खत्म होने के बाद यहां पर करते हैं सेट इ लोडिंग फॉल्स ठीक है लास्ट में लाते हैं चलो अभी सिंपल सा है यह एक टॉगल टाइप का हमने किया है स्टार्टिंग में लोडिंग को ट्रू करो बाद में इसको फॉल्स करो डाटा फिच होने के बाद और फिर यहां पर चेक करेंगे इफ इज लोडिंग अगर लोडिंग हो रहा है तो यहां पर क्या करेंगे रिटर्न करो क्या रिटर्न करो स्पिनर रिटर्न करो लेकिन हमारे पास कोई स्पिनर नहीं है तो मैं यहां पर क्या करूंगा यहां पर h3 और लोडिंग नाम का एक टेक्स्ट यहां परल लगाएंगे ठीक है नॉर्मली आप यहां पर लोडिंग जो कंपोनेंट होता है उसको आप रिटर्न कर सकते हो चलो इसको टेस्ट करते हैं और यहां पर आते हैं तो आप देख सकते हो यहां पर लेफ्ट साइड में आपको थोड़ी देर के लिए एक लोडिंग टेक्स्ट दिखेगा देखिए रिफ्रेश लोडिंग रिफ्रेश लोडिंग ओके आई होप कि आपको दिख रहा है एक बार फिर से जो नेटवर्क स्पीड है उसको मैं स्लो करके आपको दिखाता हूं देखिए यह देखिए दि और डाटा लोड होने के बाद यह गायब हो जाता है क्योंकि यहां पर इफ जो कंडीशन है वह हमने लगाई है अभी यहां पर देखो कोई भी एरर हैंडलिंग यहां पर हम कुछ कर रहे नहीं कर रहे हैं अगर समझो कि यहां पर एरर लाने के लिए मैं थोड़ा सा यूआरएल चेंज करता हूं एस यहां पर दबाता हूं और ऐड करता हूं और एक और अगर सेव करके फिर एक बार करते हैं तो आप देख सकते हो यहां पर एरर आ चुकी है और लोडिंग यहां पर हैंग हो चुका है ठीक है मतलब हमारा जो एप्लीकेशन का जो एल्गोरिथम व ठीक तरह से काम नहीं कर रहा है जो हमारा यूजर सिनेरियो है अगर एरर आती है तो हमें क्या करना पड़ेगा लोडिंग को हटाना पड़ेगा इसके लिए हमें एरर हैंडलिंग ऐड करना पड़ेगी तो एरर हैंडलिंग करने के लिए हम रिएक्ट के अंदर कैसे करते हैं उसके लिए भी हम एक नया स्टेट यहां पर डाल सकते हैं एरर सेट एरर और यहां पर करते हैं यूज स्टेट बाय डिफॉल्ट यह अनडिफाइंड होगा कुछ भी ऐड नहीं करेंगे इसके अंदर या फिर चाहो तो नल आप रख सकते हो और चलो नल रखते हैं यहां पर और यहां पर स्टार्टिंग में हम क्या करेंगे सबसे पहले हम एरर को नल करते हैं ठीक है हो सकता है कि आपके पिछले रेंडर का ज भी आप दूसरे पेज से फिर से वापस आ रहे हो इस कंपोनेंट के ऊपर हो सकता है कि कोई आपकी पिछली वाली एरर आपके पास है तो मैं सबसे पहले रिक्वेस्ट सेंड करने से पहले इसको क्लियर करूंगा और यहां पर यह थोड़ा सा ट्रिकी है देखिए जब भी आप फेच एपीआई जब यूज करते हो एरर हैंडलिंग थोड़ी सी कॉम्लेक्स हो जाती है इसके अंदर क्योंकि जो एक्सस के अंदर होता है एक्सज एक लाइब्रेरी है डाटा फेज के फेज करने के लिए एटीपी रिक्वेस्ट करने के लिए उसके अंदर काफी सही है अगर एरर आती है तो वह एक्सस हमारे लिए ऑटोमेटिक जो प्रॉमिस है उसको रिजेक्ट करती है लेकिन फेच ऐसा नहीं करती है फेज के लिए आपको मैनुअली चीजें करनी होती है आपको इस तरह से कुछ चेक करना होता है देखिए मैं आपको दिखाता हूं इफ यहां पर करते हैं रिंस ड ओके ठीक है यह प्रॉपर्टी आपको चेक करनी होती है अगर ओके नहीं है तो यहां पर कुछ करो हैंडल करो एरर को ठीक है अभी सिंपलीसिटी के लिए हम क्या करने वाले हैं इसको यहां पर ट्राई कैच के अंदर डालेंगे ठीक है और मैं आपको सजेस्ट करूंगा कि आप जब इसको करोगे आपके एप्लीकेशन के अंदर तो आप एक्सस जैसी लाइब्रेरी जो है उसको यूज करना ठीक है बहुत सारे फीचर्स उसके अंदर मिलते हैं हमें सो यहां पर करते हैं ट्राई और यह रहा कैच एरर उप्स और अभी यहां से यह सारी चीजें जो है यहां से मैं हटा के यहां पर डालता हूं और चलो इसको भी मैं इसके अंदर ही लेता हूं इस तरह से और अभी एरर अगर आती है अभी एरर क्यों आने वाली मैं आपको बताता हूं इसका रीजन वैसे यह फेच आपका प्रॉमिस रिजेक्ट नहीं करेगा एरर उसकी वजह से आएगी क्योंकि जबी गलत यूआरएल है तो जेसन के अंदर जो है वह डाटा हमारा कुछ नहीं होगा तो उसकी वजह से क्या हो जाएगा यह जो जेसन मेथड है यह यहां पर एरर थ्रो करेगी और इसको हम कैच कर रहे यहां पर ओके सो यहां पर करते हैं क्या करना है हमें सेट करना है एरर को सेट एरर एरर डॉट मैसेज ठीक है इस तरह से सिंपल है और इसी के साथ में हमें जो लोडिंग है उसको भी स्टॉप करना पड़ेगा तो सेट लोडिंग फॉल्स सेव करते हैं चलते हैं ब्राउजर के अंदर और यहां पर करते हैं रिफ्रेश तो यह देखिए यहां पर अभी वह लोडिंग जो था वह हैंग नहीं हो रहा है लेकिन हमें एरर भी दिखानी है तो एरर दिखाने के लिए यहां पर आते हैं और यहां पर करते हैं दूसरा इफ और एरर अगर एरर है यहां पर करते फिर से एरर अगर एरर है तो रिटर्न करो h3 और यहां पर करते हैं इस तरह से एरर और उसको ले करते हैं एरर और एक बार देख लेते हैं हमने क्या एरर डॉट मैसेज डायरेक्टली मैसेज हमने पास किया है तो यहां पर सिर्फ एरर आपको दिखानी है जो स्टेट के अंदर है वह मैसेज होगा यह देखिए अभी जैसे मैं रिफ्रेश करूंगा एरर आती है तो वह तुरंत है अनएक्सपेक्टेड टोकन ओ ये जेसन पार्सिंग की एरर है ठीक है ओके तो इस तरह से हमने यह दिखा हमने यह कर दिया इसको लोडिंग और एरर हैंडलिंग वगैरह लेकिन आप यहां पर देख सकते हो कि कितनी कॉम्प्लेक्शन हमें यू स्टेट्स यहां पर मेंटेन करने की जरूरत पड़ रही है यहां पर ये यूज इफेक्ट लगाने की जरूरत पड़ रही है और और ये जो एरर हैंडलिंग है इसके अंदर भी हमें और कॉम्प्लेक्शन चीजें हमें हैंडल करनी होगी अलग-अलग स्टेटस कोड्स इसको यहां पर हैंडल करना होगा राइट तो थोड़ी सी चीजें यहां पर ब्राउजर में चलते हैं और ये एरर मैं हटा देता हूं यहां से देखिए यूआरएल ठीक करते हैं और यहां पर आप देख सकते हो ये देखिए इस टैब के अंदर आपको देखना है जो भी रिक्वेस्ट यहां पर हमारी जाएगी तो मैं जल्दी से जाऊंगा प्रोडक्ट्स और जो हमारा राउट है दूसरा वाला और यह देखिए यह प्रोडक्ट कंपोनेंट यहां पर है और बाय द वे यह राउटर हमने यहां पर बनाया है आपको अगर दिखाऊं यहां पर तो यह देखिए यह हमारा यह राउटर डॉम है और यहां पर यह कंपोनेंट है देखिए यह राउट है हमारा प्रोडक्ट आईडी के ऊपर जाते तो प्रोडक्ट कंपोनेंट हमारा दिखता है यह है यहां पर और अभी यहां से यह जो नो थ्रोटलिंग इसको करते हैं ताकि व स्लो ना चले और यहां से अगर मैं फिर से हमारे प्रोडक्ट कंपोनेंट के ऊपर जाता हूं तो देखिए क्या होगा बैक यह थोड़ा सा अभी यहां पर रिफ्रेश हुआ था लेकिन यहां से मैं फिर से आगे जाता हूं बैक आगे अच्छा ये रिफ्रेश यहां पर हो रहा है ठीक है मेरे को इसको फिक्स करना होगा अ चलो उसको फिक्स करने के लिए मैं यहां पर क्या करूंगा सबसे पहले तो हमें लिंक डालनी होगी तो देखिए एक बार देख लेते हैं फिर से बैक हमें रिफ्रेश नहीं करना है मैं चाहता हूं कि यह जो हमारा प्रोडक्ट है इसके ऊपर क्लिक करने के बाद उस प्रोडक्ट के ऊपर जाना चाहिए ऐसा सिस्टम हमें करना है तो इसको करना काफी सिंपल है यहां पर आप देख सकते हो हम हमारे पास एक लिंक टैग होगा यह देखते यह देखिए यहां पर इसकी वजह से वो रिफ्रेश का इशू हो रहा है तो हम क्या करेंगे यहां पर लिंक की जगह यहां पर करते हैं ए टैग की जगह यहां पर रिएक्ट राउटर डम का जो लिंक है उसको यूज करेंगे और यहां पर टू हम देते हैं और इसकी जगह मैं क्या करूंगा यहां पर करते हैं देखिए यहां पर करते हैं स्लैश प्रोडक्ट्स और यहां पर प्रोडक्ट की आईडी देनी है कुछ इस तरह से राउट है हमारा सो प्रोडक्ट ड आईडी सेव करते हैं एक बार रिफ्रेश करते हैं और अभी अगर मैं क्लिक करूं किसी भी प्रोडक्ट के ऊपर तो देखि क्या होगा यह देखिए अभी पेज रिफ्रेश नहीं हुआ यह हमारा रिएक्ट राउटर यहां पर काम कर रहा है अगर बैक भी जाता हूं तो जो हमारा पेज है वह रिफ्रेश नहीं होगा देखिए लेकिन यहां पर अगर आप नोटिस करोगे देखिए मैं जा रहा हूं और फिर से अगर बैक आता हूं तो देखिए हमारी एक रिक्वेस्ट चली गई फिर से जाता हूं फिर से बैक आता हूं तो देखिए फिर से दूसरी रिक्वेस्ट चली गई इसका मतलब यहां पर यह प्रॉब्लम है अभी जैसे ही आप पेज पेजेस के बीच में नेविगेट करते हो तो हमें एक नई रिक्वेस्ट सर्वर के ऊपर भेजने की जरूरत पड़ रही है क्या हम इसको कैश नहीं कर सकते राइट इसको हम अगर कैश करते हैं तो थोड़ी हमारी सर्वर की बैंड विड्थ भी बच जाएगी और जो रिक्वेस्ट जो डाटा है हमारे पेज के ऊपर यहां पर लोडिंग की जरूरत नहीं है तुरंत हमें दिखेगा थोड़ी सी जो वेबसाइट है वो थोड़ी सी स्नैप ी दिखेगी हमारी फास्ट दिखेगी उसके लिए हमें कैशिंग जो है उसको इंप्लीमेंट करना होगा अभी अगर आपने आपके प्रोजेक्ट के अंदर कभी कैशिंग इंप्लीमेंट की है तो आपको पता होगा कि यह कितना कॉम्प्लेक्शन लॉजिक लिख सकते हो जिससे आपकी जो कैशिंग है वह काम करें लेकिन रिएक्ट क्वेरी यह भी प्रॉब्लम हमारा सॉल्व करती है इसको हम देखेंगे अभी एग्जांपल के थ्रू ठीक है इसी के साथ में और एक चीज मैं आपको दिखाता हूं देखिए यहां पर यह अगर कोई एरर आ जाती है तो हमें एप्लीकेशन के अंदर रिक्वायरमेंट यह भी होती है कि हमें रिट्राईंग एक बार फेल होती है तो हम फिर से ट्राई करना चाहेंगे डाटा को फेज करने के लिए लेकिन यहां पर वो नहीं हो रहा है राइट यह भी प्रॉब्लम हमारा जो रिएक्ट क्वेरी है उसको सॉल्व करेगी कैसे करना है चलो अभी क्या करते हैं रिएक्ट क्वेरी जो है उसको यूज करते और देखते कि कैसे इसको हम थोड़ा सा इंप्रूव कर सकते हैं कैसे हम कैशिंग यूज कर सकते हैं उसके अंदर कैसे ऑटो ट्राई जो है वह कर सकते हैं और भी बहुत सारी इंटरेस्टिंग और पावरफुल चीजें हैं तो चलते हैं ब्राउजर के अंदर और आपको जाना है डॉक्यूमेंटेशन के अंदर यहां पर करना है गेट स्टार्टेड और यहां पर आप देख सकते हो कि यह ओवरव्यू सेक्शन है और थोड़ा सा नीचे आएंगे तो यहां पर आप देख सकते हो यह मोटिवेशन जो सेक्शन है ना दोस्तों यह मैं आपको हाईली सजेस्ट करूंगा कि इसको एक बार आप पढ़ लेना क्योंकि इसके अंदर वह सारी रिक्वायर्ड इंफॉर्मेशन आपको मिलेगी समझने के लिए कि यह रिएक्ट क्वेरी है इसको एगजैक्टली क्यों हम यूज करते हैं क्या यह बेनिफिट्स प्रोवाइड करती है यहां पर आप देख सकते हो और जैसे कि देखिए के लिए यहां पर आप देख सकते हो कि जो नॉर्मल क्लाइंट साइड स्टेट होता है हमारा रिडक्स वगैरह जब यूज करते हैं कि यह ए सिंक जब भी सर्वर स्टेट हमें मैनेज करना है तो उतना इफेक्टिवली यह काम नहीं करता है जो क्लाइंट साइड स्टेट मैनेजमेंट होता है तो यहां पर सर्वर स्टेट हम मैनेज कर रहे आप देख सकते हो तो यहां पर दिखाया हुआ है इन्होने कि कैसे सर्वर स्टेट कैसे डिफरेंट होता है क्लाइंट स्टेट से राइट यहां पर रीड कर सकते हो आप और उसके बाद यहां पर देख सकते हो कि कौन सेकन से बेनिफिट्स ये रिएक्ट क्वेरी हमें देती है कैशिंग ये डी डूपिया यह जो रिक्ट क्वेरी इसको अपडेट करती है और उसके बाद डाटा कभी आउट ऑफ डेट हुआ है उसको पता करना यह सारी चीजें हम रिएक्ट क्वेरी की मदद से कर सकते हैं ओके सो बहुत ही पावरफुल यह लाइब्रेरी है अभी देखते हैं कैसे इसको करना है तो इसको यूज करने के लिए सबसे पहले हमें इसको इंस्टॉल करना होगा तो इंस्टॉलेशन के ऊपर चलते हैं और यह देखिए कुछ इस तरह से आपको करना है और अब चलते हैं टर्मिनल के अंदर और यहां पर करते हैं पेस्ट यह इंस्टॉल हो जाएगी और आप देख सकते हो सीडीएन की मदद से भी आप इसको यूज कर सकते हो ओके और बाय द वे यहां पर रिकमेंडेशन भी है इनका अगर आप आपके प्रोजेक्ट के अंदर यूज कर रहे हो तो इनका एक सस का प्लगइन भी आता है वह भी आप यहां पर यूज कर सकते हो इससे आपको जो बेस्ट प्रैक्टिसेस है क्वेरी के बारे में वह यहां पर एनफोर्स हो जाएगी अगर यह प्लगइन यूज करते हो तो चलो आगे बढ़ते हैं यहां पर क्विक स्टार्ट और यहां पर आप देख सकते हो क्वेरीज म्यूटेशंस तो दोस्तों यह जो रिएक्ट क्वेरी है इसके अंदर दो मेन कांसेप्ट है एक है क्वेरीज और दूसरा है म्यूटेशंस जो है यह हम यूज करते हैं जभी भी आपको डाटा को फेच करना होता है हमारे इस केस में अगर हम हमारा यहां पर अगर फेच रिक्वेस्ट देखते हैं तो यह गेट रिक्वेस्ट है हम डाटा को फेच कर रहे हैं तो उस केस में हम क्वेरीज यूज कर सकते हैं और एक होता है जो कि है म्यूटेशन म्यूटेशन हम तभी यूज करते हैं जब भी आपको कुछ डाटा है उसको पोस्ट करना है या फिर डाटा को अपडेट करना है सर्वर के ऊपर वो आपका होता है म्यूटेशन तो इन दोनों को हम यूज करके देखेंगे कैसे यूज करना है मैं आपको दिखाऊंगा सबसे पहले सेट करते हैं यहां पर सेटअप करना होगा हमारे रिएक्ट क्वेरी को तो उसको करने के लिए सबसे पहले यहां पर हमें जो क्वेरी क्लाइंट है उसका इंस्टेंस एक बनाना होता है और यह बनाना है आपको जो आपकी मेन जो एंट्री फाइल है यह आप देख सकते हो चलो कॉपी करते हैं इसको और हमें जाना है हमारे मेन डॉट ज के अंदर और यहां पर अगर आके मैं इसको पेस्ट करता हूं ठीक है क्वेरी क्लाइंट देखिए इसको हमें इंपोर्ट करना होगा तो आप देख सकते हो यह हमें कोई इंपोर्ट यहां पर ऑप्शन नहीं दे रहा है तो यह बेसिकली इंपोर्ट करना है आपको यहां से देखिए मैं इसको कॉपी करता हूं यहां पर चलते हैं ऊपर पेस्ट करते हैं और यह यह जो तीनों चीजें हैं यह हमें अभी नहीं चाहिए हमें चाहिए सिर्फ क्वेरी क्लाइंट और क्वेरी क्लाइंट प्रोवाइडर प्रोवाइडर कैसे यूज करते हैं हम देखिए सिंपल है हमारा जो ऐप है उसको हमें रैप करना होगा इस प्रोवाइडर के अंदर तो यहां पर आते हैं यहां पर मैं पेस्ट करूंगा इसको और डू की जगह इस तरह से हमारा जो राउटर था उसका प्रोवाइडर इसके अंदर इंजेक्ट करते हैं तो बेसिकली हमने हमारे पूरे एप्लीकेशन को हमने क्या किया है रैप किया है ठीक है इस क्वेरी क्लाइंट के अंदर दैट्ची है काम करने के लिए चलो अभी यहां पर हमें यह जो सारी चीजें हमने की थी बड़ा जुगाड़ यहां पर लगाया था सबको हमें रिप्लेस करना है क्वेरी रिएक्ट क्वेरी से कैसे करना है आप यहां पर देख सकते हो सबसे पहले आपको हम क्वेरीज यूज करने वाले तो यहां पर देखिए यह वाला सिंटेक्स आपको यूज करना है तो चलो यहां पर आते हैं और सबसे पहले मैं यहां पर करूंगा देखिए थोड़ी सी जगह कर लेते हैं और यहां पर करते हैं कॉस्ट ठीक है यह ऑब्जेक्ट इसके अंदर से कुछ हम गेट कर करेंगे थोड़ी देर में आपको मैं दिखाऊंगा यूज क्वेरी ठीक है यह हुक हमें यूज करना है आप देख सकते हो यहां पर मैंने इसको इस तरह से इंपोर्ट किया है और इसके अंदर आपको एक ऑब्जेक्ट पास करना है आप देख सकते हो यहां पर इस तरह से एक ऑब्जेक्ट और उसके अंदर दो चीजें हैं मेनली और तीसरा भी आता है उसके बारे में हम देखेंगे थोड़ी देर में लेकिन दो मेन है जो कि है क्वेरी की और दूसरा है क्वेरी फंक्शन तो पहला है क्वेरी की ठीक है और दूसरा है क्वेरी फंक्शन f ए आप देख सकते हो अभी यह जो क्वेरी की है इसका सिंटेक्स कुछ इस तरह से होता है इसके अंदर आप एरे पास करते हो और इसके अंदर कोई भी रैंडम एक स्ट्रिंग आप पास कर सकते हो अभी यह जो स्ट्रिंग होती है यह रिएक्ट क्वेरी यूज करती है कैशिंग के परपस से कैशिंग के लिए जब भी कैशिंग करती है यह हमारा डाटा तो वह यह जो की है इसको यूज किया जाता है उसके लिए तो यहां पर मैं बोलूंगा हम प्रोडक्ट फेच कर रहे तो मैं यहां पर प्रोडक्ट नाम की की यहां पर देता हूं और क्वेरी फंक्शन जो है ना यह वह फंक्शन है जिसकी मदद से डेटा फेच होगा तो हमारे केस में आप देख सकते हो कि यह जो फेच प्रोडक्ट जो फंक्शन है यह एटली हमारी फंक्शन है जो डेटा फेच कर रही है मैं इसको कॉपी करूंगा और यह जो यूज इफेक्ट है यह इसकी अभी हमें जरत नहीं मैं इसको कमेंट करूंगा और इस फंक्शन को बाहर लाता हूं इसके देखिए हमारे कंपोनेंट से बाहर और अभी हमें बस यह दो लाइंस चाहिए इसके अंदर से यह ट्राई कैच वगैरह इसके अंदर कुछ नहीं चाहिए यह रिएक्ट क्वेरी हमारे लिए पूरा हैंडल करेगी प्रॉपर तरीके से हमें जो एरर्स है उसको हमें जो प्रॉमिस रिजेक्ट करके देगी जिसको हम हैंडल करेंगे और यहां पर इस फंक्शन के अंदर से आपको डेटा रिटर्न करना है तो हमारा डटा है डटा डॉट प्रोडक्ट्स आपको याद होगा प्रोडक्ट नाम की की है और अभी यह जो फेच प्रोडक्ट जो फंक्शन है यह सिंपली क्या कर रही है एक प्रॉमिस रिटर्न कर र क्योंकि एसिंग फंक्शन हमेशा प्रॉमिस रिटर्न करती है इसको हमें यहां पर पास करना है इसका रेफरेंस ट्स इट अभी यह जो तीन स्टेट्स है यह यहां पर नहीं चाहिए अ आप बोलोगे ठीक है तो यह प्रोडक्ट्स कहां से मिलेंगे ये इज लोडिंग कहां से मिलेगा एरर कहां से मिलेगा वह हमें मिलेगा यहां से सबसे पहले इज लोडिंग उसके बाद अगर एरर हमें चाहिए तो वह भी मिलेगी और डटा मिलता है इसके अंदर एक स्पेशल की होती है डटा अभी यह जो डाटा है यह हमारा वह डाटा होगा जो हमने यहां से रिटर्न किया है डटा डॉट प्रोडक्ट्स तो यहां पर आप इसको को डाटा या फिर मैं इसको एलियस दूंगा और इसको मैं नाम देता हूं प्रोडक्ट्स ठीक है आप इस तरह से कर सकते हो एलियस दे सकते हो ज भी आप डिस्ट्रक्चर करते हो तो अभी हम ये जो डाटा है उसको प्रोडक्ट्स वेरिएबल से हम यूज कर पाएंगे जो कि हमने ऑलरेडी किया हुआ है देखिए यहां पर मैप लगा रहे हैं हम और ये इज लोडिंग एरर ये सारी चीजें अभी यहां पर आ चुकी है और आप देख सकते हो कि जो हमारा कोड है थोड़ा सा क्लीन हो चुका है इसको भी कमेंट करते हैं सेव करते हैं और चलते हैं ब्राउजर के अंदर और जो यहां पर देखिए मैं फिर से रन करता हूं हमारे सर्वर को एनपीएम रन डेव और अभी चलते हैं ब्राउजर के अंदर और यह देखिए हमारा डाटा यहां पर फेज हो चुका है रिफ्रेश करता हूं लोडिंग और यह डाटा हमारा मिल रहा है देखिए रिफ्रेश लोडिंग देख रहे हो देखिए देखिए लोडिंग दिख रहा है लेफ्ट साइड में यस तो हमारा एप्लीकेशन एगजैक्टली जो बिहेवियर है उसी तरह से काम कर रहा है जो हमारा इस जुगाड़ से कर रहे लेकिन आप देखो अभी कितना जो कोड हमारा कम हो चुका है बस एक हुक हम यहां पर यूज कर रहे हैं और यह जो फंक्शन है यहां पर इसको हम अलग फाइल के अंदर रख सकते हैं वहां से एक्सपोर्ट कर सकते हैं तो कोड की जो ऑर्गेनाइजेशन कोड ऑर्गेनाइज जो है वह अच्छी तरीके से हम मॉड्यूलर यहां पर बना सकते हैं और ऐसा करने से हम कोड को अच्छी तरीके से मेंटेन कर सकते हैं अभी देखिए यहां पर और एक चीज आपको इंपॉर्टेंट चीज दिखाता हूं मैं अगर यहां पर कुछ एरर देखिए मैं थोड़ा सा इस तरह से यह जो है इसको इस तरह से एस लगाता हूं ठीक है और एक एस लगाता हूं तो यह अभी इनवैलिड यूआरएल है तो यहां पर एरर हमें मिलेगी और एरर हम यहां पर डिस्प्ले करेंगे देखिए रिफ्रेश और यहां पर आप देख सकते हो यह देखिए यह लोडिंग यहां पर दिखा रहा है और अगर नेटवर्क के अंदर चलते हैं और एक बार फिर से मैं इस तरह से आपको करके दिखाता हूं देखिए यह सेकंड रिक्वेस्ट यह थर्ड रिक्वेस्ट यह क्या हो रहा है यह क्या हो रहा है देखिए यह एगजैक्टली हो रहा है ट्राई ऑटोमेटिक जो पहले नहीं हो रहा था लेकिन अभी क्या हो रहा है यह ऑटोमेटिक रिा यहां पर हो रहा है देखिए फिर से मैं कर रहा हूं एक बार और यह देखिए यह देखिए एक बार फिर से यह ट्रा होगा एरर आ ग तो फिर से यह ट्रा हो जाएगा देखिए इस तरह से इस तरह से कुछ यह रिट्राईंग आई थिंक डिफॉल्ट तीन बार होता है इसको आप चेंज कर सकते हो आप चाहो तो एक मैंने क्लियर किया था यह दूसरा और तीसरा ठीक है और उसके बाद यहां पर आप देख सकते हो यह सीधा एरर यहां पर दिखा रहा है और यह एरर इसकी वजह से दिखा रहा है अभी देखिए यह जो है ना ऑब्जेक्ट नॉट वैलिड रिएक्ट चाइल्ड क्योंकि अभी यहां पर एरर डॉट मैसेज हमें करना होगा क्योंकि यह एरर ऑब्जेक्ट रहता है अभी देखिए रिफ्रेश और एक बार यह ट्राई सेकंड ट्राई और यह थर्ड रि ट्राई और फिर यह यहां पर तीन रिट्रियल यहां पर डिस्प्ले करेगा ओके अभी देखिए ये फिर से रिफ्रेश यहां पर हो चुका है और यह देखिए तीन बार होके फिर यह एरर यहां पर दिखाएगा ओके सो आप देख सकते हो यहां पर सबसे पहला तो जो रिट्रॉक्सील तो एक बार क्लियर करते हैं और बैक चलता हूं तो यह देखिए यह प्रोडक्ट्स फिर से यहां पर डाटा फेच हो रहा है फिर से मैं चलता हूं फिर से बैक आता हूं फिर से यह डाटा फेच हो रहा है फिर से एक बार चलता हूं फिर से बैक आता हूं फिर यह एक नई रिक्वेस्ट हो रही है तो आप देख सकते हो कि इस पेज के ऊपर आने के बाद ऑटोमेटिक एक रिक्वेस्ट हो रही है सर्वर पर मतलब कैशिंग अभी तक काम नहीं कर रही एक्चुअली मुझे भी ऐसे ही लगा था कि कैशिंग काम नहीं कर रही है इनफैक्ट कैशिंग यहां पर काम कर रही है लेकिन एक इसके अंदर एक ऑप्शन होता है उसके बारे में हमें थोड़ी सी बात करनी होगी जो रिएक्ट क्वेरी है यह बाय डिफॉल्ट जो उसका कैशिंग का जो डाटा होता है उसका एक स्टेल टाइम होता है मतलब कितने देर तक यह डाटा वैलिड रहेगा तो उसका एक यहां पर ऑप्शन होता है स्टेल टाइम बोलके ठीक है यहां पर आप देख सकते हो ये स्टेल टाइम है और यहां पर आप रीड कर सकते हो द टाइम इन मिली सेकंड्स आफ्टर डटा इज कंसीडर्ड स्टेल इसका मतलब यह जो टाइम है उसके होने के बाद आपका डाटा एज स्टेल मार्क किया जाता है इसका मतलब जभी अ रिफेच करना है डाटा तो वह कैश से नहीं लेगा यह क्या करेगा एक नई रिक्वेस्ट करेगा रिएक्ट क्वेरी सर्वर के ऊपर और नया डाटा को यह फेज करेगा लेकिन बाय डिफॉल्ट जो है आप देख सकते हो यह इनफिनिटी इसका बाय डिफॉल्ट जो है वो इसकी वैल्यू है मतलब जैसे डाटा आता है वो तुरंत स्टेल हो जाता है इसका मतलब कैशिंग काम कर र है लेकिन यह कैशिंग कैश जो डाटा है उसको यूज ही नहीं करेगा यह क्या करेगा तुरंत डटा आ गया स्टेल हो गया फिर से नई रिक्वेस्ट जाएगी हर एक बार लेकिन हम यहां पर अगर करेंगे यहां पर मिली सेकंड्स है तो मैं 10 सेकंड का करता हूं तो 10000 यहां पर अगर मैं पास करता हूं और चलते हैं ब्राउजर के अंदर और एक बार मैं फिर से रिफ्रेश करता हूं और चलते हैं इस पेज के ऊपर बैक आते हैं अब देखिए कोई रिक्वेस्ट नहीं हुई फिर से चलते हैं बैक आते है कोई रिक्वेस्ट नहीं कैश डाटा यहां पर है लेकिन 10 सेकंड के बाद जो डाटा हमारा है वो स्टेल होने वाला है ठीक है फिर से क्लिक करते हैं अभी 10 सेकंड हो चुके हैं तो बैक आते हैं तो अभी देखिए 10 सेकंड के बाद जो रिएक्ट क्वेरी है उसने देखा कि जो डाटा हमारा है वो ऑलरेडी स्टेल हुआ हो चुका है मतलब उसको तो यूज नहीं कर सकते तो भैया हम तो हमें तो रिक्वेस्ट करनी पड़ेगी सर्वर के ऊपर और यहां पर आप देख सकते हो उसने सर्वर के ऊपर रिक्वेस्ट की और फिर यह डाटा अगले 10 सेकंड तक यह इसको कैश से यूज करेगा अगर कोई रिक्वेस्ट आती है तो मतलब अगर डाटा की जरूरत होगी तो क्लाइंट के ऊपर राइट तो यह स्टेल टाइम होता है और इसको हर एक क्वेरी के लिए आप इस तरह से सेट कर सकते हो या फिर या फिर आप क्या कर सकते हो इसको जो क्वेरी क्लाइंट है यहां पर भी आप इसको पास कर सकते हो इसके अंदर भी पास कर सकते हो इसको कैसे करना है यहां पर अगर चलते हैं और थोड़ा सा हमें जाकर देखना होगा डॉक्यूमेंटेशन के अंदर देखिए यहां पर करते हैं और सर्च करते हैं चलो स्टेल टाइम ठीक है स्टेल टाइम और यहां पर इसको सर्च करते हैं और देखते हैं कि कैसे हम कर सकते हैं आप देख सकते हो जो हमने यूज किया था कुछ इस तरह से और इसको ग्लोबली भी आप सेट कर सकते हो उसको देखना होगा हमें कहां पर करना है और यह शायद कहां पर तो यहां पर देखा था मैंने एक बार देख लेते हैं फिर से यहां पर करते हैं स्टेल टाइम और देखते हैं कि क्या ऑप्शन यहां पर हमें मिल रहा है यह देखिए ओके यहां पर सर्च करते हैं क्वेरी क्लांट और ओके इसके अंदर कहीं पे भी नहीं दिख रहा है तो मैं एक बार यहां पर इसको ओपन करता हूं और इसके अंदर देखते हैं कि हां यह देखिए यह देखिए कैसे हम कर सकते हैं इसके अंदर हम एक ऑब्जेक्ट पास करते हैं और उसके अंदर फिर डिफॉल्ट ऑप्शंस इस तरह से देखिए यहां पर एक ऑब्जेक्ट फिर उसके अंदर डिफॉल्ट ऑप्शंस और क्वेरीज के लिए स्टेल टाइम हम यहां पर सेट करेंगे जो कि है 10000 मिली सेकंड और यहां से मैं इसको कमेंट करता हूं और अभी देखते हैं कि क्या यह काम कर रहा है चलो रिफ्रेश एक बार मैं रिफ्रेश करता हूं और चलते हैं यहां पर बैक देखिए काम कर रहा है बैक कोई भी रिक्वेस्ट यहां पर नहीं हो रही है बैक नहीं हो रही है ये देखो 10 सेकंड खत्म हो गए तो ये एक नई रिक्वेस्ट हो गई और अभी फिर 10 सेकंड के लिए यह रिक्वेस्ट नहीं होगी अभी यह जो रिक्वेस्ट होती है ना यह कभी-कभी होती है मैं आपको बताता हूं जभी भी डाटा की जरूरत पड़ती है क्लाइंट के ऊपर इसके मल्टीपल रीजंस हो सकते हैं हमारे केस में क्या हुआ था यहां पर हमने कंपोनेंट लोड किया था इसका मतलब जो हमारा जो यूज क्वेरी जो हुक है वह माउंट हो गया राइट वह जैसे ही माउंट होता है तुरंत यह क्या करता है उसको डाटा की जरूरत होती है तो वह क्या करेगा सबसे पहले कैश के अंदर देखेगा डाटा है वह स्टेल तो नहीं हुआ है डाटा अगर नहीं हुआ है तो कैश से लेकर तुरंत हमें रिटर्न करता है अगर वह स्टेल हुआ है डाटा तो वो क्या करता है सर्वर पर एक नई रिक्वेस्ट करके उसको फेच करके हमें देता है और यह एट आपका सर्वर स्टेट इसलिए इसको बोलते सर्वर स्टेट क्योंकि यह सर्वर का डाटा जो है उसको मैनेज करने का य काम करता है और यहां पर जो हमने ऑप्शन अभी यह दिया है ना यह हमने ग्लोबली दिया है इसका मतलब जितनी भी क्वेरीज होगी इसके अंदर सबको यह अप्लाई हो जाएगा अभी इसी के साथ में और कभी-कभी एक तो हुआ यह क्वेरी जबी माउंट हो जाती है तो वह हमें डाटा चाहिए होगा दूसरी एक होता है एक मैं आपको बताता हूं अगर हम फोकस करते हैं विंडो के ऊपर देखिए अगर मैं दूसरे टैब के ऊपर जाता हूं और यहां से फिर से वापस आता हूं तो देखिए यह रिक्वेस्ट होगी मैं क्लियर करता हूं ठीक है एक बार फिर से जाता हूं फिर वापस आता हूं अभी 10 सेकंड हमें वेट करना होगा फिर से आता हूं एक बार फिर से आता हूं यह देखिए रिक्वेस्ट हो गई यह क्यों हो गई क्योंकि हमने हमारे टैब के ऊपर फोकस किया है तो उसकी वजह से भी यह जो रिक्वेस्ट है वो ट्रिगर हो चुकी है ठीक है अगर आप चाहो तो यह जो बिहेवियर है उसको आप क्या कर सकते हो बंद कर सकते हो वह भी आपको ऑप्शंस के अंदर पास करना है और यहां पर और एक इंटरेस्टिंग चीज मैं आपको दिखाना चाहता हूं तो यहां पर अगर चलते हैं तो देखिए लेफ्ट साइड में यहां पर इंपॉर्टेंट डिफॉल्ट्स और यहां पर बहुत सारी इंफॉर्मेशन है कौन सेकन से डिफॉल्ट ऑप्शंस है और यहां पर मैं आपको सजेस्ट करूंगा इसको भी आप एक बार रीड कीजिए क्योंकि ये जो डिफॉल्ट ऑप्शंस है इनकी वजह से बहुत सारे अजीब से बिहेवियर आपके क्वेरी के अंदर दिखेंगे तो हो सकता है कि यह जो डिफॉल्ट ऑप्शंस है उसकी वजह से यह हो रहा ठीक है और यहां पर मैं बात कर रहा था देखिए यह स्टेल क्वेरीज आर रिफ्रेश्ड ऑटोमेटिक इन द बैकग्राउंड वेन कभी ऑटोमेटिक रिफेच होती है स्टेल क्वेरीज अगर नया इंस्टेंस क्वेरी का अगर माउंट होता है जो हमने देखा था या फिर विंडो इज रिफो कस्ड जो हमने करके देखा था आपकी ब्राउजर विंडो अगर अगर रि फोकस हो होती है तो अगर डाटा अगर स्टेल है तो वो ऑटोमेटिक सर्वर के ऊपर रिक्वेस्ट जाती है और द नेटवर्क इज री कनेक्टेड कभी-कभी ऐसा होता है कि आपके कंप्यूटर का नेटवर्क जो है वो डिस्कनेक्ट हो जाता है और फिर से जबी कनेक्ट हो जाता है तो ऑटोमेटिक क्या हो जाएगा कि यह जो नेटवर्क रिक्वेस्ट है वो अ सर्वर के ऊपर रिक्वेस्ट चली जाएगी और यहां पर अगर चाहो तो आप इसको एक इंटरवल में भी आप सेट कर सकते हो मतलब हर एक एक्स मिनट्स के बाद या फिर एक्स टाइम के बाद यह ऑटोमेटिक रिफेच करेगा क्वेरीज को मतलब नॉर्मली जो हम पोलिंग जो करते हैं ना एक इंटरवल के अंदर हम डालते हैं कि क्वेरी ऑटोमेटिक फेच हो जाए तो वह भी हम इसके अंदर कर सकते हैं ठीक है और यहां पर आप देख सकते हो कि और भी ऑप्शंस है वह अगर आपको री रिफेच विंडो फोकस अगर उसको डिसेबल करना है तो आप इसको फॉल्स कर सकते हो और फच ऑन माउंट मतलब जो हम यहां पर बोल बोल रहे थे कि ये जो है ना ये ये देखिए यहां पर यूज के क्वेरी जो है यह माउंट हुई है अगर इसी इसके जैसे ही अगर इसके बाद अगर माउंट हो जाएगी तो दो रिक्वेस्ट नहीं जाएगी सर्वर पे एक ही रिक्वेस्ट जाएगी राइट वो बेसिकली डी डूपिया है यहां पर रिक्वेस्ट का और अगर इस कंपोनेंट के अंदर अगर कोई चाइल्ड कंपोनेंट होता और उसके अंदर भी अगर सेम इस तरह से हम डेटा फेज करते थे यही वाली क्वेरी तो रिक्वेस्ट एक ही जाती थी दो बार रिक्वेस्ट नहीं होती थी नॉर्मली रिएक्ट के अंदर अगर करोगे तो दो रिक्वेस्ट चली जाएगी लेकिन यहां पर वह नहीं होगा यह यहां पर है अगर वह भी बिहेवियर आपको अगर बंद करना है तो आप यहां पर कर सकते हो रिफेच ऑन माउंट फॉल्स यहां पर है नेटवर्क के लिए जो रिकनेक्ट यह बेसिकली यह जो चारों चीजें है इसको आप मैनेज कर सकते हो कुछ इस तरह से यह जो ऑप्शन है यहां पर इस तरह से पास करके ओके सो यहां पर और एक होता है कैश टाइम होता है ये बेसिकली कैश का टाइम है उसके बाद ये गार्बेज कलेक्ट हो जाएगा 5 मिनट के बाद बाय डिफॉल्ट होता है मतलब अगर सेल टाइम आप इसका रखते हो अगर इंफिनिट इनफिनिटी जो है फिर ये कैश 5 मिनट के लिए आपका रहेगा उसके बाद गार्बेज कलेक्ट हो जाएगा इसको भी आप क्या कर सकते हो इसको भी आप सेट कर सकते हो उसके बाद यहां पर यहां पर एक रिट्राईंग अगर आप चाहो तो इसको चेंज कर सकते हो रिट्राईंग रिट्राईंग वो कितने टाइम के बाद होगा डिले जो है दोनों के बा बीच में वो भी आप सेट कर सकते हो राइट लेकिन यहां पर रिकमेंडेटरी ना करें क्योंकि यह होता है एक्सपो शियल बैक ऑफ फंक्शन इसका मतलब यह एक्सपो एनेंशियट्रॉपिक हर एक सेकंड के बाद यह रिट्राईंग में हो रहा है तो दूसरा हो सकता है यह दो सेकंड में होगा और तीसरा रिट्राईंग के बाद होगा मतलब यह एक्सपो शियल उसके अंदर बैक ऑफ फंक्शन होती है उस तरह से व कुछ काम करता है चलो तो इसके ऊपर आके आप पढ़ लेना इसके बारे में ठीक है अभी फिर से चलते हैं यहां पर और हमने देखा कि कैसे आप इसके अंदर ऑप्शन दे सकते हो स्टेल टाइम वगैरह वगैरह अगर ग्लोबली देना है तो इस तरह से आप यहां पर दे सकते हो कौन से ऑप्शन अवे व भी आप देख सकते हो अगर यहां पर कंट्रोल कमांड मैक के ऊपर अगर क्लिक करते हो तो यहां पर डिफॉल्ट ऑप्शन आपको दिखेंगे और इसके अंदर आई बिलीव यह देखि इसके अंदर है क्याक है उसके बारे में आप रीड कर सकते हो यह देखिए रिफेच इंटरवल वगैरह वगैरह य सारी चीजें आप इसके अंदर आप देख सकते हो ओके चलो इसको मैं बंद कर लेता हूं ओके अभी यहां पर और एक चीज है मैं आपको दिखाने वाला हूं जो कि है डेव टूल राट जैसे हम रिडक्स के लिए डेव टूल यूज करते हैं बिल्कुल रिएक्ट क्वेरी के लिए भी एक ड टूल आता है और यहां पर आप देख सकते हो कहां पर है ओके कहां पर है यह थोड़ा सा नीचे आते हैं और यहां पर है डेव टूल क्या ऊपर चला गया एक मिनट फिर से रीड कर लेता हूं ये कहां पर है डिव टूल यह देखिए यहां पर है ओके सो डिव टूल को अलग से हमें इंस्टॉल करना होता है तो जल्दी से चलते हैं कॉपी चलते हैं टर्मिनल के अंदर पेस्ट करते हैं और चलो थोड़ा सा वेट करते हैं और फिर इसको एनपीएम रन डेव करेंगे ओके उसके बाद क्या करना है इसको हमें क्या करना है देखिए इंटरेस्टिंग यहां पर इस तरह से कंपोनेंट मतलब वह जो क्वेरी क्लाइंट प्रोवाइडर था उसके अंदर डालना है इसको चलो चलते हैं मेन जेएस एक्स के अंदर और बस इसके अंदर आपको डालना है और इसको करना है इंपोर्ट इंपोर्ट काम नहीं कर रहा है फॉर सम रीजन चलो मैनुअली करते हैं और यहां पर करते हैं पेस्ट इस तरह से देखिए ट्स इट और अभी अगर चलते हैं ब्राउजर के अंदर और यहां पर अगर करते हैं रिफ्रेश तो अभी आप देख सकते तो यहां पर ये आइकॉन दिखेगा आपको देखिए ये इसको इसको अगर क्लिक करोगे तो कुछ इस तरह का इंटरफेस यहां पर ओपन हो जाएगा और आप देख सकते हो कि यहां पर प्रोडक्ट्स यहां पर दिख रहा है यह आपकी क्वेरी की है जो आपने पास की थी और वो एक आईडेंटिफायर हो जाता है आपके उस क्वेरी के लिए तो कैशिंग के लिए भी ये यूजफुल होता है अब देख सकते हो कि यह जो डाटा है यह ऑलरेडी स्टेल हो चुका है और अगर आप चाहो तो इसको यहां से रिफ्रेश कर सकते हो और आप देख सकते हो ये फ्रेश दिखा रहा है आपको डाटा फ्रेश दिखा रहा है 10 सेकंड वेट करना उसके बाद ऑटोमेटिक य स्टेल हो जाएगा थोड़ा बचा है यह देखिए हो गया स्टेल हो चुका है और यहां पर डेवलपमेंट के अंदर अगर आपको एरर को ट्रिगर करना है टेस्ट करने के लिए वह कर सकते हो लोडिंग ट्रिगर लोडिंग देखिए मैंने ट्रिगर लोडिंग की तो यहां पर आप देख सकते हो देखि ट्रिगर लोडिंग लोडिंग हो गई देखिए इस तरह से और रिसेट कर सकते हो डाटा को वैलिडेट कर सकते हो रिफेच कर सकते हो यहां से ठीक है ये सिर्फ डेवलपमेंट के लिए होता है बस टेस्टिंग के लिए यहां पर प्रोडक्शन में इसको यूज नहीं करते हैं हम और आप देख सकते हो कि यह कुछ इस तरह से प्रोडक्ट्स है चलो अभी मैं इसको क्लोज करता हूं यह एक अच्छी चीज है डे टूल और अभी थोड़ा सा आगे बढ़ते हैं और यहां पर मैं आपको और एक चीज दिखाता हूं ठीक है एक चीज दिखाता हूं जो कि है हमारा प्रोडक्ट कंपोनेंट यहां पर जल्दी से मैं क्या करना ने वाला हूं जल्दी से और एक क्वेरी हम यहां पर लिखने वाले हैं जो प्रोडक्ट डिटेल है उसको फेच करने के लिए ठीक है चलो थोड़ा सा पेस्ट करेंगे कोड और जल्दी से मैं यहां पर ये इंपोर्ट काम क्यों नहीं कर रहा है इंपोर्ट काम नहीं कर रहा है हमारा फॉर सम रीजन ओके चलो यहां पर आते हैं और यहां पर करते हैं इस तरह से और यह प्रोडक्ट नहीं अभी ये प्रोडक्ट हम सिंगल प्रोडक्ट को हमें फेज करना है बाय द वे और यहां पर फेच प्रोडक्ट नाम की फंक्शन यहां पर हमें चाहिए होगी इसको हम कॉपी करेंगे यहां पर आते हैं और यहां पर मैं पेस्ट करता हूं यहां पर जो फिच प्रोडक्ट ठीक है अभी इसके अंदर यह जो है प्रोडक्ट नहीं होगा यह सिर्फ एक डाटा होगा मैं आपको दिखाता हूं कैसे दिखता है यह तो यहां पर यह जो यूआरएल होगा यह कुछ आपका इस तरह से होगा देखिए मैं आपको दिखाता हूं यह कुछ इस तरह से होगा और यहां पर जो आईडी है वह पास करनी है प्रोडक्ट प्रोडक्ट आईडी इस तरह से और इसको यहां पर डॉलर लगाना होगा अभ यह प्रोडक्ट आईडी आएगी कहां से कहां से आएगी इसको मुझे अभी अंदर लेना होगा यहां पर और यह प्रोडक्ट आईडी बेसिकली हम गेट करेंगे यहां से देखिए हमें एक हुक यूज करना है जो कि राउटर से हमें मिलता है परम्स और हुक का नाम यूज पम्स रिएक्ट राउटर डम से यह मिलेगा हमें देखिए मैंने इसको इंपोर्ट किया है और बेसिकली हमें क्या करना है यह जो राउटर है देखिए इसके अंदर जो प्रोडक्ट आईडी जो डायनेमिक पैरामीटर है उसको हमें गेट करना है जो कि है प्रोडक्ट आईडी देखिए इस तरह से कॉलन आपको दिखेगा तो मैं यहां पर बोलूंगा पम्स डॉट प्रोडक्ट आईडी पड प्रोडक्ट आईडी अगर लॉक करके दिखाओ आपको कसोल डलॉ पम्स पम्स परम्स क्या बोलते हैं इसको कमेंट करके मुझे बताना ठीक है चलो और यह जो है ना क्वेरी इसको मैं थोड़ी देर के लिए कमेंट करता हूं पहले परम्स देखते हैं ओके चलो चलते हैं और अभी मैं क्लिक करूंगा देखिए क्लिक करने से पहले थोड़ा सा इसको कंसोल जो है ओपन करते हैं और क्लिक करते हैं तो आप देख सकते हो एक ऑब्जेक्ट है प्रोडक्ट आईडी और इसके अंदर है वन देखिए कुछ ऐसे दिख रहा है यह वन जो है ना यह आपको यूआरएल के अंदर भी दिखेगा देखिए यहां पर डायनामिक है ये अगर मैं दूसरे के ऊपर करता हूं तो यह फोर आ जाएगा देखिए यहां पर फोर है फोर है और यहां पर भी फोर है देखिए नाइस चलो अभी क्या करते हैं डायनामिक प्रोडक्ट आईडी हमें मिल रहा है अभी यह यूआरएल है देखिए अगर इस तरह से अगर करते स्लश प्रोडक्ट स्लश प्रोडक्ट आईडी यह मैंने कहां से लाया यह लाया इसके डॉक्यूमेंटेशन के अंदर से यहां पर अगर यहां पर इसके अंदर तो नहीं है लेकिन आपको एग्जांपल के लिए यहां पर वन करके दिखाता हूं तो आपको जो पहला प्रोडक्ट है वह मिलेगा देखिए एक सिंगल ऑब्जेक्ट है बस वही हम यहां पर कर रहे हैं और अभी यहां पर जो है ना यह प्रोडक्ट जो है ना इसको मैं प्रोडक्ट करता हूं ठीक है प्रोडक्ट या फिर प्रोडक्ट भी रख सकते हैं लेकिन हमारा एक सिंगल प्रोडक्ट है तो मैं इस तरह से करूंगा और यहां पर क्वेरी की के अंदर मैं क्या करूंगा उस प्रोडक्ट की आईडी पास करूंगा इसका रीजन मैं आपको थोड़ी देर में बताऊंगा तो आईडी जो है ना यह कुछ इस तरह से दिखती है तो यहां पर एस सेकंड पैरामीटर में इसको पास करूंगा अभी जबी क्वेरी की जब भी बनेगी और कैशिंग जब भी होगी तो यह दोनों जो एलिमेंट्स है वह यूज हो जाएंगे उसके लिए उसके आइडेंटिफिकेशन यह जो कैश होगा वह सिर्फ इस प्रोडक्ट के लिए होगा अगर कोई नया प्रोडक्ट है तो उसका कैश यहां पर बनेगा नहीं जब तक उसको फेच नहीं किया जाता है क्योंकि उस टाइप की की यहां पर नहीं है चलो इसको करके देखते तभी ज्यादा समझ में आ जाएगा और अभी आप देख सकते हो कि यह प्रोडक्ट है तो मैं यहां पर यहां पर सिंपली ऐसे करूंगा प्रोडक्ट डॉट टाइटल बस दिखाऊंगा आपको ठीक है और इस लोडिंग है तो वह सेम चीज कर सकते हैं मैं जल्दी से यहां से ही कॉपी कर लेता हूं देखिए यह दो चीजें हैं ना यह हमें चाहिए होगी यहां पर मैं पेस्ट करता हूं इसको चलो चलते हैं और यहां पर अभी यह देखिए यह नहीं हुए क्योंकि वो स्टेल टाइम हमारा वो 10 सेकंड का रखा हुआ है फिर से यहां पर आते हैं तो जो फाइव वाला प्रोडक्ट था वो भी फिर से फेश नहीं हुआ क्योंकि वो भी अभी कैश हो चुका है फिर से बैक आते हैं तो 10 सेकंड खत्म हो गए तो वो वो जो है प्रोडक्ट जो है वो अ स्टेल टाइम हो गया उसका खत्म तो यह फिर से फेच हो गया अगर फिर से फाइव नंबर से करते हैं तो यह फिर से फेच हो जाएगा क्योंकि उसका भी 10 मिनट खत्म हो 10 सेकंड खत्म हो गया फिर से बैक करते हैं और फिर से जाते हैं तो अभी नहीं होगा क्योंकि 10 सेकंड अभी तक खत्म नहीं हुआ है लेकिन अभी दूसरा अगर ओपन करते हैं तो यह सेवन का जो है वह रिक्वेस्ट हो जाएगी ई रिक्वेस्ट क्यों उसके लिए अगर हम डेव टूल इसका ओपन करते हैं तो आप देख सकते हो हमारे पास टोटल तीन कैश यहां पर बन चुके हैं एक है प्रोडक्ट्स दूसरा है प्रोडक्ट्स फाइव का आप देख सकते हैं ये कॉमिनेशन बना के उसको एज अ कैशे की यूज करता है उससे वो उसको आइडेंटिफिकेशन हमने फेज किया था पहले ओके सो आप देख सकते हो दोनों के लिए यहां पर हमारे पास यह है और कौन सा डाटा फ्रेश है कौन सा स्टेल हो चुका है कौन सा इन एक्टिव है इन एक्टिव मतलब हम जो स्लैश प्रोडक्ट्स है वहां पर उस पेज के ऊपर नहीं है तो उसको इन एक्टिव बोला जाता है ठीक है फाइव यह भी इन एक्टिव है और यह जो है ना यह स्टेल हो चुका है ठीक है मैं अगर इसको रिफ्रेश करूं तो यह अभी फ्रेश दिखाएगा 10 सेकंड के बाद यह भी हमारा स्टेल हो जाएगा ओके ठीक है यह की आपको समझ में आ गई किसके लिए की होती है यह जो है ना क्वेरी की इस तरह से इसका फायदा बहुत इंपॉर्टेंट देखिए एक कांसेप्ट है यह हम हमारे जो हमारा दूसरा वीडियो आएगा इसके ऊपर जो एडवांस क्वेरी के ऊपर जहां पर हम पेजिनेशन फिल्टर्स वगैरह देखेंगे उसके अंदर आपको इसकी जो पावर है वह पता चलेगे कि यह जो डायनेमिक पैरामीटर्स पास करके कौन सा फायदा होता है ठीक है तो तभी आपको यहां पर पता चलेगा अ के लिए आपको बस यहां पर याद रखना है कि कितनी अच्छी तरीके से यह जो कैशिंग वगैरह है यह अभी काम कर रही है और आप देख सकते हो कि कितना यह देखिए आगे जाता हूं बैक जाता हूं देखिए स्नैप मतलब इतना फास्ट यह हमारा पेज अभी लोड हो रहा है देखिए बैक देखिए एकदम फास्ट है क्यों क्योंकि कैशिंग यहां पर हम यूज कर रहे हैं और इससे यूजर एक्सपीरियंस जो है वह हमारा बढ़ जाता है ओके चलो अभी यह थी क्वेरी इसके बाद हमें और एक कांसेप्ट इसके अंदर जो इंपॉर्टेंट है वह देखनी है जो कि है म्यूटेशन ओके सो चलिए फिर से चलते हैं अ क्विक स्टार्ट पे और यहां पर हमें जाना है डेव टूल में आगे करूंगा इसको वीडियो स्टॉक कंपैरिजन यहां पर बहुत बहुत ही इसका डिटेल डॉक्यूमेंटेशन है अगर आप जाओगे तो सारी चीजें आपको मिलेगी इसके अंदर रिएक्ट क्वेरी ग्राफ क्यूएल टाइप स्क्रिप्ट आप यूज़ कर रहे हो तो भी यह काम करता है बड़ी अच्छी तरीके से हमें देखना है जो कि है म्यूटेशंस यहां पर है देखिए म्यूटेशंस म्यूटेशंस कभी यूज होता है जभी आपको आपके डाटा को आपको स्टोर करना है सर्वर के ऊपर पोस्ट करना है पुट करना है अपडेट डिलीट वगैरह वगैरह उसके लिए यह हम करते हैं तो देखिए इनका एक एग्जांपल है तो हम सिंपली एक बटन बनाएंगे रियल अ मतलब रियल एप्लीकेशन के अंदर आपका यह कोई फॉर्म हो सकता है फॉर्म फिल करते हो आप और वह डाटा आप स्टोर करते हो लेकिन हमारे एग्जांपल के लिए बस एक बटन हम क्रिएट करेंगे तो मैं क्या करूंगा प्रोडक्ट प्रोडक्ट के ऊपर करते हैं हां प्रोडक्ट के ऊपर करते हैं यहां पर करते हैं इस इसके अंदर करते हैं ठीक है सो जल्दी से मैं यहां पर इसको इस तरह से फ्रेगमेंट के अंदर डालता हूं और यहां पर यह बटन ओके और यहां पर क्या करते हैं देखिए यह म्यूटेशन कहां पर आया देखिए सबसे पहले हम म्यूटेशन बनाना होता है तो उसके लिए हम यूज म्यूटेशन यह हुक यूज करते वहां पर यूज क्वेरी किया था यहां पर हम क्या करेंगे यूज म्यूटेशन ठीक है यहां पर करते देखिए यह पराम को मैं हटा देता हूं और यहां पर करते हैं म्यूटेशंस और यहां पर करते हैं यूज म्यूटेशन इस तरह से और इसके अंदर क्या करना है देखिए एक ऑब्जेक्ट होता है और उसके बाद एक म्यूटेशन फंक्शन चलो इसको मैं कॉपी कर लेता हूं और यस पेस्ट करते हैं और यह हमें म्यूटेशन रिटर्न करता है देखिए एक ऑब्जेक्ट रिटर्न करता है म्यूटेशन इस तरह से और आप देख सकते हो कि यहां पर एक्सज यूज हो रहा है लेकिन आप चाहो तो यहां पर फेच यूज करते हैं चलो एक्स यूज हो रहा है तो मैं जल्दी से क्या करता हूं टर्मिनल के अंदर चलते हैं और यहां पर करते हैं एनपीएम इंस्टॉल एक्सस कर लेते हैं इसको इंस्टॉल बहुत ही पावरफुल लाइब्रेरी है एन पीएम रंड मैं आपको हाईली सजेस्ट करूंगा कि एक्स जैसी लाइब्रेरी आपको यूज करनी चाहिए और इसको इंपोर्ट कर लेते हैं इंपोर्ट एक्सस फ्रॉम एक्सस ओके अभी हम यहां पर क्या कर रहे प्रोडक्ट स्टोर कर रहे तो मैं इसको न्यू प्रोडक्ट नाम देता हूं ठीक है थोड़ा सा रिनेम करेंगे यहां पर करते हैं न्यू प्रोडक्ट ओके अभी एंड पॉइंट कौन सा होगा प्रोडक्ट्स देखिए पोस्ट उसके लिए हमें जाना होगा फिर से यह जो डम जशन है उसके अंदर और यहां पर देखते हैं कि प्रोडक्ट्स के अंदर अच्छा ये पूरा डाटा हमें दे रहे हैं यहां पर देखते हैं हम प्रोडक्ट्स यहां पर पोस्ट करने के लिए इसके अंदर कुछ है यहां पर देखते हैं देखिए पोस्ट हां ये देखिए प्रोडक्ट्स स्ल ऐड इस तरह से आप कर सकते हो या फिर अपडेट का करते हैं चलो अपडेट का ट्राई करते हैं क्योंकि हम सिंगल प्रोडक्ट के ऊपर है तो वहां पर ज्यादा यूज केस उस तरह से होती है प्रोडक्ट को अपडेट करना तो मैं यहां पर इस तरह से करता हूं और यह पुट पुट होगा अभी एक्सस पुट और जो प्रोडक्ट्स आईडी है वह हमारे पास ऑलरेडी है तो उसको हम डायनेमिक ली यूज करेंगे जो कि है प्रोडक्ट आईडी राइट हम पैरामीटर से उसको ले रहे हैं प्रोडक्ट आईडी इस तरह से और न्यू प्रोडक्ट जो है ना वैसे नहीं आएगा यह परम्स देखिए इस तरह से परम्स डॉट प्रोडक्ट आईडी और आप देख सकते हो इसके अंदर हमने क्या किया है बस जो फंक्शन है इसके अंदर म्यूटेशन फंक्शन एक दी है एरो फंक्शन और उसके अंदर जो सर्वर रिक्वेस्ट है वह हमने की है यहां पर फेच एक्सस कुछ भी आप यूज करो कोई प्रॉब्लम नहीं इसके अंदर हम वह ऑब्जेक्ट पास कर रहे जिसको हमें अपडेट करना है तो मैं क्या करूंगा यहां पर देखिए आईडी को अपडेट नहीं करूंगा मैं यहां पर जो टाइटल है उसको अपडेट करने की कोशिश करूंगा हमारे प्रोडक्ट के और यहां पर करता हूं अपडेटेड प्रोडक्ट ठीक है अगेन रियल एप्लीकेशन के अंदर यह आपका फॉर्म हो सकता है यहां पर हम हार्ड कोड कर रहे बस एक बटन और हमें क्या करना है म्यूटेशन जो ऑब्जेक्ट है उसके ऊपर मूटेड नाम की मेथड आती है उसको ट्रिगर करना है और उसके अंदर जो ऑब्जेक्ट आप पास करते हो ना वो आपका डाटा यहां पर आपको रिसीव हो जाता है यह जो है यह म्यूटेशन फंक्शन जो है इसके अंदर और फिर इसको हम पास कर रहे देखिए कुछ इस तरह से चलो इसको टेस्ट करके देखते हैं यहां पर आते हैं और और चलते हैं इस पेज के ऊपर और यह बटन है देखिए कोई कलर नहीं है इसका कोई बात नहीं और नेटवर्क टैब को ओपन करते हैं और क्लिक करते हैं और यह एरर यहां पर आ र क्योंकि ओके क्योंकि हमने गलत जो एंड पॉइंट है वो डाला है यहां पर आते है देखिए प्रोडक्ट्स वन यह तो ठीक बता रहा है यहां पर वन चाहिए क्या हमें हमेशा ओके अच्छा यह डमी जसन है तो उसके शायद हमेशा वन पास करना होगा हमें अगर रियल सर्वर होगा तो उसके अंदर यह यहां पर डायनेमिक वैल्यू होगी आपकी जिस प्रोडक्ट को आप अपडेट कर रहे हो चलो वो ट्राई करते हैं तो मैं यहां पर आता हूं और ये जो है ना इसको वन करता हूं चलो देख लेते हैं उस तरह से सेव और करते हैं रिफ्रेश और अभी करते हैं क्रिएट और अगेन यह काम नहीं कर रहा है पुट रिक्वेस्ट हमने डाली थी प्रोडक्ट्स और वन अ आ ओके ओके सो यह ऐसे कैसे काम करेगा हमें पूरा यूआरएल तो देना होगा आईम शर कि यह आपने देखा होगा ओके चलो अभी फिर से एक बार ट्राई करते हैं और आशा करते हैं कि अभी यह हो जाए यस यह देखिए 200 यहां पर हमें मिल रहा है इसका मतलब यह सक्सेस हो चुका है और आप देख सकते हो इसका पेलोड भी हमें मिल रहा है ओके देखो फिर से य देखि सक्सेस और वो डायनामिक करके देखे क्या इसके अंदर अगर इसके अंदर करूं पम्स डॉट प्रोडक्ट आईडी सेव करते हैं और यह भी शायद काम करे चलो क्रिएट यस यह भी काम कर रहा है ओके सो आप देख सकते हो कि इस तरह से आप डाटा को पोस्ट करना मतलब क्रिएट करना किसी भी रिकॉर्ड को या फिर अपडेट करना डिलीट करना यह आप म्यूटेशन की मदद से कर सकते हो और इसके अंदर और भी बहुत सारी चीजें देखि इसके अंदर अगर आप जाओगे डॉक्यूमेंटेशन के अंदर तो यहां पर आप देख सकते हो कि म्यूटेशन के ऊपर व जो स्टेटस है उसका वह भी आ जाता है कि इज लोडिंग है या एरर है यह भी इसको भी आप चेक कर सकते हो देखो कैसे म्यूटेशन डॉट इज लोडिंग ऐसे कर सकते हैं फिर यहां पर मैं क्या करूंगा यहां पर इस तरह से करता हूं देखिए यहां पर पेस्ट और यहां पर करते हैं म्यूटेशन इज लोडिंग ठीक है अगर ऐसा है तो मैं यहां पर करता हूं अपडेटिंग ठीक है रियल लैब में आप क्या कर सकते हो सेविंग या फिर इस टाइप के टेक्स्ट आप देते हो नॉर्मली बटन के ऊपर या स्पिनर आप दे सकते हो और एरर अगर आती है तो उसके लिए मैं यहां पर क्या करूंगा म्यूटेशन देख लेते हैं एक बार फिर से इज एरर इस तरह से आप कर सकते हो सो इज एरर और इसके अंदर कैसे करना है देखिए म्यूटेशन डॉट एरर डट मैसेज ओके नॉर्मली जैसे हम करते हैं तो यहां पर करते हैं एरर वाइल अपडेटिंग और यहां पर एरर जो है उसको दिखाते हैं सो म्यूटेशन डॉट यहां पर करते हैं एरर डॉट मैसेज सिंपल है देखिए बस म्यूटेशन के ऊपर से हमने किया और चाहो तो आप इसको इस तरह से कर सकते थे जैसे हमने क्वेरी के लिए किया था यहां पर आप कर सकते थे म टेट फंक्शन को डिस्ट्रक्चर इ एरर को आप कर सकते थे राइट इस तरह से भी आप कर सकते हैं लेकिन चलो थोड़ा सा डिफरेंट रहना चाहिए इसलिए मैं इस तरह से कर रहा हूं लेकिन आप आपके हिसाब से आप कर सकते हो और अभी अगर फिर से चलते हैं और यहां पर इंटरेस्टिंग थोड़ा सा बड़ा कर लेता हूं ताकि हमें दिखे यह और अगर अभी मैं यहां पर करता हूं क्रिएट तो आप देख स अपडेटेड चलो इसको देखने के लिए अपना जो नेटवर्क है उसको पूरा स्लो कर देते हैं स्लो 3जी और अभी देखिए क्रिएट देखिए अपडेटिंग अभी यह अपडेट हो जाएगा जैसे खत्म होता है तो यह यहां पर ठीक हो जाएगा अगर कुछ एरर आती है तो चलो एरर के लिए मैं यहां पर और एक एस लगा देता हूं ठीक है फेच नहीं यह इसके अंदर करना है और अब देखते हैं और अब देखते हैं प्रोडक्ट ये देखिए अपडेटिंग और और ये देखिए एरर वाइल अपडेटिंग रिक्वेस्ट फेल्ड विद स्टेटस कोड 404 तो आप देख सकते हो कि इसकी पावर आपके रियल एप्लीकेशन के लिए एप्लीकेशन के अंदर यह कितना बेनिफिट बेनिफिशियल हो सकता है क्योंकि पूरी चीजें आपको कुछ मतलब जो मैनुअल प्रॉमिस को रिजेक्ट करना उसको अलग तरीके से हैंडल करना कुछ करने की जरूरत नहीं है आपको यह रेडी जो स्टेटस है वो आपको प्रोवाइड कर देता है देखिए म्यूटेशन के लिए भी और क्वेरीज के लिए भी कुछ इस तरह से यह सारी चीजें काम करती है ठीक है अभी देखिए यहां पर और भी बहुत सारी चीजें हैं यह यह जो क्वेरी है ना रिएक्ट क्वेरी यह बहुत बड़ा प्रोजेक्ट है और बहुत सारे पॉसिबल ऑप्शंस आप इसके अंदर कर सकते हो जो कि इस एक वीडियो के अंदर सारी चीजें दिखाना पॉसिबल नहीं होगा लेकिन मैं आपको फिर भी यहां पर थोड़ा सा बताता हूं देखिए यह पैरेलल क्वेरीज अगर आपको क्वेरीज पैरेलल करनी है वह भी आप कर सकते हो यहां पर डिपेंडेंट क्वेरीज आपको करनी है मतलब एक के ऊपर अगर दूसरी क्वेरी अगर डिपेंडेंट है तो वह भी आप कर सकते हो बैकग्राउंड फेचिंग इंडिकेटर या विंडो फोकस रि फेचिंग यह हमने ऑलरेडी देखा है क्वेरीज को रिट्राईंग अगर करना है इसका ऑप्शन वह भी आप कर सकते हो पजने कर सकते हो इंफिनिट क्वेरी जो होती है आपकी इंफिनिट इनाइट स्क्रोल इसको बोलते हैं आई थिंक अगर उस टाइप का कुछ हमें करना है पेजिनेशन एडवांस टाइप का वो भी आप बड़ी आसानी से इसकी मदद से कर सकते हो आप कमेंट बॉक्स के अंदर मुझे कमेंट करके बताना अगर आपको देखना है उस टाइप का वीडियो जहां पर हम जो एडवांस कांसेप्ट है क्वेरीज के वह अगर देखने है आपको कि कैसे रियल एप्लीकेशन के अंदर यूज होते हैं जो पैज नेशन फिल्टर वगैरह वगैरह तो नीचे कमेंट जरूर कीजिए ठीक है तो मैं और एक वीडियो इसके ऊपर लेकर आऊंगा अभी यहां पर और भी बहुत सारी चीजें है देखिए रोल रेस्टोरेशन यह भी आप कर सकते हो एसएसआर नेक्स जस के अंदर भी इसको यूज कर सकते हैं कैशिंग हमने देखा सस्पेंस के अंदर यूज कर सकते हो लगर भी यह प्रोवाइड करता है टेस्टिंग के अंदर कैसे इसको टेस्ट करना है सारी चीजें इसके अंदर है और यह एक बहुत ही पावरफुल लाइब्रेरी है और मैं आपको हाईली सजेस्ट करूंगा कि आपके प्रोजेक्ट्स के अंदर आज से ही आप इसको यूज करना स्टार्ट करो कोई प्रॉब्लम नहीं आपका जो करंट प्रोजेक्ट जो भी आपका प्रोजेक्ट होगा उसके अंदर स्टार्ट करो पहले एक क्वेरी के अंदर ऐड करके देखो कि काम कैसे हो रहा है राइट बहुत सारे यह ऑप्शंस आपको देती है बहुत सारे फायदे इसके हैं मैं आपको इनकरेज करूंगा कि आप डॉक्यूमेंटेशन के अंदर आ जाओ देखिए सारी चीजें देखो हर एक चीज को ट्राई करके बहुत अच्छा डॉक्यूमेंटेशन है इसके अंदर बहुत सारे स्निप आपको दिए हैं देखो कि कैसे काम हो रहा है यहां पर और एक चीज है देखिए ये हमने नहीं देखा इस तरह से आप इसके फंक्शंस भी दे सकते हो इसको क्या बोलते हैं म्यूटेशन साइड इफेक्ट्स आप बोलते हो इसको तो नॉर्मली क्या करते हो आप इस तरह के हुक्स उसको देते हो जैसे कि ऑन एरर अगर एरर आती है तो क्या करना है कैसे हैंडल करना है तो अलग तरीके से आप कर सकते हो ऑन सक्सेस सक्सेस होने के बाद क्या करना है हो सकता है कि आपका जो कैश है उसको आपको अपडेट करना है बहुत बार यह रिक्वायरमेंट रहती है कि एक नया रिकॉर्ड अपडेट करने के बाद जो आपका पुराना रिकॉर्ड है उसको आपको रिफ्रेश करना होता है राइट तो वह भी आप ऑन सक्सेस जो है उसके अंदर कर सकते हो ऑन सेटल्ड उसके बाद यहां पर आप कुछ चीजें करनी है सारी चीजें सेटल होने के बाद वह भी आप इसके अंदर कर सकते हो देखिए इसके बाद और एक कांसेप्ट है इसके अंदर जो कि है यहां पर अगर हम देखेंगे ऑप्टिमिस्टिक अपडेट्स इसको बोलते हैं उसके बारे में भी थोड़ा सा आप पढ़ लीजिए इसके अंदर यह देखिए ऑप्टिमिस्टिक अपडेट्स यह भी एक बहुत इंपोर्टेंट कांसेप्ट है और रियल लाइफ एप्लीकेशन के अंदर य यूज होती है ठीक है इससे यूजर एक्सपीरियंस जो है बहुत बढ़िया हो जाता है आपके एप्लीकेशन का तो आप इसको भी एक बार देख लेना कोई मतलब डिफिकल्ट नहीं है यह ऑप्टिमिस्टिक मतलब क्या करता है कि सर्वर के ऊपर डाटा स्टोर होने से पहले आपके यूआई के अंदर अपडेट कर देता है और फिर अगर सर्वर के ऊपर डाटा स्टोर होने में कुछ प्रॉब्लम हुआ है तो यूआई से फिर से यह रिवर्स कर लेता है बस इतना सिंपल है लेकिन आप देख लेना इसको ट्राई करके ओके सो ये थी रिएक्ट क्वेरी इसके अंदर हमने जो इसके मेन कांसेप्ट हैं वो बस यहां पर कवर किए बहुत सारी चीजें हैं इसके ऊपर शायद मैं और एक वीडियो लेकर आऊंगा जिसके अंदर एडवांस पेजिनेशन वगैरह कुछ करेंगे यहां पर अभी एक बहुत ही इंपोर्टेंट क्वेश्चन का आंसर मैं यहां पर देना चाहता हूं अभी आपको सवाल पड़ा होगा कि यह जो क्वेरी है यह क्या रिप्लेस कर रही है आपके रिडक्स टूल किट को या फिर जो भी आपकी फ्रंट एंड स्टेट मैनेजमेंट लाइब्रेरीज है जैसे कि मब एक वगैरह क्या इसको ये रिप्लेस करती है और इसका आंसर है नहीं यह दोनों अलग चीजें हैं जो आपका रिडक्स है वह आपकी क्लाइंट साइड स्टेट मैनेजमेंट है और जो जो रिएक्ट क्वेरी है वह आपका सर्वर स्टेट जो एसिंक्रोनस स्टेट है उसको मैनेज करती है बहुत बार ऐसा होता है कि हम रिडक्स को ही यूज़ करते हैं जो एसिंक्रोनस चीजें हैं उसके लिए भी जो थंक वगैरह आता है रिडक्स थंक मिडल वेयर आता है उसकी मदद से करते हैं नॉर्मली राइट लेकिन अगर आपके एप्लीकेशन के अंदर अगर बहुत सारे बहुत सारा डाटा जो एसिंक्रोनस डाटा है जो सर्वर का डाटा है वह अगर आप रिडक्स टूल किट के अंदर यूज कर रहे हो तो आज से आप स्टार्ट कर देना कि जो डाटा है उसको आप क्वेरी के अंदर स्टोर करो और फन फैक्ट यह है कि जो रिडक्स टूल किट है उसके अंदर भी एक रिएक्ट क्वेरी का एक इंप्लीमेंटेशन आता है अ आर्टी के क्वेरी उसको बोलते हैं तो उसके अंदर भी वो वो चीज आप यूज कर सकते हो ठीक है यह सेम कांसेप्ट है वही वहां पर यूज हो रहा है लेकिन अगर रिडक्स आपके पास नहीं है तो आप रिएक्ट क्वेरी को जरूर यूज कीजिए ओके अभी यह रिप्लेस बिल्कुल नहीं करता है अगर आपके पास सर्वर का डाटा है तो आप रिएक्ट क्वेरी को यूज करो और अगर आपके पास आपका जो एप्लीकेशन है वोह उसके अंदर क्लाइंट साइड का बहुत ज्यादा डाटा है अगर जो एडवांस टाइप के एप्लीकेशंस होते हैं जैसे कि कोई म्यूजिक एप्लीकेशन राइट या फिर कोई ग्राफिकल एप्लीकेशन जिसके अंदर बहुत सारा क्लाइंट का स्टेट होता है जो आपको स्टोर करना होता है तो उसके लिए आपको रिडक्स टूल किट की ही जरूरत है ओके ऑलराइट तो उम्मीद करता हूं कि इस वीडियो के अंदर से आपको रिएक्ट क्वेरी के बारे में एटलीस्ट बेसिक आईडिया आ आ चुकी होगी और इस वीडियो से अगर कुछ भी आपको अगर फायदा हुआ है तो इस वीडियो को लाइक करना मत भूलिए और आपके दोस्तों के साथ इसको शेयर जरूर करना और अगर आपने अभी तक इसको सब्सक्राइब नहीं किया है तो चैनल को सब्सक्राइब जरूर कर देना मैं आपसे मिलता हूं एक नई वीडियो के अंदर तब तक के लिए हैप्पी [संगीत] कोडिंग