গতকাল, নেটলিফাই নেটলিফাই গ্রাফ নামে একটি নতুন বৈশিষ্ট্য ঘোষণা করেছে৷ আমার সহকর্মী সম্প্রতি ছবিতে অনুরূপ অনুপস্থিত অংশ হাইলাইট করেছেন এবং নেটলিফাই একটি সমাধানের দিকে একটি ভাল পদক্ষেপ করেছে৷
মূলত নেটলিফাই গ্রাফ ডেভেলপারদের তাদের ওয়েব অ্যাপের জন্য গ্রাফকিউএল এপিআই কল তৈরি করতে সাহায্য করে৷ নেটলিফাই ড্যাশবোর্ডে গ্রাফকিউএল অনুরোধগুলি প্রস্তুত করার পরে আপনি এক ক্লিকে আপনার প্রকল্পে ক্লায়েন্ট কোডটি ইনজেক্ট করতে পারেন৷
একটি 3য় পক্ষের পরিষেবার সাথে Netlify ফাংশনগুলি একসাথে ব্যবহার করার একটি ত্রুটি রয়েছে৷ ক্লায়েন্ট-সাইড অনুরোধ প্রথমে Netlify ব্যাকএন্ড (ফাংশন) এবং তারপর 3য় পক্ষের পরিষেবাতে যায়৷ (আমাদের উদাহরণে এটি Spotify) এই যাত্রায় লেটেন্সি অনেক বেড়ে যায় যদি এই পরিষেবাগুলি এবং শেষ ব্যবহারকারী একই ভূ-অবস্থানে না থাকে৷
যদি আমরা Netlify ফাংশন থেকে ডেটা ক্যাশে করতে সক্ষম হই তাহলে আমরা লেটেন্সি কমিয়ে আনতে পারি। আপস্ট্যাশ গ্লোবাল রেডিস ডাটাবেস নেটলিফাই এপিআই কল ক্যাশে করার একটি ভাল সমাধান হতে পারে। আপস্ট্যাশ রেডিসের মাল্টি রিজিয়ন রেপ্লিকেশনের জন্য ধন্যবাদ, API প্রতিক্রিয়াগুলি বিশ্বব্যাপী ক্যাশে/প্রতিলিপি করা যেতে পারে।
আসুন খুব সাধারণ স্পটিফাই অ্যাপ্লিকেশন তৈরি করি যা স্পটিফাই এপিআই কল করে এবং এপিআই কলগুলিকে আপস্ট্যাশ গ্লোবাল রেডিসে ক্যাশে করে।
চলুন Next JS Starter App স্থাপন করি Netlify কনসোল ব্যবহার করে। এটি খুবই সহজ Next.js অ্যাপ যা Netlify থেকে কয়েক ক্লিকে স্থাপন করা যেতে পারে। আপনি পরবর্তী 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-এর জন্য একটি খেলার মাঠের পরিবেশ খুলবে।
এই খেলার মাঠটি দুর্দান্ত। একটি নির্দিষ্ট GraphQL ক্যোয়ারী তৈরি করা খুবই উপযোগী। আমি দ্রুত একটি Spotify কোয়েরি তৈরি করেছি যা Featured Playlists প্রদান করে।
query SpotifyFeatured {
spotify {
featuredPlaylists {
name
images {
url
}
description }}}
আপনি ক্যোয়ারী তৈরি করার পরে, আসুন কোড তৈরি করি এবং আমাদের প্রকল্পে ইনজেক্ট করি।
Actions এ ক্লিক করুন --> Generate Handler
netlify-cli স্বয়ংক্রিয়ভাবে SpotifyFeatured.js তৈরি করবে api ডিরেক্টরির অধীনে ফাইল এবং SpotifyFeaturedForm.jsx pages অধীনে ডিরেক্টরি।
SpotifyFeatured.js :Netlify ফাংশন সংজ্ঞা যা Netlify ব্যাকএন্ড --> Spotify API
SpotifyFeaturedForm.jsx :একটি প্রতিক্রিয়া উপাদান যা একটি সাধারণ/উদাহরণস্বরূপ যা নেটলিফাই ফাংশনকে কল করে এবং প্রতিক্রিয়া প্রদান করে৷
আমি একটি ভাল UI অভিজ্ঞতা দিতে এই উপাদানটির শুধুমাত্র html/css অংশ সম্পাদনা করেছি। আমি পোস্টের শেষে আমার কোড শেয়ার করব।
SpotifyFeaturedForm.jsx অন্তর্ভুক্ত করুন index.js.
import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>
এখন আমার কাছে মূল পৃষ্ঠায় একটি বোতাম রয়েছে এবং আমি Spotify API থেকে প্রতিক্রিয়া পেতে পারি৷ আসুন প্রতিক্রিয়াগুলি ক্যাশে করি৷
Upstash কনসোল থেকে Upstash গ্লোবাল ডেটাবেস তৈরি করুন
আমরা অটো-জেনারেটেড Netlify ফাংশন কোড (SpotifyFeatured.js সংশোধন করব )কোডটিতে একটি কোড রয়েছে যা নেটলিফাই ব্যাকএন্ড/স্পটিফাই এপিআই থেকে ডেটা নিয়ে আসে:
const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({ }, {accessToken: accessToken});
আমরা প্রথমে ক্যাশে করার জন্য Redis পরীক্ষা করব যদি এটি বিদ্যমান না থাকে তাহলে আমরা 3য় পক্ষের পরিষেবাতে কল করব৷
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 থেকে আনুন এবং ক্যাশে আপস্ট্যাশে সংরক্ষণ করুন। এটি খুবই সাধারণ কোড-স্নিপেট এবং এর ভিত্তিতে উন্নত/পরিবর্তন করা যেতে পারে। উদ্দেশ্যমূলকভাবে।
তাই আমরা কয়েকটি লাইন সহ নেটলিফাই গ্রাফ বৈশিষ্ট্যে গ্লোবাল ক্যাশে আচরণ যুক্ত করেছি।
উপসংহার
নেটলিফাই গ্রাফ বৈশিষ্ট্যটি সমস্ত বিকাশকারীকে তাদের কোডের সাথে 3য় পক্ষের API পরিষেবাগুলিকে সহজেই একীভূত করতে সক্ষম করবে৷ নেটলিফাইয়ের গ্রাফকিউএল এক্সপ্লোরার এবং কোড ইনজেকশন অনেক সাহায্য করে৷
অন্যদিকে, আপনি যদি API প্রতিক্রিয়াগুলি ক্যাশে করতে চান তবে Upstash Global database হল প্রতিক্রিয়াগুলি ক্যাশ করার একটি সমাধান৷ Upstash Redis ডাটাবেস তৈরি করা হল কয়েকটি ক্লিক৷
এখানে উদাহরণ অ্যাপ্লিকেশনের সর্বশেষ কোড
