हे एवरीवन विलकम बाक विलकम टो एनदर वीडियो ऑन नोट जेस सीरीज एंड इस वीडियो में हम बात करने वाले हैं ग्राफ की ओए ठीक है तो यह थिस वॉज दिमोस्ट रिक्वेस्टेड वीडियो तो हर दूसरा कमेंट होता था तो यह वीडियो पूरा क्रैस को ने वाला ग्राफ की ओपर हम समझेंगे क्राफ की होता के ग्राफ की कौन सी प्रॉब्लम को सॉल्व कर रहे तो यहां से तुम्हें एक चोटा सा idea लग रहा होगा that एक query language है, but हम directly इसकी depth में नहीं जाएंगे, directly इसकी technicals में नहीं जाएंगे, पहले हम discuss करेंगे क्या problem है जो GraphQL solve करता है, problem को समझते हैं, and मैं assume करूँगा that तुम्हें simple node.js के अंदर एक hello world तो लिखना आता है, तुम्हें node.js के अंदर simple एक API request के बारे में बता है that एक simple REST API क्या होता है, तो पहले बात करते हैं REST API की, तो let us say that हम पहले बात कर रहे हैं REST API की, तो rest API के case में क्या होता है, let us say that हमारे पास एक user है, तो यह क्या है, यह हमारा एक client है, so यह हमारा हो गया है client, and client के साथ हमारे पास क्या होता है, एक server, तो let us say that हमारे पास यह क्या है, यह एक server है, so this is a node.js server, तो इसको हम बोलते हैं that यह एक node.js का server है, अब हम basically क्या करते हैं, let us let us say that user ने क्या कि एक get request बनाई, ठीक है, तो user ने क्या किया होगा, एक get request बनाई होगी, ठीक है, तो यहाँ पर इसको थोड़ा सा अच्छे से लिख लेते हैं, तो user ने क्या कि एक get request बनाई, let us say slash to-dos के उपर, तो इससे क्या हुआ, basically तुम क्या कर रहे हो, as a client तुम एक request बना हमें क्या मिला हमने सभी के सभी to do's को get कर लिया ठीक है अब to do's कैसा दिखता होगा ठीक है अगर मैं to do का एक structure देखूं तो एक to do कैसा दिखता होगा तो अगर तुम देखोगे तो यहाँ पर एक काम करते हैं यहाँ पर मैं json placeholder open करता हूँ ठीक है तो यहाँ पर practical examples को देखे तो यह हमारे वो to do's हैं, right, तो हमारे पास क्या आ रहे है, हमारे पास एक तो आ रही है user id, ठीक है, तो यहाँ पर हमारे पास एक आ रही है user id, and हमारे पास to do की एक id आ रही है, ठीक है, हमारे पास एक title आ रहा है, okay, and हमारे पास आ रहा है completed true or false, तो completed true or false, ठीक है, तो basically क्या हु और अगर आपके प्रदेश में एक प्रदेश है, तो आपके प्रदेश में एक प्रदेश है, त तुमने ये इतनी सारी चीज़े हैं, जो ये वाली चीज़ा है, जो ये वाली चीज़ा है, जो हमको चाहिए ही नहीं थी, तुमने इसको फिर fetch ही क्यों किया, तुम बात समझो न, तुमने सरवर को बुला, that मुझे सारे to do's हैं, तो ये मतलब क्या हो सकता है, देखो, in real world, किसने create किया, तो ये सारी चीज़े हम फैची क्यूं कर रहे हैं, right, इससे क्या हो रहा है, तुम्हारी bandwidth waste हो रही है, तुम बात समझ जो, तुम network के उपर कितना फालतो का data transfer कर रहे हो, जो तुम्हारे client को required ही नहीं है, let us say that हमारे पास multiple clients हैं, ठीक है, हमारे पास multiple clients हैं, let us say ये client कहता है that मु� उसके बाद यह user कहता है, that मुझे तो सिरफ और सिरफ what would you say है, जो completed है, जब तीनों की अलग-अलग requirement है, तो हम तीनों को same, पूरा का पूरा data उठाके दे देते हैं, तो उससे क्या होता है, हमारी network की जो bandwidth है, वो waste होती है, मानते हो बात, हम बहुत ज़ादा unnecessarily data, network के उपर transfer करते हैं, this was first problem, मैं हर user, मैं हर to do के सामने दिखाना चाहता हूँ that वो किस user ने बनाया, ठीक है, तो अगर तुम यहाँ पर ध्यान से देखोगे हर user के अंदर एक user id है ठीक है, लेकिन मुझे इस user का नाम चीज़े, तो मुझे क्या करना पड़ेगा slash users के उपर, तो यहाँ पर मुझे एक separate call करनी पड़ेगी जिससे मैं उस user की data information तो मैं देखूंगा हर टूडू की user id के हैं, और उसके बाद फिर से call करूँगा, slash user, slash लेटर से जो भी id वान थी, and in return मुझे क्या मिलेगा, मुझे पूरा का पूरा user मिल जाएगा, ठीक है, and अगर तुम यहाँ पर screen पर ध्यान से user देखोगे, address है, phone है, website है, company है, अरे मुझे तो simple user का first, तुम पूरा का पूरा user object return करोगे, एक, छोटी सी चीज, मतलब let us say, तुमने अपने front end पे ना, तुमारा ये जो front end है, तुमें क्या करना था, तुमें यहाँ पर एक तो title दिखाना था, ठीक है, title, and यहाँ पर तुमें user का name दिखाना था, ठीक है, सिर्फ दो चीज़े दिखानी थी, तुमने दो API calls की अलग-अलग, पहले to do's को fetch करो, उसके बाद user's को fetch करो, and उसके बाद भी आए, तो मतलब की, होगा क्या, बड़े application में, तुम्हारा application optimized नहीं है तुम क्या कर रहे हो तुम बहुत फालतों का data fetch कर रहे हो user की memory use कर रहे हो और तुम एक simple सी चीज़ को करने के लिए दो अलग-अलग API calls कर रहे हो और ये तो सिर्फ एक dummy example है real world में और भी बहुत कुछ हो सकता किसने complete किया कब complete हुआ तो तुम्हें बहुत सारी multiple back and forth request बनानी पड़ सकती है तो rest API के अंदर ये problem है तो I hope that तुम्हें problem तो समझ आ गई that कितनी बड़ी problem है तो GraphQL क्या कहता है GraphQL बोलता है that इस problem को मैं solve कर सकता हूँ तो GraphQL कहता है पहली कि जब भी तुम्हें कोई GraphQL request करनी है, ठीक है, REST API request नहीं, जब भी तुम्हें GraphQL के थूँ data मंगवान है, client specify करेगा that उसको क्या data चाहिए, देखो, अगर तुम यहाँ पर यहां से देखोगे, तो जो भी data तुम मांगोगे, तुम्हें वो ही data मिलेगा, लेट असे तुम्हें hero, name, friends, name चाहिए, तुम्हें वो ही data मिलेगा, पहली problem solve हुई, तो मतलब कि अगर मुझे यह सारी चीज़ GraphQL में करनी होगी न, तो मैं क्या बोलूंगा अपने GraphQL server को, कि भाई मेरे server, मुझे ना क्या चाहिए, मुझे to do से ही है, ठीक है, तो कुछ ही सा दिखेगा, कि मुझे ना to do से ही है, ठीक है, मुझे specify करना पड़ेगा, that मुझे to do के अंदर क्या field चाहिए, मुझे to do का title चाहिए, ठीक है, मुझे to do का क्या चाहिए, title, इस request को, जब मैं अपने server को दूँगा, ठीक है, मैं अपने server को दूँगा, तो server, जो मेरा GraphQL server है, वो देखेगा, that इसको सिर्फ title चाहिए, and in return, मेरे पास सिर्फ और सिर्फ क्या आएगा, सिर्फ और सिर्फ title आएगा, तो यह बात तो clear है, तो यानि कि मालों मुझे ID भी चाहिए, मैं यहाँ पर ID आड़ कर दूँगा, तो मेरे पास ID भी आने लग जाएगी, तो पहली चीज़ clear है, that जो भी मुझे चाहिए, वो ही चीज़ हमारे पास return होकर आएगी, इससे क्या होता है, मेरी वो problem solve हो जाती है, that एक तो title चाहिए ठीक है and मुझे इस user का जिसने भी to do बनाया इस user का name चाहिए ठीक है इस user का क्या चाहिए name चाहिए that's it अब जब ये query जब ये पूरा जो query बनाया जब ये server के पास आएगा तो तुम्हारे पास response पता कुछ कैसा आएगा अगर मैं यहाँ पर एक example open करता हूँ let us say तुम्हारे पास response आएगा that एक to do आएगा ठीक है उस to do के अंदर सिर्फ title होगा और title के अंदर एक user होगा, and इस user का सिरफ और सिरफ name होगा, एक single query में, मैंने अपना पूरा data fetch कर लिया, और उतना ही data fetch किया, जितना मुझे चाहिए था, right, so this is the power of GraphQL, ठीक है, so I hope तुम्हे problem statement तो समझ आ गिया होगी, that GraphQL किस problem को solve करता है, Node.js and React को यूज़ करके, ठीक है तो CD करेंगे coding folder के अंदर तो यहाँ पर मैं directory बना लेता हूँ इसको मैं बोलूंगा GraphQL tutorial and CD into GraphQL tutorial ठीक है तो बाद zoom in कर देता हूँ zoom in ठीक है और यहाँ पर हम करते हैं server के लिए और एक मैं बना लेता हूँ client के लिए client के अंदर हमारा react का code जाएगा and back end हमारा किसमें रहेगा craftql के अंदर ठीक है तो back end को पहले setup कर लेता है तो cd into server कर लो तो यहाँ पर हम पहले कर लेते हैं yarn init है तो यह एनिट कर लेते हैं तो यह निट से क्या होगा मेरा सर्वर स्टार्ट हो जाएगा ठीक है तो यहां आड एक्सप्रेस ठीक है एक्सप्रेस को आड कर लो एंड ग्राफिकल सर्वर बनाने के लिए हम यूज करने वाले अपोलो ठीक है तो अपोलो पर एक फ्रेमवर्क है ठीक है अपोलो जिसके साथ ग्राफिकल सर्वर रन कर सकते हैं तो यहां पर हम जाएंगे डवेलॉपर्स है तो गेट स्टार्टर तो यहां पर हमें बस करना क्या है हमें यहां पर इन दो चीजों को इंस्टॉल करना है ठीक है तो यहां पर मै आप और अपने सर्वर एंड ग्राफिकल ठीक है तो इससे क्या होगा मेरा ग्राफिकल सर्वर सेट अपना स्टार्ट हो जाएगा ठीक है और यहां पर हमें एक दो चीजें और इंस्टॉल करनी होंगी ठीक है तो यहां पर एक तो हमें बॉडी पार्सर लगाना है तो यहां आप बॉडी पार्सर ठीक है बॉडी पार्सर एंड हम यहां पर कॉर्स को इंस्टॉल कर लेते हैं तो पहले कॉस्ट एक्सप्रेस इकॉल्स रिक्वायर एक्सप्रेस तो यह हमारा express बन गया उसके बाद const something equals require and यहाँ पर मैं लिलूँगा अपना Apollo server अपोलो server के अंदर हम क्या import करेंगे Apollo server ठीक है उसके बाद हम यहाँ पर body parser को भी import कर लेते हैं body parser equals require and यह मेरा आ गया body parser and उसके बाद हम यहाँ पर कर लेते हैं const course equals require and हम यहाँ पर कर लेते हैं course बहुत बढ़िया और यहां पर हमें एक और चीज इंपोर्ट करने होगी कॉन्स्ट समथिंग इक्वल्स रिक्वायर एंड इसके अंदर मुझे चाहिए आप अपोलो सर्वर स्लाश इसके अंदर हमारे पास एक प्लग इन एक्सप्रेस फोर ठीक है आप तो यहां पर हम हैं एक एसिंक्रोनेस फंक्शन बना लेते हैं एसिंक फंक्शन और इसको मैं बोलूंगा स्टार्ट सर्वर ठीक है कुछ भी फंक्शन है है तो देखो इसके अंदर हम क्या करते हैं पहले एक आप बना लेते हैं जो कि क्या होगा एक एक्सप्रेस एप्लीकेशन होगा नॉर्मल स्टाफ जैसे हम तक अभी तक करते आ रहे हैं एंड सिमिलरली एक सर्वर बना लेते करना है हम यहां पर मिडल वेयर्स यूज कर लेते हैं तो आप डॉट यूज बॉडी पासर डॉट जेसन ठीक है उसके और फिर लास्ट में app.use और यहाँ पर ध्यान से देखना कि अगर कोई भी request graphql slash graphql endpoint पे आती है तो उसको कौन handle करेगा मैं यहाँ पर बोलूँगा express middleware और मैं अपना server यहाँ पर pass कर दूँगा ठीक है तो क्या हुआ यहाँ पर ध्यान से देखते हैं server.start और इसको हमें await भी करना होगा that express बनाया ठीक है server बनाया ठीक है अब मारे middleware आये मैंने मैंने GraphQL server को start किया and मैंने बोला कि अगर कोई भी request simple HTTP अगर कोई भी slash GraphQL पे आती है तो उसको एक GraphQL server handle करेगा ठीक है and finally हम बोल सकते है app.lesson app.lesson port 8000 रख लेते हैं ठीक है and उसके बाद यहाँ पर simply console.log and इसको मैं क्या बोल सकता हूँ server started at port 8000 ठीक है and that's it तो बाहर हम इस function को call कर देते हैं start server को ठीक है start server जो हमने बनाया है अब अगर मैं यहाँ पर करता हूँ node index.js तो you will see that हमारे पास एक error आ गया ठीक है तो error देख लेते हैं क्या error आ गया तो error क्या है basically हम क्या कर रहे हैं ठीक है तो यहाँ पर हमें type definitions and हमें यहाँ पर queries देनी होती है resolvers देनी होते हैं basically हम क्या कर रहे हैं हम यहाँ पर graph scale का use कर रहे हैं तो GraphQL का use करने के लिए GraphQL के server को पता होना चाहिए that तुम क्या-क्या operations उसके उपर perform करोगे ठीक है जैसे तुम express के अंदर routes बनाते हो इसके अंदर हम क्या करते हैं हम इसके अंदर schemas बनाते हैं तो अगर तुम यहाँ पर देखोगे तो एक तो तुम्हें यहाँ पर resolvers देने compulsory है और यहाँ पर type definitions देनी compulsory होती है इसका क्या मतलब तो इस to-do का schema के एक user id है जिसका type के number, एक id है जिसका type के number, title है जो string है, and एक completed है जो boolean है, तो ये type हमें अपने GraphQL server को देना compulsory होता है, कैसे, मैं देखो यहाँ पर क्या कर सकता हूँ, type definition क्या होता है, एक string होता है, ठीक है, एक simple एक string होता है, इस string के अंदर मैं देखो क्या बोलूंगा, मैं यहाँ पर एक type बनाता हूँ, ठीक है, एक type, and इस type का हम नाम देते हैं, to do, ठीक है, तो इस to do के अंदर हमारे पास क्या है user id को छोड़ देते हैं अभी के लिए हमारे पास एक id है हर to do के एक id है जिसका type number है या फिर हम इसको id भी बोल सकते हैं id can be anything हम इसको यहाँ पर integer भी बोल सकते हैं कोई दिक्कत नहीं है title string और अगर मैं यहाँ पर exclamation mark लगाता हूँ यह required field है non null field है ठीक है title है completed हमारे पास क्या है completed and ये completed क्या होगा completed होगा एक boolean ठीक है बहुत बढ़िया ठीक है तो user को मैं अभी import नहीं कर रहा हूँ user को मैं use नहीं कर रहा हूँ उसका मैं reason तो मैं एक minute में बताओंगा तो ये हमारा एक to do बन गया ठीक है उसके बाद हम यहाँ पर एक type बनाएंगे query ठीक है, यह important होता है, query क्या होता है, देखो, अगर तुम्हें GraphQL के server से कुछ भी fetch करना है, तो तुम query करते हो, अगर तुम्हें अपने GraphQL server को कुछ भी देना है, तो तुम क्या करते हो, mutation करते हो, तो हमारे इस case में क्या होगा, हमें एक to do's को fetch करना है, client site पे लेकर आना है, तो that भाई एक query हो सकती है get to do's करके and इसमें हमने to do's का एक error दे देंगे ठीक है अगर मैं इसको run करूँगा अभी देखना क्या होगा यहाँ पर अगर मैं इसको run करता हूँ तो यहाँ पर हमारे पास एक error आ रहा है ठीक है तो error क्या आ रहा है कि यह boolean होता है तो अभी server मेरा start हो गया मतलब हमने तो सिर्फ अभी तक string में यह मतलब एक type दिया है हमने इसका कोई भी resolver नहीं लिखा हमने कोई भी logical function नहीं लिखा कोई बात नहीं अब एक काम करते हैं, यहाँ पर हम localhost 8000 open करते हैं, localhost 8000 slash GraphQL, जैसे ही मैं इसको open करूँगा, you will see that हमारे पास पूरा एक UI है, right, तो इसको एक मिनट ले हटा देते हैं, तो you can see that हमारे पास एक बहुत ही बढ़िया UI है, ठीक है, तो यह कैसे आ रहा है, यह Apollo कर रहा है, तो य इसके अंदर मैं query run कर सकता हूँ, get all to do's, and मुझे इस to do's का सिरफ और सिरफ title चीज़े, बास समझ रहे हो, जो हमने अभी discuss किया था, rest API में तो सब कुछ आता है, लेकिन मैं क्या बोल रहा हूँ, that मुझे सिरफ title चीज़े, लेकिन हमारे पास क्या है, null, क्यों, तो logic हम लिखते हैं resolver के अंदर, that एक query है, query के अंदर, अगर कोई भी user कहता है, get all to do's, तो इस function को execute करना, अभी के लिए मैं क्या करूँगा मैं एक array return करूँगा जिसके अंदर मैं manually id डाल देता हूँ one ठीक है मैं एक title डाल देता हूँ that something something ठीक है ध्यान से देखना something and मैं यहाँ पर क्या करूँगा है मैं यहाँ पर completed खुदी डाल देता हूँ false ठीक है completed खुदी डाल देता हूँ false safe ठीक है दुबारा से get all to do's मेरे पास एक array आया अरे सिर्फ और सिर्फ title क्यों है अरे because मैंने मांगा ही सिर्फ title है ना ठीक है, मैं यहाँ पर completed भी मांग लेता हूँ, तो completed भी आएगा, मैं यहाँ पर ID भी मांग लेता हूँ, तो ID भी आने लग जाएगा, basically, जो मैं मांग रहो, मेरे पास वो ही return होके आ रहे है, बहुत बढ़िया, लेकिन मैं यहाँ पर यह मैं कहां से लेकर आओ, मैं इस API axios आड़ कर लेते हैं, ठीक है, तो make API calls, तो यहाँ add axios ठीक है एक्सीओस आट कर लिया और उसके बाद नोट इंडिक्स ठीक है या फिर यहां पर हम सिंपल क्या बोलेंगे डाट इस में हम बोलेंगे एक्सीओस ठीक है एक्सीओस ऑटोमाटिकली इंपोर्ट हो जाएगा तो इसको हम इस तरह से कर देते हैं एक्सीओस डॉट गिट एक्सीओस के टाइप डेफिनेशन नहीं है क्या तो काम करते हैं यान आट देरेट टाइप और एक्सीओस कैसे यूज होगा डिफॉल्ट अब देखें एक्सीओस डॉट है आपके तो एक्सीओस के टाइप्स हम डालने पड़ेंगे यान आट टाइप्स स्लाश एक्सीओस ठीक है तो आप इनके हमारे लिए टाइप डाल देगा तो चले जाएगा ठीक है एक्सीओस डॉट गेट ठीक है तो किस यूअरल को गिट करना है ठीक है तो तो basically मैं क्या कर रहा हूँ, मैं यहाँ पर एक API call करूँगा to do's के ऊपर and data को return, ठीक है, तो node index.js, अब अगर मैं वापस अपने GraphQL server पर जाता हूँ, and मैं यहाँ पर करूँगा get all to do's, तो मेरे पास सारे to do's आने लग जाएंगे, मेरे पास सारे to do's आ रहे हैं, ठीक है, let us say that म� लेकिन यहाँ पर तुम क्या करेगा, यहाँ पर तुम अपना database operation करेगा, लेकिन database में से कुछ भी जैसे select star from user वगैरा, जो भी तुम्हें यहाँ पर करना है, ठीक है, तो usually यहाँ पर हमारे database operations होते हैं, तो हम क्या कर रहे हैं, हम JSON placeholder का use कर रहे हैं, जिस order में मैं मांगता हूँ, उसी order में मेरे पास data आ रहा है, ठीक है, अब बात करते हैं user की, अब user के लिए कैसे होगा, मैं यहां पर एक और टाइप बनाऊंगा ठीक है एक अलग टाइप ठीक है टाइप एंड इस टाइप का मैं नाम देता हूं यूजर ठीक है एंड नहीं लूंगा बट ठीक है तो हम मेन लेते हैं तो यूजर के आईडी है यूजर का नेम है जो स्ट्रिंग है आप यूजर का कुछ यूजर नेम है जो फिर से क्या स्ट्रिंग है ठीक है तो यह क्या एक स्ट्रिंग है और उसके बाद यूजर की एमेल भी है ठीक है यूजर की क्या एमेल भी है स्ट्रिंग है ठीक है तो काम करते हैं एक यूजर का हम ले लेते हैं फोन ठीक है तो सब कुछ करूंगा तो बहुत टाइम लग जाएगा तो यूजर का एक फोन है ठीक है और उसके बाद यूजर की एक वेबसाइट भी है तो लेटर से दाट यही हमारे पास चीजें हैं जो यूजर के हमारे पास अवेलेबल है ठीक है अब हम क्या कर सकते हैं देखो एक काम फंक्शन ना सकता हूं गेट ऑल यूजर जो क्या करेगा यूजर रिटर्न कर देगा यूजर एक अर्रेड ठीक है उसके बाद हम यहां पर क्या कर सकते हैं मैं यहां पर इसका एक resolver भी बना देता हूँ तो get all users को जब तुम call करोगे तो क्या होगा basically यही function दुबारा से run करेगा लेकिन इस case में हम users को return करेंगे ठीक है तो इस case में हम क्या करेंगे users को return करेंगे ठीक है अगर मैं अपने server को restart करतों and अब देखो मैं क्या कर सकतों मैं यहाँ पर कहा गया मैं यहाँ पर एक और query execute कर सकतों यहाँ पर मैं यहाँ पर बोल सकतों get all users and हर user का मुझे name ला कर दो जब मैं इसको run करूँगा you will see that इसको अगर मैं अब कलाप्स करता हूं तो यह सीधार मेरे पास सारे यूजर्स आ रहे हैं बट प्यूज तो मैं तो कहा था हम इसको कमबाइन कर सकते हैं यह तो फिर से अलग-अलग दो एपीआई कॉल्स हो गई रही ठीक है कोई बात नहीं देखो दिखा जितना ही डाटा ला पाया नहीं जितना हमें चाहिए ठीक है वह टेफ अगर मुझे सिर्फ और सिर्फ एक सिंगल हम यहाँ पर बोल सकते हैं that get user by id, let's say यहाँ पर हम बोल सकते हैं get user, and इस case में तुम मुझे एक id दे सकते हो, which is of type id, and बदले में मैं तुम्हें एक user दूँगा, ठीक है, तो अब देखो हम यहाँ पर क्या कर सकते हैं, मैं यहाँ पर बोल सकता हूँ get user, ठीक है, same function, ठीक है, same function और अब मैं क्या कर सकता हूँ, इस variable को मैं यहाँ पर use कर सकता हूँ, तो मैं आपको बोल सकता हूँ, users slash id, तो सिरफ और सिरफ वो एक user को fetch करके यह ले आएगा, ठीक है, तो मैं तुम्हें दिखाता हूँ कैसे, let us say that मुझे न, अगर तुम यहाँ पर सारे users देखोगे, तो म� तो यहां पर मैं बोलता हूं टू एंड उस यूजर का मुझे एक तो नेम चाहिए सर्च करते हैं तो मेरे पास सेकंड यूजर का सिर्फ नेम आ रहा है ठीक है सिर्फ सेकंड यूजर का नेम आ रहा है एंड इसकी ईमेल भी लेते हैं ठीक है मतलब कि मैंने देखो क्या किया मैंने एक फंक्शन बनाया जो पारामीटर असेप्ट करता है तो यानि कि अब हम देखो यहां पर कुछ ऐसा कर सकते हैं ठीक है कि गैट ऑल टू डू सो कर लो हर टू डू की ना आ� लेट से हमें ID तो नहीं चाहिए, हमें सिर्फ to do का title चाहिए, completed चाहिए, and मैं यहाँ पर क्या कर सकता हूँ, if you remember, user के अंदर एक user ID भी थी, ठीक है, तो अगर मैं उसको add करता हूँ, अगर मैं यहाँ पर user ID भी add करता हूँ, which is of type ID again, ठीक है, and मैं इसको restart करता हूँ, तो तुम एक चीज क्या कर सकते हो, तुम यहाँ पर user ID को भी fetch कर सकते हो, मुझे पता है कि इसकी user ID बानना है, तो मैं एक different query run कर सकता हूँ, ठीक है, तो यह गैट यूजर ठीक है गैट यूजर एंड इस यूजर का लेट से मुझे सिर्फ नेम चाहिए एंड इस यूजर के आईडी में यहां पर टू बास कर सकता हूं है ना तो एक सेकंड इसको हम थोड़ा करेट करते हैं ठीक है तो यह वेरियल चाहिए तो इसको वह आ गया बट स्टिल प्रॉब्लम क्या है ना था हम दो अलग-अलग एक पर कॉल्स करें अ तो इस case में हम क्या कर सकते हैं, ध्यान से देखना, हम यहाँ पर बोल सकते हैं, that user id तो है यह, user id के जगह हम यहाँ पर user को भी fetch कर सकते हैं, जिसका type क्या है, जिसका type है user, wow, लेकिन, लेकिन GraphQL को पता कैसे लगेगा, कौन से to do का कौन user है, अरे वो हम ही तो बताएंगे, तो द अगर to do का कोई user fetch करने का try करता है, अगर कोई भी to do fetch करने का try करता है, तो तुम्हें क्या करना है, जो भी to do तुम fetch कर रहे हो, जो भी तुम to do fetch कर रहे हो, वो to do तुम्हारे पास यहाँ पर available होगा, तो let's say that ठीक है, तुम इसका user return कर सकते हो, कैसे, अगर मैं इसी code को copy करूँ, और इसको हम async कर देते हैं, नॉट इसको, इसको हम async कर देते हैं, ठीक है, and मैं क्या कर सकता हूँ, मैं इस to do को, ठीक है, इस to do की ID ले सकता हूँ, ठीक है, save करते हैं, अब अगर मैं अपने server को restart करता हूँ, तो देखना क्या होगा, मुझे यहाँ पर कुछ करने की ज़रूरत नहीं है, सब कुछ simple, मैंने query की, get all to do's, मुझे ना to do's का title चाहिए, completed चाहिए, और इस to do का user का, इस to do के user का, मुझे नाम चाहिए, ठीक है, ध्यान से देख रहे हो मैं क्या कर रहा हूँ देखो title चाहिए completed चाहिए और इस user का name चाहिए search करते हैं तो देखो क्या होगा तो हमारी nested queries run होगी तो इस to do को बना है इस user ने इस to do को बना है इस user ने अगर तुम ध्यान से जाके देखते हो तो भाई इस user को किस user ने बना है ज और लेटर से मुझे user की email भी चाहिए और मुझे user का phone number भी चाहिए भाई जो मांगोगे तुम्हें वो return होके आएगा तुम्हारे style के अंदर एक API call के अंदर मुझे जैसा data चीज़े था मैंने वैसा data fetch कर लिया तो basically मैंने किया क्या type definitions दे दी ठीक है मतलब कि इसको पता है कि user एक user है लिक्टिन इसको resolve कैसे करना है उसको ग्राफ के लिए नहीं पता है, तो मैंने क्या बोला कि अगर टूडू के अंदर कोई भी यूजर मांगता है तुमसे, तो क्या करना, ये टूडू कहां से आ रहा है, बेसिकली ये जो पूरा टूडू है न, तो ग्राफ के लिए कहता है, बाई मैं क्या करूँगा, मैं तेरे क बहुत इजी है ठीक है तो वह मैं तुम्हें करके दिखा देता हूं ठीक है तो मैं तुम्हें रियाट में करके दिखा देता हूं ठीक है तो मतलब तरीका से में रहता है ठीक है तो यहां पर हम करते हैं कंट्रोल सी तो सीडी डॉट एंड सीडी इंटू दिक्लाइट तो यहां पर हम कर सकते हैं यान क्रिएट रियाक्ट आप ठीक है तो एंटर करते हैं तो यहां पर कुछ तो एरर आया एक सेकंड और जस्ट सेकंड मैंने कुछ खराब कर दिया अ तो terminal के अंदर हमारे पास कुछ error आ गया ठीक है तो यह बोल रहा है that यहां create react app dot लिखना था तो यह हमारा react app बना देगा ठीक है तो एक wait करते है हमारा react app बन रहा है तो उसके लिए देखो हमें क्या करना है हमें Apollo server के जगा हम Apollo client का use करेंगे Apollo client का तो introduction to Apollo client get started but I hope that you may, ये चीज बहुत must लग रही होगी, बहुत अच्छे से clear हो रही होगी, ठीक है, तो एक सेकेन हम अपने client पे भी इसको implement करते, बहुत बढ़िया, बन गया, तो अब करते हैं, yarn add, Apollo client and GraphQL, ठीक है, तो ये दो चीज़े हमें add करनी है, हमारे client के उपर, so you will see that, ये हमारा हो गया, done, documentation पढ़ना है, nothing else, तो बहुत easy है, तो एक काम करते हैं, साथ में हम इसको yarn start भी कर लेते हैं, yarn start, enter, तो yarn start करते क्या होगा, मेरा जो react का server है, वो start हो जाएगा, ठीक है, तो react का server start हुआ, ठीक है, तो अब हमें देखो क्या करना है, हमें यहाँ पर करना है, install हमने कर लिया है, sorry यह तो server है, इसको बंद कर लेते हैं, नितो मैं confused हो जाओंगा, इसको भी बंद कर लेते हैं, तो यहाँ पर हमें इस client को use करना है, तो client को use करने के लिए, हमें basically क्या करना है, इस client, पहले client बना लेते हैं, तो मैं तुम्हे app.js के अंदर बना के दिखाता हूँ, इंपोर्ट थे इंपोर्ट सम्थिंग फ्रॉम अभी तो हमने इंपोर्ट के पोलो क्लाइंट इसके अंदर हम क्या कर सकते हैं पोलो क्लाइंट ले आएंगे ठीक है तो यहां पर हमें क्लाइंट बना लेते हैं कॉस्ट क्लाइंट इस इकॉल्स टू न्यू देंगे यूआर किसका हमारे बैक इंड का मारा बैक इंड कारण करें एसटीपी स्लाश्ट लोकल होस्ट और उसके बाद एट थाउजन के ऊपर रन कर रहा है राइट यहीं पे तो run कर रहे है, and slash graphql, ठीक है, उसके बाद cache दे देते हैं, कि हमें, मतलब चीजों को cache कहाँ पे करना है, in memory cache, ठीक है, तो in memory cache हम यहाँ पर दे देते हैं, that's it, अब देखो हम क्या करेंगे, ठीक है, अब हम अपनी query लिख लेते हैं पहले, ठीक है, तो हम यहाँ पर कुछ भी ठीक है उसके बाद get to do's के लिए हमें बस ये query को copy कर लेना है ठीक है query को copy and यहाँ पर paste देखो मैं क्या कर रहा हूँ get to do's ये get to do's कहां से आ रहा है देखो ये तो एक कुछ भी एक friendly name है इसको ignore करो get to do's कहां से आ रहा है क्यूंकि हमारे back end के अंदर इसका नाम के get to do's ठीक है उसके अंदर मुझे title और completed चाहिए user का मुझे name चाहिए that's it user का मुझे बस name ही चाहिए that's it को इसको यहां पर एक्सीट करना है कैसे करना है डॉक्यूमेंटेशन पड़ेंगे ठीक है तो हम यहां पर बोलेंगे क्लाइंट डॉट क्वेरी इसके अनुम अपनी क्वेरी पास कर देंगे ठीक है जी क्यों के साथ आप तो मैं तुम्हें करके और इसको भी हम यहाँ पर इंपोर्ट कर लेते हैं, ठीक है, अब मैं क्या कर सकता हूँ, मैं यहाँ पर एक चीज को इंपोर्ट करूँगा, Apollo Provider, ठीक है, Apollo Provider, और मैं अपने पूरे application को Apollo Provider के अंदर wrap कर दूँगा, ठीक है, और इसके अंदर मैं क्या दूँगा, Client, और यह म तो use query को use करके what we can do is use query को use करके तो इन्होंने कहाँ पर दिखाया तो use query उसके अंदर हमें अपने query देनी है ठीक है तो एक काम करते हैं यहाँ पर हम अपने query लिख लेते हैं so cost query equals gql ठीक है तो आप जी क्यों ल का भी उसका तो तुम इसको यादा simple string भी दे सकते हो तो इसके ठीक है इसके अंदर हमें क्या हमें क्वेरी नहीं करनी इसके अंदर हमें यह कॉपी करना है तो हमारे operation का name के get to do's ठीक है मुझे to do's का title चाहिए मुझे जानना है कि वो to do completed है या नहीं है और मुझे उस to do का user चाहिए user का मुझे क्या चाहिए user की मुझे id चाहिए let's say और मु� something equals use query और इसके अंदर हम अपनी query पास कर देंगे ठीक है तो इसके अंदर हमारे पास क्या आएगा इसके अंदर हमारे पास एक तो data आएगा actual data जो fetch हो रहा है और इसके अंदर एक आयता है loading जब तक ये data load हो रहा है अब देखो हम क्या कर सकते हैं ठीक है अब हम इस पूरे code को हटा देते हैं तो मैं क्या बोलूंगा that अगर तो loading है ठीक है if if loading तो तब तक हम क्या कर सकते हैं एक h1 के अंदर हम एक loading state दिखा सकते हैं ठीक है और अगर हमारा data आ जाता है, तो हम अभी के लिए json.shrinkify करके data दिखा देते हैं, कुछ UI नहीं है, कोई कुछ ही नहीं है, तो अगर मैं अपने back, refresh करता हूँ यहाँ पे, and इसको हम करते हैं inspect, ठीक है, तो कुछ error तो नहीं आया, enter, तो हमारा आ गया fail to fetch, क्यों आया fail to fetch, तो error हमें कहां दिखेगा, because हमारा back-end run नहीं कर रहा है, तो एक और server बनाते हैं, तो मतलब एक और टर्मिनल बनाते हैं तो CD डॉट CD सर्वर एंड यहां पर हमें करना है नोट इंडेक्स टॉट जेस ठीक है अब चल जाएगा तो रिफ्रेश करो तो लोडिंग देखो यहां से लोडिंग और उसके बाद डाटा आ गया तो अगर तुम यहां पर देखोगे डाटा तो हमारे पास एरर आ गया 404 का ओके क्यों आया एक एरर आया 404 का ठीक है इसको बाद में देखते हैं पर यू कैन सी थे हमारे पास डाटा तो आ रहा है यूजर भी आ रहा है तो कुछ ऐसी key होगी जो हमने दे दी लिकिन वो exist नहीं करती तो एक काम करते हैं तो you can see that हमारी इस query के अंदर हम ID दे रहे हैं हम name दे रहे हैं right एक काम करते हैं इस query को मैं पहले अपने browser के अंदर run करते देता हूँ copy और इसको हम यहाँ पर करते हैं paste and run तो यहाँ पर तो सही because rate limiting hit हो जाते है, because अभी कहाँ है, हम data कहाँ से fetch कर रहे हैं, एक third party server से fetch कर रहे हैं, and हम क्या करते हैं, बहुत rapidly calls कर रहे हैं, जिसके कारण क्या हो रहा है, हमारा जो server है, वो हमें एक limited data ही दे रहा है, ठीक है, but it's okay, ठीक है, it's okay, because production पे तो ये data कहाँ से आएगा, तो data आ रहा है undefined okay, तो data undefined क्यों आ रहा है तो इस चीज़ को debug करते हैं that हमारा जो data है यह undefined क्यों आ रहा है तो यहाँ पर error data actually हमारे पास errors आ रहे हैं that's why data is coming to be undefined इस चीज़ को कैसे resolve करें मतलब because क्या है repetitively बहुत ज़ादा calls आ रहे हैं correct, या हर to do के उपर ID है ना user ID because user ID ही नहीं होगा या फिर उसका user नहीं होगा कुछ इस तरीके का error है जिसके कारण यह problem आ रही है I suppose that ठीक है तो यहां तक तो यह ठीक है और अगर मैं यहां पर आता हूँ ठीक है तो यह तो बहुत बढ़िया है तो अगर हम users को देखते तो यूजर्स के अंदर क्या चल रहा है? यूजर्स के अंदर बहुत कुछ है तो यूजर्स भी हमारे पास सारे हैं ही हैं तो एक बार चेक करते हैं यह एरर क्यों आ रहा है इंटरनल सर्वर एरर रिक्वेस्ट फिल्ड विद स्टाटस कोड 404 ठीक है तो रिक्वेस्ट स्टेटस 404 आ रहा है तो एम शॉर यार ये ना रेट लिमिटिंग हो रहा है ठीक है ये ना रेट लिमिटिंग हिट ओर है यहाँ पर तो इसको मतलब किस तरह से रिजॉल्व करें या तो एक काम करते है है तो लेट असे दाट हमारे पास नहीं यहां पर यूजर है तो इसको कॉपी कर लेते हैं तो मैं क्या करूंगा मैं सारी चीज को कॉपी कर लूंगा देखना यहां से विकॉल्स मैंने चाहता था टमेटी आई कॉल्स करो ठीक है तो मैं यहां पर काम करता हूं इस पूरे को कॉपी आवट आई विल डू इसमें यहां पर ना एक यूजर डॉट जीएस फाइल बना लेते हैं या तो तुम कह सकते हो तो यह ना एक तरह का हमारा फेक डाटाबेस है ठीक है तो यह डाटाबेस बन गया सिमिलरली मैं यहां पर एक बना लेता हूं टू डॉट जीएस ठीक है टू डॉट जीएस थे एंड सिमिलियल में टूडूस को भी कॉपी कर लेता हूँ, फिर मेरे पास न कुछ दिक्कत नहीं रहेगी कि मैं बार-बार API कॉल कर रहा हूँ, ठीक है, तो इसको हम कर लेते हैं पूरा का पूरा नीचे तक कॉपी, ठीक है, तो कुछ जादा नहीं है, 20-30 entries ही हैं, तो ठीक है नहीं है ना एक्सपोर्ट नहीं किया तो एक्सपोर्ट एक एक्सपोर्ट डॉट कर देते हैं एक्सपोर्ट डॉट यूजर ठीक है सिमिलरली यहां पर भी हमें क्या करना होगा ऊपर जाकर एक्सपोर्ट टू कि तो इसको मैं बोला हूं आपके पास टू ट� आप गेट ऑल टूडूस के अंदर हम क्या करेंगे बस रिटर्न कर देते हैं सिंपली ठीक है सिंपली रिटर्न कर दो जितने भी तुम्हारे टूडूस है ठीक है गेट ऑल यूजर्स के अंदर सिंपली क्या करो सिंपली रिटर्न कर दो जितने हमारे यूजर्स है एंड गेट ऑइजर गेट यूजर बाई आईडी है ना तो इसके अंदर हम क्या कर सकते हैं यूजर डॉट फाइंड ठीक है डॉट फाइंड ई जहां पर ई डॉट आईडी इकल्स आईडी तो यानि कि लीनियर सर्च ठीक है तो तो यहां पर भी हम क्या करेंगे इस चीज को कर लेते हैं कॉपी एंड इसी चीज को मैं यहां पर भी कर दूंगा पेस्ट तो एसिंक्रोनस हटा दो आप यहां पर यह कर दो पेस्ट ठीक है तो अब एक बार रिस्टर करके चलाकर देख लेते हैं तो यह तो तो कहीं ना कहीं ID होगा नहीं, नीचे, मतलब maybe हो सकता है कहीं ना कहीं नहीं होगा, यहाँ पर to do.id आएगा, sorry my bad, ठीक है तो यहाँ पर to do.id आएगा, ठीक है, तो दुबारा से इसको restart करते हैं, ठीक है, और अब अगर मैं करता हूँ get all to do's, तो everything is working good, and error नहीं आ रहा, good, अ� तो app.js के अंदर हमें क्या करना है, इसको हटा दो, and इस CSS file को भी हटा दो, यह center कर रही है data को, तो देखो, मैं यहाँ पर क्या कर सकता हूँ, मैं यहाँ पर एक table बना सकता हूँ, ठीक है, मैं यहाँ पर एक table बना सकता हूँ, तो dynamically, table के अंदर हम t body से start कर लेना directly, ठीक है, तो मैं बोलूँगा data.getAllTodos, ठीक है, getTodos, ठीक है, getTodos, ठीक है, इसके उपर dot map for each to do, तो आपके लिए एक टेबल रो बनाएंगे टेबल रो के अंदर एक टीडी बना लेते हैं टीडी के अंदर हम बिस्किली हमारे क्या था हम पहले चाहते हैं तो उसका टाइटल क्या है तो टाइटल क्या होने वाले है टूडू डॉट टाइटल तो यहां से देखो टूडू का और इसको हम कर लेते हैं सेव तो अगर मैं अपना सर्वर देखता हूं तो यहां पर आ रहा है एरर तो कह रहे हैं टूडू डॉट यूजर डॉट नेम नहीं है ठीक है टूडू डॉट यूजर डॉट नेम नहीं आ रहा क्यों आ एक बार यहां पर चेक कर लेते हैं दाट यह आया ठीक है टूडू के अंदर आ रहा है यूजर का डॉट नेम आतो रहा है कहां एरर आ रहा है वह तो अब हमारा ये table आ रहा है, ठीक है, as you can see, that इस to do को इस user ने बनाया, अच्छा वो इसलिए error आ रहा है, तो देखो, ये users एक्जिस्टी नहीं करते, ठीक है, इतना सारी users हैं, जो एक्जिस्टी नहीं करते, बट ठीक है, मतलब that is something from JSON placeholder, but you got the point, किस ठीक है एंड इस ग्राफ क्योल ठीक है तो बेसिकली इस चीज को कहा जाता है ग्राफ क्योल तो इसका कोड तो मैं डिस्क्रिप्शन में मिल जाएगा ठीक है इसका लिंक तो एक बार मैं तुम्हें दुबारा से दिखा दो तो एक कोड का एक पसंद आया तो ग्राफिकल छोटी चीज नहीं है अब कंपनी लाइक फेसबुक स्पेसिक्स ट्विटर यह सब ग्राफिकल यूज करते हैं ठीक है अगर तुम एक ग्राफिकल पसंद आया तुम ग्राफिकल के साथ एक फुल स्टैक अप्लीकेशन बनाना वर्स इंजीनियरिंग करना चाहते हो तो यह देखते हो तो यह देखता हूं तो कोई भी एक fetch लगा लेते हैं, तो you can see that क्या payload जाता है, तो यह operation जाता है, and किस तरह का payload आता है तो इसके अंदर एक course है that is on Twitter clone, तो यह जो Twitter clone है, पूरा एक full stack Twitter clone, यह इस tech stack पर बना जाता है, जिसके अंदर हम GraphQL को use करते हैं, back end पर, and front end पर, हम next years को use करते हैं तो अगर तुम्हें GraphQL interesting लग रहा है तो तुम इस course को check out कर सकते हो ठीक है, and इस course के उपर तुम्हें 25% का off मिल दाएगा, अगर तुम link description में देखोगे, तो वो टेक्स टो इस तो मिस्सेज को चेक आउट करो तो में ग्राफ क्यों यूज करके को स्टैक अप्लीकेशन बना सकते हो ठीक है आपको इसका लिंक में डिस्क्रिप्शन में दे दूंगा