মূলঃ How to Fetch Data in React: Cheat Sheet + Examples, লেখকঃ Reed Barger

React এ কোন এক্সটার্নাল API থেকে ডেটা নিয়ে আসার জন্য একাধিক উপায় আছে। কিন্তু ২০২১ এ এসে আপনার কোন পদ্ধতিটি ব্যবহার করা উচিৎ?

এই টিউটোরিয়ালে, আমরা React এ REST API এর কাছে HTTP রিকুয়েস্ট করে ডেটা নিয়ে আসার সবথেকে বহুল ব্যবহৃত প্যাটার্নগুলি দেখবো।

ডেটা নিয়ে আসার উপায়ের পাশাপাশি, আমরা ডেটা আনার সময় লোডিং এবং এরর স্টেট হ্যান্ডেল করার উপায়ও শিখবো।

চলুন শুরু করা যাক!

এখানে সবগুলি উদাহরণের জন্য আমরা জনপ্রিয় JSON Placeholder API ব্যবহার করবো তবে আপনি চাইলে আপনার নিজের বানানো কোন API বা অন্য যে কোন পাবলিক API-ও ব্যবহার করতে পারেন।

১. Fetch API ব্যবহার করে কিভাবে React এ ডেটা নিয়ে আসা যায়

React এ ডেটা নিয়ে আসার সবথেকে সহজ উপায় হল Fetch API।

Fetch API একটি টুল যা বেশিরভাগ আধুনিক ব্রাউজারের window অবজেক্টে (window.fetch) থাকে এবং এর মাধ্যমে খুব সহজে জাভাস্ক্রিপ্ট প্রমিজ ব্যবহার করে HTTP রিকুয়েস্ট করা যায়।

Fetch ব্যবহার করে একটি GET রিকুয়েস্ট করার জন্য আমাদের শুধু কাঙ্ক্ষিত এন্ডপয়েন্টের URL টি দরকার। আমাদের React কম্পোনেন্টটি মাউন্ট হলে আমরা এই রিকুয়েস্টটি করতে চাই।

এর জন্য, আমরা আমাদের রিকুয়েস্টটি useEffect হুক এর মধ্যে করি, এবং দ্বিতীয় আর্গুমেন্ট হিসেবে একটি ফাঁকা ডিপেনডেন্সি অ্যারে দিয়ে দেই যেন আমাদের রিকুয়েস্টটি শুধু একবারই করা হয় (ধরে নিচ্ছি এটি আমাদের কম্পোনেন্টে অন্য কোন ডেটা এর উপরে নির্ভরশীল নয়)।

clip-1-fetch-min

প্রথম .then() কলব্যাকটির মধ্যে আমরা পরীক্ষা করে দেখি রেসপন্সটি ঠিকঠাক ছিল কি না (response.ok)। যদি ঠিকঠাক থাকে তাহলে আমরা আমাদের রেস্পন্সটি রিটার্ন করে পরবর্তি কলব্যাকে পাস করে দেই। এরপর আমরা আমাদের ডেটাকে JSON ডেটা হিসেবে কলব্যাক করি কারণ আমাদের র‍্যান্ডম ইউজার API JSON ডেটা রিটার্ন করে।

যদি রেস্পন্সটি ঠিকঠাক না থাকে, তাহলে আমরা ধরে নেই যে রিকুয়েস্টে কিছু সমস্যা হয়েছিল। Fetch ব্যবহার করে আমাদের এররগুলি হ্যান্ডেল করতে হবে, তাই আমরা আমাদের catch কলব্যাকে হ্যান্ডেল করার জন্য response টিকে একটি এরর হিসেবে থ্রো করি।

আমাদের উদাহরণে আমরা setError ব্যবহার করে আমাদের এরর ডেটাকে স্টেট এ রাখি। যদি কোন এরর থাকে তাহলে আমরা "Error!" টেক্সটি রিটার্ন করি।

উল্লেখ্য আপনি চাইলে error.message ব্যবহার করেও একটি এরর মেসেজ দেখাতে পারেন।

.finally() কলব্যাকটি রিকুয়েস্ট সফল হলে বা না হলে, উভয় অবস্থাতেই কল হবে। এই কলব্যাকে আমরা loading এর মান হিসেবে false সেট করি যেন লোডিং টেক্সটটি আর দেখা না যায়।

বরং আমাদের রিকুয়েস্টটি সফল হলে আমরা আমাদের ডেটা দেখতে পারবো আর সফল না হলে এরর মেসেজটি দেখতে পারবো।

২. Axios ব্যবহার করে কিভাবে React এ ডেটা নিয়ে আসা যায়

React এ রিকুয়েস্ট করার দ্বিতীয় উপায়টি হল axios লাইব্রেরির ব্যবহার।

এই উদাহরণে, আমরা আমাদের Fetch উদাহরণটিকে পরিবর্তন করবো। তার জন্য প্রথমে আমরা npm ব্যবহার করে axios ইন্সটল করবোঃ

npm install axios

এরপর আমরা আমাদের কম্পোনেন্ট ফাইলের উপরে এটিকে ইম্পোর্ট করবো।

Axios আমাদের Fetch এর মতো একই প্রমিজ সিনট্যাক্স ব্যবহার করতে দেয়, কিন্তু এক্ষেত্রে আমাদের ম্যানুয়ালি আমাদের প্রথম then কলব্যাকে response ঠিক আছে কি না তা পরীক্ষা করতে হয় না। Axios আমাদের হয়ে এই কাজটি করে দেয়।

এছাড়াও এটি Axios আমাদের, ঐ প্রথম কলব্যাকেই response.data ব্যবহার করে JSON ডেটা দেয়।

Axios ব্যবহারের একটি বড় সুবিধা হল এর সিনট্যাক্স অনেক ছোট যার ফলে কোড কম লিখতে হয়। এছাড়াও Axios এ বেশ কিছু তুল এবং ফিচার আছে যা Fetch API তে নেই।

এসব কারণেই Axios React ডেভেলপারদের সবথেকে পছন্দের HTTP লাইব্রেরি হয়ে দাঁড়িয়েছে।

clip-2-axios-min

৩. async/await সিনট্যাক্স ব্যবহার করে কিভাবে React এ ডেটা নিয়ে আসা যায়

ES7 এ async/await সিনট্যাক্স ব্যবহার করে প্রমিজ রিজলভ করার সুবিধা যুক্ত হয়।

এর মূল সুবিধা হল, এটি আমাদের .then(), .catch(), এবং .finally() কলব্যাক ছাড়াই সিঙ্ক্রোনাস কোডের মতো কোড লিখে, অ্যাসিঙ্ক্রোনাসভাবে ডেটা নিয়ে আসতে দেয়।

অন্য কথায়, React এ async/await ব্যবহার করে আমাদের আর কলব্যাকের উপরে নির্ভর করতে হয় না।

এখানে আমাদের মনে রাখতে হবে যে, আমরা যখন useEffect ব্যবহার করি, তখন এফেক্ট ফাংশনটি (প্রথম আর্গুমেন্টটি) async হতে পারবে না।

আমরা যদি Create React App ব্যবহার করি তাহলে React আমাদের যে লিন্টিং এরর দেয়, সেটি দেখলে আমরা জানতে পারবো যে race condition এড়ানোর জন্য এই ফাংশনটি অ্যাসিঙ্ক্রোনাস হতে পারবে না।

clip-3-async-await-min

ফলস্বরূপ, আমরা আমাদের কম্পোনেন্টে একটি আলাদা অ্যাসিঙ্ক্রোনাস ফাংশন তৈরি করতে পারি এবং সেটিকে সিঙ্ক্রোনাসলি কল করতে পারি। অর্থাৎ কল করার সময় এর শুরুতে await কীওয়ার্ডটি ব্যবহার না করে।

এই উদাহরণে আমরা getData নামে একটি অ্যাসিঙ্ক ফাংশন তৈরি করি। useEffect ব্যবহার করে এটিকে সিঙ্ক্রোনাসলি কল করে আমরা স্বাভাবিকভাবে ডেটা নিয়ে আসতে পারি।

৪. একটি কাস্টম React Hook (useFetch) ব্যবহার করে কিভাবে React এ ডেটা নিয়ে আসা যায়

পরবর্তিতে হয়তো আপনার মনে হবে যেসব কম্পোনেন্টে ডেটা নিয়ে আসার দরকার পরে সেসব কম্পোনেন্টে বার বার useEffect হুকটি লেখা কষ্টসাধ্য এবং সময়সাপেক্ষ।

এই সমস্যা থেকে বের হতে আমরা একটি কাস্টম হুক ব্যবহার করতে পারি যা আমরা কোন থার্ড পার্টি লাইব্রেরি থেকে লিখতে পারি (যেমন এই উদাহরণে আমরা react-fetch-hook ব্যবহার করছি)।

একটি কাস্টম হুক যার মাধ্যমে HTTP রিকুয়েস্ট করা যায়, আমাদের কম্পোনেন্টগুলিকে আরও সংক্ষিপ্ত করতে সহায়তা করে। কাস্টম হুকটি, আমাদের কম্পোনেন্টের শুরুতে কল করলেই হয়।

clip-4-usefetch-min

এক্ষেত্রে আমাদের কোডের পুরনো কাঠামো বজায় রাখতে প্রয়জনীয় ডেটা, লোডিং এবং এরর স্টেটগুলি আমরা এই লাইব্রেরি থেকেই পেয়ে যাই কিন্তু এবার আমাদের useEffect ব্যবহার করার দরকার নেই। এছাড়াও আমাদের বার বার GET রেকুয়েস্টটি লেখারও দরকার নেই।

৫. React Query Library ব্যবহার করে কিভাবে React এ ডেটা নিয়ে আসা যায়

কোডকে সংক্ষিপ্ত রাখতে কাস্টম হুকের ব্যবহার একটি খুবই ভাল পদ্ধতি। কিন্তু ডেটা আনার জন্য এর থেকেও একটি ভাল পদ্ধতি হল React Query লাইব্রেরি।

React Query আমাদের শুধু কাস্টম হুক ব্যবহার করতে দেয় না, তার পাশাপাশি স্টেট ম্যানেজমেন্ট অর্থাৎ কখন, কিভাবে, এবং কতক্ষণ পর পর আমরা ডেটা নিয়ে আসবো এসবও নিয়ন্ত্রণ করতে দেয়।

React Query আমাদের একটি cache দেয় যা আপনি React Query Devtools ব্যবহার করে দেখতে পারেন। এর সাহায্যে খুব সহজেই আমরা যে রিকুয়েস্টগুলি করছি সেগুলির প্রত্যেকটি ম্যানেজ করা যায়।

নিম্নোক্ত রিকুয়েস্টগুলির মধ্যে, আমাদের র‍্যান্ডম ইউজার কুয়েরিটির নাম 'random-user' (useQuery এর প্রথম আর্গুমেন্ট হিসেবে দেওয়া হয়েছে)।

clip-5-react-query-min

এই কী ব্যবহার করে আমরা আমাদের কুয়েরিগুলিকে রেফেচ, ভ্যালিডেট অথবা রিসেট করতে পারি।

আমরা যদি আমাদের কাস্টম হুক সলিউশন বা useEffect ব্যবহার করি তাহলে প্রত্যেকবার কম্পোনেন্ট মাউন্ট হওয়ার সময় আমরা ডেটা রিফেচ করবো। বেশিরভাগ ক্ষেত্রেই এটি অপ্রয়োজনীয়। আমাদের এক্সটার্নাল স্টেট যদি পরিবর্তন না হয় তাহলে প্রত্যেকবার কম্পোনেন্ট লোড করার সময় লোডিং স্টেট না দেখানোই শ্রেয়।

React Query প্রথমে cache থেকে ডেটা দেখায় এবং যদি API স্টেট পরিবর্তন হয়, তাহলে ব্যাকগ্রাউন্ডে ডেটা রিফেচ করে আপডেট করে। এতে করে আমাদের ইউজার এক্সপেরিইয়েন্স অনেক উন্নত হয়।

আমাদের ডেটা কিভাবে পরিবর্তন হচ্ছে তার উপরে নির্ভর করে এটি আমাদের শক্তিশালী কিছু টুলসও দেয় আমাদের রিকুয়েস্টগুলিকে ম্যানেজ করার জন্য।

উদাহরণস্বরূপ, আমদের অ্যাপ্লিকেশনটি যদি একটি আলাদা ইউজার যুক্ত করতে দেয় তাহলে আমরা হয়তো সেই কুয়েরিটি রিফেচ করতে চাইব। আমরা যদি জানি যে একটি কুয়েরি খুব ঘন ঘন পরিবর্তন হচ্ছে তাহলে আমরা নির্দিষ্ট সময় পর পর সে কুয়েরিটি চালাতে পারি। অথবা ইউজার যখনই তার উইন্ডো ট্যাব ফোকাস করবে তখনই কুইয়েরিটি রিফ্রেশ করতে পারি।

সংক্ষেপে, React Query শুধু কুয়েরি করার জন্য ভাল তা নয়, বরং বিভিন্ন কম্পোনেন্টের HTTP রিকুয়েস্টগুলি থেকে পাওয়া ডেটা ম্যানেজ করারও একটি খুবই কার্যকরী উপায়।