রিঅ্যাক্ট কুয়েরি এর টুকিটাকি

npx এর সাহায্যে

npm install react-query

yarn এর সাহায্যে

yarn add react-query

CDN এর সাহায্যে ব্যবহার করতে চাইলে নিচের স্ক্রিপ্টি অ্যাড করতে হবে

<script src='https://unpkg.com/react-query/dist/react-query.production.min.js'></script>

Query Function গুলো ব্যবহার করার জন্য আমাদের তিনটি কাজ করতে হবেঃ ১/ একটি Unique Key দিতে হবে। ২/ একটি ফাংশান দিতে হবে, যেটি Promise return করে, Resolved data অথবা একটি Error return করে্টি ৩/ কুয়েরি ফাংশানে options পাঠাতে হলে সেটি ৩য় প্যারামিটারে পাঠাতে হয়।

import { useQuery } from 'react-query' function App() { const info = useQuery('todos', fetchTodoList), {refetchOnWindowFocus: true} }

একসাথে অনেকগুলো কুয়েরি করার জন্য আপনি Manual Parallel Queries ব্যবহার করতে পারেন।

 function App () { const usersQuery = useQuery('users', fetchUsers) const teamsQuery = useQuery('teams', fetchTeams) const projectsQuery = useQuery('projects', fetchProjects) } 

কুয়েরি ফাংশান সমূহ কন্ট্রোল করতে হলে,

refetchOnWindowFocus: true

Window Focus Refetch কন্ট্রোল করতে চাইলে refetchOnWindowFocus: true/false করে দিতে হবে।

refetchOnWindowFocus: true

Disabling/Pausing Queries করতে হলে, enable: true/false করতে হবে।

enabled: true

যখন কোনো কুয়েরি ফাংশন error throw করে, তখন automatically retry করার জন্য retry option টি ব্যবহার করতে পারেন। একটি Boolean, Number অথবা custom function accept করে।

enabled: true, enabled: 6, enabled: (failureCount, error) => ...

একটি API এর data fetching করতে ব্যবহৃত হয়ঃ

useQuery()

একসাথে অনেকগুলো API এর data fetching করতে ব্যবহৃত হয়ঃ

useQueries()

একটি API এর data mutation করতে ব্যবহৃত হয়ঃ

useMutation()

পেইজিনেশন এবং স্ক্রোলিং সম্পর্কিত কাজের জন্য ব্যবহৃত হয়ঃ

useInfiniteQuery()

বর্তমানে কি কি query চলছে সেটা জানতে ব্যবহৃত হয়ঃ

useQueryClient()

বর্তমানে কতগুলো query চলছে সেটা জানতে ব্যবহৃত হয়ঃ

useIsFetching()

Error handling এর জন্য ব্যবহৃত হয়ঃ

useQueryErrorResetBoundary()