ری اکت کوئری و هرچیزی که باید راجبش بدونیم ! + هوک useQuery در ری اکت

13 شهریور 1402
ارسال شده توسط
ری اکت
ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

ری اکت کوئری یکی از قدرتمندترین کتابخانه های React هست که به ما در زمینه Data-Fetching ( دریافت اطلاعات از سرور ) و State Management ( مدیریت حالت های اپیکیشن ) کمک میکنه. البته کتابخانه React Query به همین 2 قابلیت ختم نمیشه و کار های بیشتری برای ما انجام میده مثل Cashing ( کش کردن اطلاعات ) و بروزرسانی داده های سمت سرور!

تو این مقاله میخوایم یکبار برای همیشه ری اکت کوئری رو بصورت 0 تا 100 بررسی کنیم و به این سوال پاسخ بدیم که چرا باید از   ری اکت کوئری   استفاده کنیم؟

ری اکت کوئری چیست ؟

کتابخانه ری اکت کوئری به عنوان یک Data Fetcher ( دریافت کننده اطلاعات از سرور ) به ما در زمینه دریافت اطلاعات از سرور کمک میکنه. همچنین قابلیت Cashing ( کش کردن اطلاعات ) و State Management ( مدیریت حالت ) هم داره.

در حقیقت React Query یک کتابخانه ری اکتی هست و در پروژه هایی که با React یا Next.js توسعه داده شدن ، قابلیت استفاده داره.

ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

ری اکت کوئری چه مزایایی داره ؟

اگه از کتابخانه ری اکت کوئری استفاده کنیم، مزایای زیر رو برامون داره :

  • امکان Fetch کردن اطلاعات از سرور  ( Data Fetching )
  • امکان کش کردن اطلاعات دریافت شده ( Data Cashing )
  • بروزرسانی خودکار اطلاعات دریافت شده ( هر زمان اطلاعات سمت سرور تغییر کرد )
  • قابلیت صفحه بندی ( Pagination )

دنیای بدون React Query غیر قابل تصوره !!!!

شرایط زیر رو در نظر بگیرید ( تو همه این شرایط ری اکت کوئری معجزه میکنه ) :

  • اینکه بخوایم با دیتا های asynchronous کار کنیم و وضعیت request به سرور رو مدیریت کنیم ( برای نمایش loading ، مدیریت Error دریافتی از سرور و .. )
  • اینکه بخوایم یک دیتای مشترک رو بین کامپوننت های مختلفی به اشتراک بزاریم .
  • اینکه بخوایم اطلاعات دریافتی از سرور رو کش کنیم که دیگه نیازی نباشه هربار به سرور درخواست بدیم
  • اینکه بخوایم اطلاعات موجود در سرور رو در پشت صحنه بروزرسانی کنیم
  • اینکه اگه درخواست ما به سرور با مشکل مواجه شد ، مجدد همون درخواست رو تکرار کنیم

تو تمام موارد بالا کتابخانه React Query به ما کمک میکنه 🙂 و بدون ری اکت کوئری یا نمیتونیم انجامشون بدیم یا باید مجدد چرخ رو بسازیم !

ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

چرا باید از React Query استفاده کنیم؟

خب شاید این سوال برامون پیش بیاد که اصلا چرا باید از کتابخانه React Query استفاده کنیم؟

اگه از ری اکت کوئری در React استفاده کنیم چندین مزایا برامون داره :

  • بهبود Performance اپیکیشن به دلیل کش کردن اطلاعات
  • آسان بودن Fetch کردن اطلاعات از سرور
  • امکان مدیریت خطا
  • سازگاری کامل با ری اکت ، Next.js و تایپ اسکریپت
  • بروزرسانی اطلاعات موجود در سرور در پشت صحنه ( هنگام فوکوس شدن صفحه یا اتصال مجدد اینترنت یا .. )
  • امکان صفحه بندی اطلاعات دریافتی ( Pagination )
  • درصورت دریافت نشدن اطلاعات از سرور به دلیل خطا ، مجدد درخواست تکرار میشه ( reFetch )
ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

دریافت اطلاعات از سرور به کمک ری اکت کوئری ( Data Fetching )

دریافت اطلاعات از سرور به لطف وجود هوک useQuery خیلی خیلی آسون شده. منظور از اطلاعات سرور همون اطلاعاتی هست که در سرور ذخیره میکنیم  ( مثل لیست کاربران ، لیست محصولات ، لیست مقالات و .. )

هوک useQuery در ری اکت کوئری به ما کمک میکنه تا عملیات Data Fetching ( دریافت اطلاعات از سرور ) رو انجام بدیم.

هوک useQuery در ری اکت کوئری

کتابخانه React Query یک هوک خیلی باحال و کاربردی به اسم useQuery در اختیار ما میزاره.

از هوک useQuery میتونیم برای Data Fetching استفاده کنیم.

هوک useQuery در ری اکت از ما 2 آرگومان ورودی میگیره :

  • یک unique key ( شناسه یکتا )
  • یک تابع Async که اطلاعات رو برای ما دریافت میکنه

چیزی که هوک useQuery به ما برمیگردونه ، یک Object هست که شامل موارد زیر هست :

  • وضعیت دریافت اطلاعات ( Status )
  • اطلاعاتی که سرور به ما داده ( Data )
  • ارور های دریافت شده از سرور ( error )

 

ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

چطور از React Query در ری اکت استفاده کنیم ؟

قبل از انجام هر کاری، باید این کتابخانه رو نصب کنیم :

				
					npm i react-query

حالا باید فایل index.js رو بصورت زیر تغییر بدیم تا ری اکت کوئری کل اپیکیشن مارو بتونه پوشش بده :

				
					const queryClient = new QueryClient();

ReactDOM.render(
 <React.StrictMode>
   <Router>
     <QueryClientProvider client={queryClient}>
       <App />
       <ToastContainer />
     </QueryClientProvider>
   </Router>
 </React.StrictMode>,
 document.getElementById('root')
);

عالیه 🙂 حالا میتونیم از ری اکت کوئری در ری اکت استفاده کنیم.

تو مثال زیر نحوه استفاده از هوک useQuery در ری اکت مشخص هست:

				
					import { useQuery } from "react-query";
import axios from "axios";

const fetchPosts = async ()=> {
 const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
 return response.data;
};
const PostsList = () => {
 const { isLoading, isError, error, data } = useQuery("posts", fetchPosts);
 if (isLoading) {
  return <div>در حال دریافت اطلاعات...</div>;
 }
 if (isError) {
  return <div> {error.message}:ارور</div>;
 }
 return (
  <ul>
   {data.map((post) => (
    <li key={post.id}>{post.title}</li>
   ))}
  </ul>
 );
};
export default PostsList;

تو خط 1 ، هوک useQuery رو از react فراخوانی کردیم.

به خط 9 دقت کنید ..

به هوک useQuery دو آرگومان پاس دادیم. اولین آرگومان یک شناسه یکتا هست که ما آدرس API Endpoint رو بهش دادیم ( posts )

دومین آرگومان یک تابع Async هست که از JsonPlaceHolder لیست مقالات رو دریافت میکنه.

باتوجه به تیکه کد بالا، هوک useQuery به ما 4 مقدار برگردونده که در ادامه این 4 مقدار رو باهمدیگه بررسی میکنیم :

مقدار isLoading در React Query

دریافت اطلاعات از سرور باتوجه به سرعت سرور و حجم اطلاعات کمی زمانبر هست. در حین دریافت اطلاعات isLoading مقدار true به خودش میگیره و پس از دریافت اطلاعات مقدار false به خودش میگیره.

این مقدار به ما کمک میکنه که بتونیم حالت “در حال بروزرسانی” رو به کاربر نشون بدیم که کاربر بدونه باید منتظر باشه تا اطلاعات بهش نمایش داده بشه.

مقدار isError در React Query

درصورتی که دریافت اطلاعات از سرور با خطا مواجه شده باشه ، این مقدار True میشه. به کمک این مقدار میتونیم خروجی شرطی بنویسیم.

مثلا زمانی که این مقدار True بود به کاربر اطلاع میدیم که دریافت اطلاعات با خطا مواجه شده است!

مقدار error در React Query

درصورتی که Data Fetching ( دریافت اطلاعات از سرور ) با خطا مواجه شده باشه متغیر error ،حاوی اطلاعات اون ارور میشه. به کمک error که یک Object هست میتونیم به کاربر اطلاع بدیم که چرا دریافت اطلاعات با خطا مواجه شده ! مثلا به دلیل عدم برقراری ارتباط با سرور . . .

مقدار data در React Query

مقدار data در ری اکت کوئری شامل اطلاعات دریافت شده از سرور هست. بطور مثال اگر قصد دریافت لیست مقالات را داشته باشیم ، به کمک data میتونیم به لیست مقالات دسترسی داشته باشیم.

به همین سادگی تونستیم از React Query در ری اکت استفاده کنیم 🙂

تو مثال بالا Data Fetching رو در کتابخانه React Query بررسی کردیم . حالا بیاید Mutation ( بروزرسانی اطلاعات ) رو باهمدیگه بررسی کنیم . . .

بروزرسانی اطلاعات در ری اکت کوئری ( Mutation ) + هوک useMutation

کتابخانه React Query به ما اجازه بروزرسانی اطلاعات رو میده. به عمل بروزرسانی اطلاعات Mutation میگیم.

هوک useMutation که توسط خود ری اکت کوئری در اختیار ما گذاشته شده، عمل Mutation رو بسادگی برای ما انجام میده.

هوک useMutation از ما یک آرگومان ورودی میگیره. این آرگومان یک تابع Async هست که عمل بروزرسانی اطلاعات رو برای ما انجام میده. ( همون axios.put )

 هوک useMutation  سه مقدار برای ما پرمیگردونه.

  • یک Status برای مشاهده وضعیت بروزرسانی اطلاعات.
  • یک error برای مشاهده جزئیات ارور دریافتی
  • یک تابع برای صدا زدن عمل Mutation. ( انجام بروزرسانی اطلاعات )

تو مثال زیر عمل بروزرسانی اطلاعات رو بسادگی انجام دادیم:

				
					import { useMutation, useQueryClient } from "react-query";
import axios from "axios";

const updatePost = async (post)=> {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${post.id}`, post);
return response.data;
};

const PostItem = ({ post }) ={


const queryClient = useQueryClient();
const mutation = useMutation(updatePost, {
onSuccess: (updatedPost) => {
queryClient.setQueryData(["post", updatedPost.id], updatedPost);
},
});


const handleUpdate = () => {
mutation.mutate({ ...post, title: "Updated Title" });
};

return (
<div>
<h3>{post.title}</h3>
<button onClick={handleUpdate} disabled={mutation.isLoading}>
Update Title
</button>
{mutation.isError && <p>Error: {mutation.error.message}</p>}
</div>
);
};
export default PostItem;

خط 4 یک تابع به نام updatePost داریم که اطلاعات پست جدید رو به عنوان ورودی دریافت میکنه و به سرور ارسال میکنه.

در خط 13 از هوک useMutation استفاده کردیم.  در اینجا مشخص کردیم که درصورت موفق بودن بروزرسانی اطلاعات، اطلاعات کش شده رو با اطلاعات جدید جایگزین کن(در خط 15 )

به این نکته توجه داشته باشین که خروجی هوک useMutation داخل متغیر mutation ریخته شده. از mutation در خط 21 استفاده کردیم.

داخل متغیر mutation یک متد به اسم mutate وجود داره که اگر صدا زده بشه ، عمل بروزرسانی اطلاعات رو برای ما انجام میده.

 

 

ری اکت کوئری و تایپ اسکریپت

ری اکت کوئری و تایپ اسکریپت !

خوشبختانه از کتابخانه ری اکت کوئری میتونیم در پروژه هایی که TypeScript هستن هم استفاده کرد 🙂

فقط کافیه تایپ مد نظر خودمون رو به مقادیر بدیم. مثل :

 

				
					export function useQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>

بهبود Performance اپیکیشن در React با ری اکت کوئری

کتابخانه ری اکت کوئری در ری اکت ، چندین قابلیت و ویژگی خوب در اختیار ما گذاشته تا به کمک اونها بتونیم اپیکیشن خودمون رو بهینه تر کنیم ( بهبود Performance )

استفاده از React Query باعث میشه اپیکیشن های بهینه تر ، روون تر و کارآمد تری بنویسیم.

برخی از این قابلیت ها که به افزایش Performance اپیکیشن ری اکتی ما کمک میکنن عبارتند از :

  • سیستم کش ( Intelligent Cashing )

ری اکت کوئری بصورت خودکار، اطلاعات دریافت شده از سرور رو کش میکنه. کش کردن اطلاعات در کتابخونه React Query باعث میشه که تعداد Request / درخواست های ما به سرور کمتر بشه و در نتیجه Performance اپیکیشن ما بهتر بشه.

  • دریافت اطلاعات از سرور در پشت صحنه ( Background Fetching )

ری اکت کوئری در پشت صحنه عملیات Data Fetchhing ( دریافت اطلاعات از سرور ) رو انجام میده تا همیشه بروزترین اطلاعات موجود در سمت سرور رو در اختیار داشته باشه.

اینکار باعث میشه کاربر متوجه این عملکرد نشه که باعث بهبود تجربه کاربری ( UX ) میشه و از همه مهمتر ما همیشه به بروزترین اطلاعات موجود در سرور دسترسی داریم.

منظور از پشت صحنه ، زمانی هست که کاربر روی صفحه وب فوکوس میکنه یا اینترنت کاربر قطع شده و مجدد وصل میشه. در چنین زمان هایی میتونیم اطلاعات رو از سرور دریافت کنیم.

  • درخواست مجدد اطلاعات ( Automatic Retries )

فرض کنید میخوایم یک درخواست به سرور بزنیم که لیست مقالات رو دریافت کنیم. اگه این request با خطا مواجه بشه ری اکت کوئری بصورت خودکار مجدد این درخواست رو تکرار میکنه.

  • استفاده از بروزرترین اطلاعات ( Query Invalidation and Refetching )

این قابلیت به ما Developer ها این امکان رو میده هر زمان که لازم بود، اطلاعات فعلی رو باطل کنیم و اطلاعات جدید رو از سرور دریافت کنیم. این قابلیت باعث میشه که خیال ما از این بابت راحت باشه که همیشه اخرین ورژن اطلاعات سرور رو داریم به کاربر نشون میدیم.

تو مثال زیر نحوه کش کردن و دریافت اطلاعات در پشت صحنه ( Cashing And background Fetching ) شرح داده شده:

				
					import { useQuery } from "react-query";
import axios from "axios";
interface Post {
  id: number;
  title: string;
  body: string;
}
const fetchPosts = async (): Promise<Post[]> => {
  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
  return response.data;
};
const PostsList: React.FC = () => {
  const { isLoading, isError, error, data } = useQuery<Post[], Error>("posts", fetchPosts, {
    cacheTime: 5 * 60 * 1000, // اطلاعات برای پنج دقیقه کش میشه
    staleTime: 1 * 60 * 1000, // اطلاعات پس از یک دقیقه باطل میشه
    refetchOnWindowFocus: true, // بروزرسانی مجدد اطلاعات پس از فوکوس شدن صفحه وب
  });
  if (isLoading) {
    return <div>درحال دریافت...</div>;
  }
  if (isError) {
    return <div>{error.message}:ارور</div>;
  }
  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};
export default PostsList;

تو مثال بالا  مشخص کردیم که چطور اطلاعات ما کش بشن.

تو خط 14 ما مشخص کردیم که اطلاعات دریافت شده از سرور برای چه مدتی کش بشن.

تو خط 15 مشخص کردیم که اطلاعات دریافت شده از سرور پس از چه مدتی باطل بشن ( پس از باطل شدن، مجدد اطلاعات از سرور دریافت میشه )

تو خط 16 مشخص کردیم که درصورت اتفاق افتادن فوکوس در صفحه وب ، مجدد اطلاعات از سرور دریافت بشه. این همون Background Fetching هست که بالاتر راجبش صحبت کردیم.

ری اکت کوئری - react query دری ری اکت - react query در react - کتابخانه ری اکت کوئری - کتابخانه react query - هوک useQuery

ری اکت کوئری یا ریداکس !؟  ( Redux vs React Query )

ری اکت کوئری بخاطر عملکرد خیلی خوب در بهبود Performance اپیکیشن های ری اکت و سادگی در استفاده به شهرت رسیده.

اما شاید برخی از Developer ها بین انتخاب React Query و Redux مردد باشن. پس بیاید ببینیم که وجه تمایز کتابخانه ری اکت کوئری نسبت به Redux چیه ؟

یادگیری و کار با ری اکت کوئری در ری اکت خیلی آسون و سادس ! در عوض ریداکس پیچیدگی خیلی زیادی داره ..

عملکرد React Query در زمینه بهینه سازی اپیکیشن نسبت به Redux بهتره.( با توجه به ویژگی هایی که در موردش صحبت کردیم )

مقایسه React Query با رقبا

تو جدول زیر ما کتابخانه React Query رو با URQL و Apollo Client ( رقبای خودش ) مقایسه کردیم تا ببینیم کدوم برای استفاده بهتره :

نوع مقایسه

React Query

URQL

Apollo Client

امتیاز گیت هاب
29 هزار
7.4 هزار
18 هزار
استفاده آسان ؟
خیلی آسان !
آسان !
 
آسان !
قابل استفاده در ؟
ری اکت
ری اکت، پرفکت،اسولت
ری اکت و گراف کیو ال
قابلیت Focus Refetching
قابلیت شخصی سازی ؟
قابلیت کش کردن
( Cashing )
دریافت اطلاعات از سرور
( Data Fetching )
GraphQL ؟

جمع بندی

به جرئت میشه گفت که ری اکت کوئری برای همه پروژه های ری اکت ضروریه ! چون عملیات دریافت اطلاعات از سرور ، کش کردن اون اطلاعات و بروزرسانی اون اطلاعات رو برای ما خیلی ساده انجام میده و مدیریت میکنه.

همچنین استفاده از React Query در React باعث بهبود تجربه کاربری ( UX ) و افزایش Performance اپیکیشن ما میشه.

ما تو مقاله قبلی راجب کتابخانه SWR صحبت کردیم. این کتابخانه خیلی خیلی شبیه به ری اکت کوئری هست. پیشنهاد میکنم این مقاله رو هم مطالعه کنید و باتوجه به نیاز پروژتون یکی از این 2 کتابخونه خفن رو انتخاب کنید 🙂

امیداورم که react query در ری اکت رو خیلی خوب متوجه شده باشین 🙂

کتابخانه ری اکت کوئری به عنوان یک Data Fetcher ( دریافت کننده اطلاعات از سرور ) به ما در زمینه دریافت اطلاعات از سرور کمک میکنه. همچنین قابلیت Cashing ( کش کردن اطلاعات ) و State Management ( مدیریت حالت ) هم داره.

کاملا ! تو این مقاله چگونگی استفاده از کتابخانه React Query در React رو توضیح دادیم.

کتابخانه react query ، هوک useQuery رو در اختیار ما گذاشته تا به کمک این هوک بتونیم Data Fetching رو انجام بدیم. ( دریافت اطلاعات از سرور )

react query در ری اکت ، هوک useMutation رو در اختیار ما گذاشته تا به کمک این هوک بتونیم اطلاعات موجود در سرور رو بروزرسانی کنیم.

سوالات متداول فِرانت اِندی
درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

22 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • ری اکت کوئری در ری اکت کاربردیه یا در سایر کتابخانه ها و فریمورک های جاوا اسکریپتی هم قابل استفادس ؟ من از ری اکت کوئری در ری اکت استفاده میکنم، میخوام ببینم تو Angular هم میشه ازش استفاده کرد ؟

    پاسخ

    • سلام و درود
      ری اکت کوئری در React کاربرد داره بزرگوار .
      تو سایر کتابخانه ها و فریمورک های جاوا اسکریپتی، کتابخانه های مشابهی برای این مورد وجود داره.

      پاسخ

  • ری اکت کوئری واقعا فوق العادس 🙂 کاش زودتر با کتابخانه React Query آشنا میشدم .

    پاسخ

    • سلام و درود
      بله بله react query فوق العادس 🙂 خوشحالم که براتون مفید واقع شده

      پاسخ

  • توضیحاتی که درمورد ری اکت کوئری دادید عااالی بودن و خیلی راحت متوجه شدم ممنون ازتون

    پاسخ

    • سلام و درود
      خواهش میکنم بزرگوار خوشحالم که مفید بوده براتون 🙂
      موفق باشید

      پاسخ

  • سلام من سه ماهه که ریاکت رو شروع کردم. بنظر شما میتونم ری اکت کوئری رو شروع کنم به یادگیری ؟ زوده یا زود نیست ؟
    ممنون میشم راهنمایی کنین

    پاسخ

    • سلام و درود
      اگه به کتابخانه ری اکت و مباحث اصلی و پایه اون تسلط پیدا کردید، هیچ مانعی برای شروع یادگیری ری اکت کوئری نیست. ضمن اینکه با صرف چند ساعت زمان میشه ری اکت کوئری رو مسلط شد چون مبحث خیلی پیچیده و سنگینی نداره.
      موفق باشید

      پاسخ

    • سلام 🙂
      ممنونم از نظر قشنگت و خوشحالم مطالبی که گذاشتیم برات مفید بوده 🙂
      موفق باشی

      پاسخ

دیدگاهتان را بنویسید