کتابخانه react-query

یکی از کارهای مهمی که در زمان توسعه وب اپلیکیشن های react بهش برمی خوریم گرفتن داده از سمت سرور است. ابزارها و کتابخانه های متنوعی برای این منظور ساخته شده اند. مثلا متد fetch که مرورگرها در اختیار ما قرار می دهند رو می تونیم استفاده کنیم یا از کتابخانه هایی مثل axios که امکانات بیشتری نسبت به fetch در اختیارمون قرار میده استفاده کنیم.

در این مقاله به یکی از بهترین کتابخانه ها در زمینه واکشی داده ها (data fetching) می پردازیم. این کتابخانه کارهایی فراتر از data fetching برامون انجام میده. یکی از بهترین کارهای این کتابخونه کش کردن (caching) داده های گرفته شده از سرور هستش که کمک می کنه که در دفعات بعدی به جای این که به سرور درخواست داده بدیم بتونیم از داده های ذخیره شده در حافظه کش استفاده کنیم که این باعث میشه هم درخواست اضافه به سرور نزنیم و هم کاربر سرعت بهتری رو تجربه می کنه.

اگر در توسعه وب اپلیکیشنتون با عملیات async سروکار دارید قطعا با سوالات زیر مواجه می شوید:

1) اگر در زمان دریافت داده از سرور با خطا مواجه شویم چه کاری باید انجام بدیم؟

2) در حالتی که کاربر منتظر دریافت داده ها هستش و هنوز داده ها آماده نشده اند چه اتفاقی بیافتد و چه چیزی به نمایش گذاشته شود؟

3) اگر در زمان دریافت داده از سرور اینترنت کاربر قطع بشه چه واکنشی نشان دهیم؟

4) و ...

جواب سوالات بالا و ده ها سوال دیگه رو کتابخانه react-query به طور کامل جواب داده؛ که در ادامه به بررسی این کتابخانه می پردازیم.

شاید این سوال براتون پیش بیاد که چرا با وجود کتابخانه ای مثل Redux که به لطف داشتن middleware ها می تونیم داخل action عملیات async رو هم مدیریت کنیم نیاز به کتابخانه هایی مثل react query داریم؟

توی پروژه های react ما معمولا با دو نوع state درگیر هستیم یکی client state و دیگری server state. برای مدیریت client state، کتابخانه Redux بسیار عالی هستش ولی برای مدیریت server state ها، Redux هیچ ابزار ویژه ای در اختیارمون قرار نمیده و همه چیز رو خودمون باید مدیریت کنیم مثلا اگر در حین گرفتن داده ها از سرور با خطا مواجه شدیم چطور خطا نشون بدیم یا مثلا اگر هنوز دیتا از سرور لود نشده یه loading به کاربر نشون بدیم یا مسئله caching و ده ها مسئله دیگر که Redux برای این مسائل هیچ راه حلی نداره و همه چیز رو خودمون باید مدیریت کنیم ولی در طرف مقابل react-query تمامی این مسائل رو به خوبی مدیریت می کنه و در نتیجه به ساده ترین شکل ممکن می تونیم با عملیات های async کار کنیم و لذتش رو ببریم.

مقایسه fetch کردن داده از سرور:

همونطور که می بینید استفاده از react-query بسیار ساده تر است. نکته جالب اینه که react-query داده ها رو توی حافظه کش ذخیره می کنه و در دفعات بعدی از اونجا داده رو می خونه. در تصاویر زیر قضیه cache کردن به خوبی نشون داده شده است.

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

در تصویر بالا می بینیم که react-query با cache کردن دیتاها، باعث شد سرعت لود بسیار سریع بشه و این واقعا عالیه

قابلیت Window Focus Refetching

به کمک این قابلیت می تونیم اگر کاربر در مرورگرش، بین تب ها جا به جا شد، عملیات گرفتن دوباره داده ها رو انجام بدیم یا نه. این قابلیت به صورت پیشفرض در react query فعال هستش ولی در صورت نیاز می تونین اونو غیر فعال کنید. تصاویر زیر این قابلیت رو بهتر نشون میدن

اگر به تصویر بالا سمت راست دقت کنید میبینید هر بار که از وب اپلیکیشن خودمون خارج میشم و تب رو تغییر میدم و برمیگردم به وب اپلیکیشن؛ از نظر react-query داده ها قدیمی شدن و باید داده جدید fetch بشه ولی اگر این ویژگی برای پروژه شما مناسب نیست می تونین اونو غیرفعال کنید. تصویر زیر حالت غیرفعال شده این ویژگی رو نشون میده

در تصویر بالا، اگر به قسمت سمت راست دقت کنید می بینید که هر بار که از وب اپلکیشن خارج می شم و دوباره برمیگردوم هیچ دیتای جدیدی fetch نمیشه

قابلیت Refetch On Reconnect

بعضی وقتا پیش میاد که مثلا وسط گشت و گذار داخل یه سایتی ، یهو انترنتتون قطع میشه یا مثلا بسته اینترنتتون تموم میشه تا اینترنت بخرید و دوباره وصل بشید کلی زمان میگذره، react-query در این حالت ها به صورت پیشفرض به محض وصل شدن دوباره اینترنت میره داده های جدید رو دوباره fetch می کنه، البته اگر این قابلیت رو نمی خواید می تونید اونو غیرفعال کنید. تصاویر زیر این قابلیت رو بهتر نشون میده

اگر به تصویر بالا سمت راست دقت کنید، می بینید که در قدم اول اینترنت رو قطع کردم و دوباره وصل کردم که بلافاصله عملیات Refetch کردن رو انجام داد.

اگر به تصویر بالا سمت راست دقت کنید، می بینید که در قدم اول اینترنت رو قطع کردم و دوباره وصل کردم ولی برعکس حالت قبلی، دیگه هیچ Refetch شدنی رخ نداد

ابزار React Query Devtools

اگر با Redux کار کرده باشید می دونید که Redux یک افزونه فوق العاده عالی به نام Redux Dev Tools داره که می تونید این ابزار رو روی مرورگرتون نصب کنید و ازش برای مانیتور کردن رفتار state ها و دیباگ کردن و ... استفاده کنید. خبر خوب اینه که react-query هم همچین ابزاری داره که با استفاده از اون می تونید به راحتی وضعیت fetch کردن هاتون رو مدیریت کنید.

خب به انتهای این مقاله رسیدیم. هدف من از این مقاله آشنایی شما با react-query و نشون دادن گوشه ای از قدرت فوق العاده این کتابخونه بود. پیشنهاد می کنم حتما به سایت react-query یه سری بزنید و بیشتر با این کتابخونه آشنا بشید.

اگر نقدی، پیشنهادی یا سوالی داشتین، خوشحال میشم در قسمت نظرات با من به اشتراک بزارید.

شاد و موفق باشید.

منابع:

1-https://tanstack.com/query/v4
2-https://blog.openreplay.com/fetching-and-updating-data-with-react-query