Upstash Redis के साथ Netlify Graph प्रदर्शन को ग्लोबल कैश से बढ़ाएं

परिचय

कल, Netlify ने एक नई सुविधा की घोषणा की जिसे Netlify Graph कहा जाता है। मेरे सहकर्मी ने हाल ही में तस्वीर में इसी तरह के लापता टुकड़े को उजागर किया और Netlify ने समाधान की दिशा में एक अच्छा कदम उठाया।

मूल रूप से Netlify Graph डेवलपर्स को उनके वेब ऐप्स के लिए GraphQL API कॉल बनाने में मदद करता है। Netlify डैशबोर्ड में GraphQL अनुरोध तैयार करने के बाद, आप एक क्लिक के साथ क्लाइंट कोड को अपने प्रोजेक्ट में इंजेक्ट कर सकते हैं।

थर्ड-पार्टी सर्विस के साथ Netlify Functions का उपयोग करने में एक कमी है। क्लाइंट-साइड अनुरोध पहले Netlify बैकएंड (Functions) पर जाता है फिर थर्ड-पार्टी सर्विस पर। (हमारे उदाहरण में यह Spotify है) यदि ये सेवाएं और अंतिम उपयोगकर्ता एक ही भौगोलिक स्थान पर नहीं हैं तो यह यात्रा विलंबता को बहुत बढ़ा देती है।

यदि हम Netlify Functions से डेटा कैश कर सकते हैं तो हम विलंबता को कम कर सकते हैं। Upstash ग्लोबल Redis डेटाबेस Netlify API कॉल को कैश करने के लिए एक अच्छा समाधान हो सकता है। Upstash Redis के मल्टी-रीजन रेप्लिकेशन के कारण, API प्रतिक्रियाओं को विश्व स्तर पर कैश/रेप्लिकेट किया जा सकता है।

आइए एक बहुत ही सरल Spotify एप्लिकेशन बनाएं जो Spotify API को कॉल करता है और Upstash ग्लोबल Redis में API कॉल को कैश करता है।

Next JS Starter App को Netlify Console का उपयोग करके डिप्लॉय करें। यह एक बहुत ही सरल 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 Playground के साथ खेल सकते हैं। Start querying Spotify बटन पर क्लिक करें। अब हमें प्रोजेक्ट डायरेक्टरी में निम्नलिखित कमांड के साथ netlify-cli चलाने की आवश्यकता है।

netlify dev --graph

CLI समाप्त होने के बाद, Netlify Graph सेक्शन देखें, और आप सक्रिय सत्र देखेंगे। सत्र पर क्लिक करें, और यह GraphQL API के लिए एक प्लेग्राउंड वातावरण खोलेगा।

यह प्लेग्राउंड बहुत बढ़िया है। एक विशिष्ट GraphQL क्वेरी उत्पन्न करने के लिए यह बहुत उपयोगी है। मैंने जल्दी से एक Spotify क्वेरी उत्पन्न की जो Featured Playlists लौटाती है।

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name images { url } description
    }
  }
}

क्वेरी बनाने के बाद, आइए कोड उत्पन्न करें और अपने प्रोजेक्ट में इंजेक्ट करें।

Actions → Generate Handler पर क्लिक करें।

netlify-cli स्वचालित रूप से api डायरेक्टरी के तहत SpotifyFeatured.js फाइल और pages डायरेक्टरी के तहत SpotifyFeaturedForm.jsx उत्पन्न करेगा।

SpotifyFeatured.js: Netlify फंक्शन परिभाषा जो Netlify बैकएंड → Spotify API से डेटा लाती है।

SpotifyFeaturedForm.jsx: एक React कंपोनेंट जो एक सरल/उदाहरण फॉर्म है जो Netlify फंक्शन को कॉल करता है और प्रतिक्रिया देता है।

मैंने इस कंपोनेंट के केवल HTML/CSS भाग को बेहतर UI अनुभव देने के लिए संपादित किया है। मैं पोस्ट के अंत में अपना कोड साझा करूंगा।

SpotifyFeaturedForm.jsx कंपोनेंट को index.js में शामिल करें।

import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>

अब मेरे पास मुख्य पेज पर एक बटन है और Spotify API से प्रतिक्रियाएं प्राप्त कर सकता हूं। आइए प्रतिक्रियाओं को कैश करें।

Upstash Console से Upstash ग्लोबल डेटाबेस बनाएं।

हम ऑटो-जेनरेटेड Netlify फंक्शन कोड (SpotifyFeatured.js) को संशोधित करेंगे। कोड में एक कोड है जो Netlify बैकएंड/Spotify API से डेटा लाता है:

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});

हम पहले Redis में कैशिंग की जांच करेंगे; यदि यह मौजूद नहीं है तो हम थर्ड-पार्टी सर्विस को कॉल करेंगे।

Redis के साथ संवाद करने के लिए, मैंने 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 });

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

तो हमने कुछ लाइनों के साथ Netlify Graph सुविधा में ग्लोबल कैश व्यवहार जोड़ा।

निष्कर्ष

Netlify Graph सुविधा सभी डेवलपर्स को आसानी से थर्ड-पार्टी API सेवाओं को अपने कोड में इंटीग्रेट करने में सक्षम बनाएगी। Netlify का GraphQL एक्सप्लोरर और कोड इंजेक्शन बहुत मदद करता है।

दूसरी ओर, यदि आप API प्रतिक्रियाओं को कैश करना चाहते हैं तो Upstash ग्लोबल डेटाबेस प्रतिक्रियाओं को कैश करने का एक समाधान है। Upstash Redis डेटाबेस बनाना कुछ क्लिक की बात है।

यहाँ उदाहरण एप्लिकेशन का नवीनतम कोड है।