कल, Netlify ने Netlify ग्राफ़ नामक एक नई सुविधा की घोषणा की। मेरे सहयोगी ने हाल ही में तस्वीर में इसी तरह के लापता टुकड़े को उजागर किया और Netlify ने समाधान की दिशा में एक अच्छा कदम उठाया।
मूल रूप से Netlify ग्राफ़ डेवलपर्स को उनके वेब ऐप्स के लिए GraphQL API कॉल बनाने में मदद करता है। Netlify डैशबोर्ड में GraphQL अनुरोध तैयार करने के बाद आप एक क्लिक के साथ क्लाइंट कोड को अपने प्रोजेक्ट में इंजेक्ट कर सकते हैं।
तृतीय पक्ष सेवा के साथ Netlify फ़ंक्शन का उपयोग करने में एक खामी है। क्लाइंट-साइड अनुरोध पहले Netlify बैकएंड (फ़ंक्शंस) पर जाता है और फिर तृतीय पक्ष सेवा में जाता है। (हमारे उदाहरण में यह Spotify है) यदि ये सेवाएं और अंतिम उपयोगकर्ता एक ही भू-स्थान में नहीं हैं, तो यह यात्रा विलंबता को बहुत बढ़ा देती है।
यदि हम Netlify फ़ंक्शन से डेटा को कैश करने में सक्षम हैं तो हम विलंबता को कम कर सकते हैं। Upstash Global Redis डेटाबेस Netlify API कॉल को कैश करने के लिए एक अच्छा समाधान हो सकता है। Upstash Redis के बहु-क्षेत्रीय प्रतिकृति के लिए धन्यवाद, API प्रतिक्रियाओं को विश्व स्तर पर कैश / दोहराया जा सकता है।
चलिए बहुत ही सरल Spotify एप्लिकेशन बनाते हैं जो Spotify API को कॉल करता है और Upstash Global Redis में API कॉल को कैश करता है।
आइए Next JS Starter App को परिनियोजित करें Netlify कंसोल का उपयोग करना। यह बहुत ही सरल Next.js ऐप है जिसे Netlify के कुछ क्लिक के साथ परिनियोजित किया जा सकता है। आप Next JS स्टार्टर ऐप को परिनियोजित करने के लिए अन्य विकल्पों की जांच कर सकते हैं
चरणों को लागू करने के बाद, अपने नमूना भंडार को अपने स्थानीय में क्लोन करें और netlify dev निष्पादित करें आज्ञा। इसे localhost:8888 पर काम करना चाहिए आपको netlify login निष्पादित करने की आवश्यकता हो सकती है अगर आप पहली बार सेटअप कर रहे हैं।
अब हम Netlify Graph-Spotify API इंटीग्रेशन को कॉन्फ़िगर करेंगे। इस पर नेविगेट करें:
Netlify Console --> Sample App --> Graph --> Connect API or Service --> Spotify 
Spotify कॉन्फ़िगरेशन पृष्ठ में, Authentication सक्षम करें और Graph Explorer , यह API एकीकरण के लिए Spotify के साथ प्रमाणित करेगा।
अब हम GraphQL खेल के मैदान के साथ खेल सकते हैं। Start querying Spotify . पर क्लिक करें बटन। अब हमें प्रोजेक्ट डायरेक्टरी में निम्नलिखित कमांड के साथ netlify-cli चलाने की जरूरत है।
netlify dev --graph
CLI समाप्त होने के बाद, Netlify ग्राफ़ अनुभाग देखें, और आप सक्रिय सत्र देखेंगे। सत्र पर क्लिक करें, और यह GraphQL API के लिए एक खेल का मैदान वातावरण खोलेगा।
यह खेल का मैदान कमाल का है। यह एक विशिष्ट ग्राफ़क्यूएल क्वेरी उत्पन्न करने के लिए बहुत उपयोगी है। मैंने जल्दी से एक Spotify क्वेरी उत्पन्न की है जो Featured Playlists लौटाती है।
query SpotifyFeatured {
spotify {
featuredPlaylists {
name
images {
url
}
description }}}
क्वेरी बनाने के बाद, चलिए कोड जेनरेट करते हैं और हमारे प्रोजेक्ट में इंजेक्ट करते हैं।
Actionsक्लिक करें --> Generate Handler
netlify-cli स्वचालित रूप से SpotifyFeatured.js उत्पन्न करेगा एपीआई निर्देशिका के अंतर्गत फ़ाइल और SpotifyFeaturedForm.jsx pages . के अंतर्गत निर्देशिका।
SpotifyFeatured.js :Netlify फ़ंक्शन परिभाषा जो Netlify बैकएंड से डेटा प्राप्त करती है --> Spotify API
SpotifyFeaturedForm.jsx :एक प्रतिक्रिया घटक जो एक सरल/उदाहरण रूप है जो Netlify फ़ंक्शन को कॉल करता है और प्रतिक्रिया देता है।
बेहतर UI अनुभव देने के लिए मैंने इस घटक के केवल html/css भाग को संपादित किया है। मैं पोस्ट के अंत में अपना कोड साझा करूंगा।
SpotifyFeaturedForm.jsx . शामिल करें index.js का घटक।
import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>
अब मेरे पास मुख्य पृष्ठ में एक बटन है और मैं Spotify API से प्रतिक्रियाएँ प्राप्त कर सकता हूँ। आइए प्रतिक्रियाओं को कैश करें।
Upstash कंसोल से Upstash Global Database बनाएँ
हम ऑटो-जेनरेटेड नेटलिफाई फंक्शन कोड को संशोधित करेंगे (SpotifyFeatured.js ) कोड में एक कोड होता है जो Netlify Backend/Spotify API से डेटा प्राप्त करता है:
const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({ }, {accessToken: accessToken});
हम पहले रेडिस को कैशिंग के लिए जांचेंगे यदि यह मौजूद नहीं है तो हम तृतीय पक्ष सेवा को कॉल करेंगे।
रेडिस के साथ संवाद करने के लिए, मैंने Upstash Redis JS लाइब्रेरी का उपयोग किया है। आप डेटाबेस विवरण पृष्ठ से अपने Upstash Redis REST क्रेडेंशियल प्राप्त कर सकते हैं।
अपना UPSTASH_REDIS_REST_URL बदलें और UPSTASH_REDIS_REST_PASSWORD कोड स्निपेट में।
redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');
if (spotifyData.data == null) {
spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
if (spotifyData.errors) {
console.error(JSON.stringify(spotifyData.errors, null, 2));
} else {
await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
}
} else {
spotifyData = JSON.parse(spotifyData.data)
}
res.setHeader("Content-Type", "application/json");
return res.status(200).json({
spotifyData
});
उपरोक्त कोड स्निपेट में, पहले हम जांचते हैं कि कैश अपस्टैश रेडिस में मौजूद है या नहीं। यदि यह मौजूद है तो कैश का उपयोग करें अन्यथा मूल एपीआई से प्राप्त करें और कैश को अपस्टैश में सहेजें। यह बहुत ही सरल कोड-स्निपेट है और इसे बेहतर/संशोधित किया जा सकता है। उद्देश्य पर।
इसलिए हमने कुछ पंक्तियों के साथ Netlify ग्राफ़ सुविधा में वैश्विक कैश व्यवहार को जोड़ा।
निष्कर्ष
Netlify ग्राफ़ सुविधा सभी डेवलपर्स के लिए अपने कोड में तृतीय पक्ष API सेवाओं को आसानी से एकीकृत करने में सक्षम होगी। Netlify का GraphQL एक्सप्लोरर और कोड इंजेक्शन बहुत मदद करता है।
दूसरी ओर, यदि आप एपीआई प्रतिक्रियाओं को कैश करना चाहते हैं तो अपस्टैश ग्लोबल डेटाबेस प्रतिक्रियाओं को कैशिंग करने का एक समाधान है। अपस्टैश रेडिस डेटाबेस बनाना कुछ ही क्लिक है।
उदाहरण एप्लिकेशन का नवीनतम कोड यहां दिया गया है