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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دریافت اطلاعات از سرور به کمک ری اکت کوئری ( 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 در ری اکت استفاده کنیم ؟

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

npm i react-query

لطفا برای مطالعه ادامه این مقاله + پروژه تستی و مثال های کامل روی لینک آموزش ری اکت کوئری در React کلیک کنید .