TanStack Query: API Data Handling-এর Superpower

ওয়েব ডেভেলপমেন্ট
, ,
1

আধুনিক Web App-এ Data নিয়ে যুদ্ধ

একটা মর্ডান ওয়েব অ্যাপ মানেই একগাদা asynchronous API call—GET, POST, PUT, DELETE।

প্রতিটা কল মানে:

  • Loading, error, success state ম্যানেজ করা

  • ডেটা ক্যাশিং

  • রিফ্রেশের সময় ধরে রাখা

  • Pagination, infinite scrolling

  • Background refetch

  • Race conditions হ্যান্ডেল করা

    এইসব প্রতিবার নতুন করে লিখলে productivity আর maintainability দুটোই মার খায়।

এইখানেই TanStack Query নিজের শক্তি দেখায়।

TanStack Query কী?

TanStack Query (পূর্বে React Query) হলো এক ধরনের powerful asynchronous state management library, যা API-driven UI গুলোকে একদম আলাদা মাত্রায় নিয়ে যায়।

“TanStack Query turns your server state into a first-class citizen in your frontend.”

Core Superpowers

  1. Declarative Data Fetching
const { data, isLoading } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts
})

এই একটা হুক-ই loading, error, success, cache—সব ম্যানেজ করে।
  1. Smart Caching
queryClient.invalidateQueries(['posts'])

শুধু invalidate করলেই নতুন করে fetch করবে।

  1. Background Refresh & Window Refocus

    API call কে background এ auto-refresh করে—যেমনই ইউজার ট্যাব-এ ফিরে আসে।

  2. Mutation & Optimistic Updates

    ডেটা POST/PUT/DELETE করার জন্য useMutation() ব্যবহার হয়।

    এবং optimistic update দিয়ে UI কে আগেই আপডেট করে দেয়া যায়, real API response-এর আগে।

const mutation = useMutation({
  mutationFn: updateUser,
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['user', newData.id])
    const prevData = queryClient.getQueryData(['user', newData.id])
    queryClient.setQueryData(['user', newData.id], newData)
    return { prevData }
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['user', newData.id], context.prevData)
  }
})

  1. Infinite Queries & Pagination

    Infinite scrolling বা pagination তো অনেকের মাথাব্যথা। TanStack Query এটাকেও easy করে ফেলে।

    useInfiniteQuery({
  queryKey: ['comments'],
  queryFn: fetchComments,
  getNextPageParam: (lastPage) => lastPage.nextCursor
})

TanStack Query শুধু একটা ডেটা ফেচ লাইব্রেরি না। এটা হল React ecosystem-এর একটি game-changer।

যেখানে performance, UX, productivity—সব একসাথে এগিয়ে যায়।

React দিয়ে তৈরি যেকোনো serious প্রজেক্টে এটি না ব্যবহার করা মানে নিজ হাতে নিজের জীবন কঠিন করে তোলা।

2 Likes