অবশ্যই! আপনার অনুরোধ অনুযায়ী, রিপোজিটরি এবং PDF ফাইলের গভীর বিশ্লেষণ করে দ্বিতীয় ব্লগ পোস্টটি নিচে দেওয়া হলো।

ব্লগ পোস্ট ২: React Query-তে ডেটার অবস্থা (Stale vs Fresh) এবং ডাইনামিক কোয়েরি

আগের পোস্টে আমরা React Query-এর বেসিক সেটআপ এবং useQuery হুক দিয়ে কীভাবে ডেটা ফেচ করতে হয় তা দেখেছি। এই পর্বে আমরা আরও কিছু গুরুত্বপূর্ণ বিষয় নিয়ে আলোচনা করব, যেমন - ডেটার বিভিন্ন অবস্থা (state), Devtools-এর ব্যবহার এবং কীভাবে ডাইনামিক কোয়েরি পরিচালনা করতে হয়।

Stale-While-Revalidate: React Query-র একটি শক্তিশালী কৌশল

আপনি যখন useQuery দিয়ে ডেটা আনেন, React Query সেই ডেটাকে "fresh" হিসেবে ধরে নেয়। [cite_start]কিন্তু নির্দিষ্ট সময় পর (ডিফল্টভাবে ০ সেকেন্ড), ডেটাটি "stale" বা পুরনো হয়ে যায় [cite: 43]। এর মানে এই নয় যে ডেটাটি ব্যবহারযোগ্য নয়।

React Query এখানে "Stale-While-Revalidate" নামে একটি চমৎকার কৌশল ব্যবহার করে। এর মূল ধারণাটি হলো:

1. প্রথমে পুরনো (Stale) ডেটা দেখাও: যখন কম্পোনেন্ট রি-রেন্ডার হয়, React Query প্রথমে ক্যাশে থাকা পুরনো ডেটাটিই ইউজারকে দেখায়। ফলে ইউজারকে লোডিং স্ক্রিনের জন্য অপেক্ষা করতে হয় না।
2. [cite_start]ব্যাকগ্রাউন্ডে নতুন ডেটা আনো: পুরনো ডেটা দেখানোর সাথে সাথেই React Query ব্যাকগ্রাউন্ডে একটি নেটওয়ার্ক রিকোয়েস্ট পাঠিয়ে সার্ভার থেকে নতুন ডেটা আনার চেষ্টা করে [cite: 47]।
3. ডেটা আপডেট করো: নতুন ডেটা চলে আসলে, React Query পুরনো ডেটার সাথে মিলিয়ে দেখে। যদি কোনো পরিবর্তন থাকে, তবে UI আপডেট করে নতুন ডেটা দেখিয়ে দেয়।

এই পদ্ধতির সবচেয়ে বড় সুবিধা হলো অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজারের অভিজ্ঞতা (UX) দুটোই উন্নত হয়।

ডিবাগিং এর সেরা বন্ধু: react-query-devtools

[cite_start]React Query-এর সাথে একটি Devtools প্যাকেজ আসে, যা ডিবাগিং-এর জন্য অসাধারণ [cite: 44]। এটি ইনস্টল করা খুবই সহজ। Devtools চালু করলে আপনি ব্রাউজারে দেখতে পারবেন:

• [cite_start]আপনার অ্যাপের সব queryKey [cite: 46]।
• কোন কোয়েরি এখন "fresh", "stale", "fetching" বা "inactive" অবস্থায় আছে।
• ক্যাশে থাকা ডেটা দেখতে পারবেন।
• ম্যানুয়ালি রিফেচ, ইনভ্যালিডেট বা কোয়েরি রিসেট করতে পারবেন।

এটি আপনাকে ডেটা ফ্লো এবং ক্যাশিং কীভাবে কাজ করছে তা পরিষ্কারভাবে বুঝতে সাহায্য করে।

useQuery-র কনফিগারেশন: Retry এবং আরও অনেক কিছু

[cite_start]useQuery হুক অনেকগুলো অপশন বা প্যারামিটার নিতে পারে যা দিয়ে আপনি এর আচরণ নিয়ন্ত্রণ করতে পারবেন [cite: 51]। এর মধ্যে একটি গুরুত্বপূর্ণ অপশন হলো retry।

[cite_start]ডিফল্টভাবে, যদি কোনো নেটওয়ার্ক রিকোয়েস্ট ফেইল করে, React Query স্বয়ংক্রিয়ভাবে ৩ বার আবার চেষ্টা (retry) করে [cite: 47]। [cite_start]তবে আপনি চাইলে এই সংখ্যা পরিবর্তন করতে পারেন, এমনকি retry: false সেট করে রিট্রাই করা বন্ধও করে দিতে পারেন [cite: 50]। এটি বিশেষ করে কস্টলি API কলের ক্ষেত্রে খুবই দরকারি।

const { data } = useQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
  retry: 1, // শুধু ১ বার রিট্রাই করবে
  staleTime: 5000, // ৫ সেকেন্ড পর্যন্ত ডেটা fresh থাকবে
});

ডাইনামিক কোয়েরি: যখন একটি আইডির উপর ডেটা নির্ভর করে

অনেক সময় আমাদের URL-এর প্যারামিটার বা অন্য কোনো ডাইনামিক ভ্যালুর উপর ভিত্তি করে ডেটা ফেচ করতে হয়। যেমন, একটি নির্দিষ্ট প্রোডাক্টের বিস্তারিত তথ্য দেখানো।

[cite_start]ProductDetails.jsx-এর মতো কম্পোনেন্টে আমরা queryKey-এর মধ্যে ডাইনামিক আইডি যোগ করে এটি করতে পারি [cite: 55, 56]।

import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
 
const fetchProduct = async ({ queryKey }) => {
  const [_key, id] = queryKey; [cite_start]// queryKey থেকে আইডিকে আলাদা করা [cite: 60]
  const response = await axios.get(`http://localhost:3000/products/${id}`);
  return response.data;
};
 
const ProductDetails = () => {
  const { id } = useParams();
  const { data, isLoading } = useQuery({
    queryKey: ['product', id], // ডাইনামিক আইডি যোগ করা
    [cite_start]queryFn: fetchProduct, [cite: 57, 58]
  });
 
  // ...
};

এখানে queryKey হিসেবে ['product', id] ব্যবহার করা হয়েছে। যখন id পরিবর্তন হবে, React Query স্বয়ংক্রিয়ভাবে বুঝবে যে এটি একটি নতুন কোয়েরি এবং সেই অনুযায়ী নতুন ডেটা ফেচ করবে।