I state "You will love it - React Query".

🚀 ভালো লাগার আরও একটি utility: React Query

React Query use করলে API fetch, cache, update সব সহজ। RTK Query ঠিক আছে, কিন্তু complex scenario-এ clumsy হতে পারে।

---

👉 API Fetching সহজ

const { data, isLoading, error } = useQuery(['todos'], fetchTodos)

শুধু useQuery বা useMutation call করতে হবে।
Background-এ fetch, retry, error handling auto।

RTK Query: Multiple queries বা complex retry verbose।

---

👉 Caching & Stale Data

const { data } = useQuery(['projects', page], fetchProjects, {
  staleTime: 5000,
  keepPreviousData: true
})

Flicker কমায়, pagination smooth।

RTK Query: Requires more manual work than React Query.

---

👉 Updating & Mutations

const mutation = useMutation(updateTodo, {
  onSuccess: () => queryClient.invalidateQueries(['todos'])
})

onSuccess, onError, onSettled দিয়ে cache automatically invalidate।

RTK Query: Tag system use করতে হয়, একটু verbose।

---

👉 Offline / Window Focus Handling

• refetchOnWindowFocus → user active করলে fresh data।
• Retry automatically network fail হলে।

RTK Query: Manual setup দরকার।

---

👉 File Uploads & Non-serializable Data

React Query supports File, FormData direct use।

RTK Query: ❌ serializable restriction → tricky। Cache Redux store-এ → File, FormData, Date support নেই।

---

👉 Multiple Queries & Dependent Queries

const { data: user } = useQuery(['user', userId], getUser)
const { data: projects } = useQuery(
  ['projects', user?.id],
  getProjects,
  { enabled: !!user?.id }
)

একসাথে multiple query handle করা সহজ।

RTK Query: conditional skip করতে হয় → কম intuitive।

---

👉 API Error Handling & Conditional Invalidate

useMutation(updateData, {
  onSuccess: () => queryClient.invalidateQueries(['todos']),
  onSettled: () => queryClient.invalidateQueries(['todos']) // success/error উভয়েই
})

Default: error হলে invalidate হয় না। চাইলে onSettled use করে success বা error উভয়েই invalidate করা যায়।

RTK Query: conditional invalidate করতে extra code লাগে → beginner-unfriendly।

---

👉 Optimistic Updates

useMutation(updateTodo, {
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(['todos'])
    const previousTodos = queryClient.getQueryData(['todos'])
    queryClient.setQueryData(['todos'], old => [...old, newTodo])
    return { previousTodos }
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos)
  }
})

UI instantly update, error হলে rollback।

RTK Query: onQueryStarted + updateQueryData → more complex।

---

👉 Infinite Queries (Infinite Scroll)

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  ['projects'],
  fetchProjects,
  { getNextPageParam: (lastPage) => lastPage.nextCursor }
)

Next page automatic track।

RTK Query: Manual setup বা complex pattern।

---

⭐ Awesome Devtools

React Query devtools দিয়ে সব status (fetching, stale, active, etc.) দেখতে পারবেন। Debugging অনেক সহজ।

---

💡 Conclusion:
I have used both RTK and React Query. But find that React Query is much simpler than RTK 😊.

DOCUMENTATION