React Query به ساده ترین شکل ممکن

ساده‌سازی دریافت داده‌ها با React Query

راهنمایی برای ارتقای مدیریت وضعیت (State)

بارگذاری و کش کردن داده‌ها برای اپلیکیشن‌های وب قوی اهمیت زیادی داره. اما مدیریت وضعیت‌های غیرهم‌زمان (async) توی یه پروژه React می‌تونه خیلی سریع پیچیده و گیج‌کننده بشه. اینجاست که React Query وارد میشه، یه کتابخونه همه‌کاره برای واکشی، کش کردن، هماهنگ‌سازی و به‌روزرسانی داده‌هایی که از سرور میان.

توی این مطلب، چندتا از مزایای مهم React Query رو بررسی می‌کنیم که کمک می‌کنن مدیریت داده‌هات رو حرفه‌ای‌تر و راحت‌تر انجام بدی:

کش کردن خودکار

یکی از جذاب‌ترین ویژگی‌های React Query، کش شدن خودکار نتایج واکشی‌هاست. وقتی داده‌ای واکشی می‌شه، همون داده روی مرورگر ذخیره می‌شه تا اگه همون درخواست دوباره زده شد، لازم نباشه دوباره به سرور بره.

مثلاً:

function App() {
const { data } = useQuery('posts', fetchPosts)
return (
 <div>
 {data?.map(post => (
 <Post key={post.id} post={post} />
 ))}
 </div>
 )
}

وقتی این کامپوننت برای اولین بار رندر می‌شه، میاد پست‌ها رو از سرور می‌گیره و توی حافظه‌ی محلی (کش) ذخیره می‌کنه. اما دفعه‌های بعدی که رندر می‌شه، دیگه لازم نیست دوباره به سرور وصل بشه ، همون داده‌های قبلی رو از کش می‌خونه!

این کش کردن فقط محدود به یه کامپوننت نیست؛ بلکه به‌صورت سراسری توی کل برنامه کار می‌کنه. یعنی هرجایی که از کوئری 'posts' استفاده بشه، همون داده‌ی کش‌شده به اشتراک گذاشته می‌شه ، بدون درخواست جدید.

خیلی باحاله، نه؟ 😄

واکشی خودکار (Automatic Refetching)

علاوه‌بر کش کردن، React Query این قابلیت رو هم داره که داده‌های کش‌شده رو با سرور هماهنگ نگه داره.

مثلاً ادامه‌ی مثال پست‌ها رو در نظر بگیر: اگه یه کامپوننت دیگه، یه کاربر، یا یه اکشن وضعیت رو طوری تغییر بده که روی پست‌ها تأثیر بذاره، اون‌وقت:

mutate({ type: ‘ADD_POST’})

هر کامپوننتی که داره پست‌ها رو واکشی می‌کنه، به‌صورت خودکار بعد از تغییرات دوباره داده‌ها رو از سرور می‌گیره و آپدیت می‌شه!

این یعنی کلی از دردسرهای مدیریت دستی وضعیت از دوش شما برداشته می‌شه. React Query پشت صحنه بیشتر جریان داده‌ها رو خودش به‌صورت خودکار هماهنگ می‌کنه.

مدیریت خطای قدرتمند

درخواست‌های شبکه‌ای همیشه ممکنه با خطاهایی مثل قطع اتصال، تایم‌اوت، یا خطاهای سرور (مثل کدهای 5xx) روبه‌رو بشن.

React Query امکانات کاملی برای مدیریت این خطاها ارائه می‌ده؛ مثل:

• تلاش خودکار دوباره وقتی اتصال اینترنت برگشت

• نمایش مقادیر پیش‌فرض اگه خطا ادامه‌دار باشه

• جلوگیری از پاک شدن داده‌ها موقع خروج کامپوننت، در صورت نیاز

مثلاً کوئری مربوط به پست‌های ما می‌تونه به‌خوبی با سناریوهای مختلف خطا کنار بیاد و برنامه بدون مشکل ادامه بده:

function Posts() {
 const { data, error, isLoading } = useQuery(‘posts’, fetchPosts) 
 
 if (error) {
 return <Error />
 }
 
 if (isLoading) {
 return <Spinner /> 
 }

return (
 <div>{data}</div>
 ) 
}

خیلی راحت‌تر از اینه که بخوای وضعیت بارگذاری رو به‌صورت دستی مدیریت کنی!

ابزار توسعه قدرتمند (Devtools)

برای دیباگ و بررسی دقیق، React Query یه پنل ابزار توسعه‌ی عالی داره. با این پنل می‌تونی همه‌ی کوئری‌ها، داده‌های کش‌شده، وضعیت درخواست‌ها، خطاها و کلی چیز دیگه رو توی یه نمای کامل ببینی.

این ابزار کمک زیادی می‌کنه تا هم عملکرد برنامه رو بهینه کنی، هم مشکلات رو سریع‌تر پیدا و رفع کنی.

معماری ساده‌تر

تو پروژه‌های بزرگ React، مدیریت داده‌ها خیلی زود می‌تونه پیچیده بشه. React Query میاد و به‌عنوان یه مرجع اصلی داده ها ، کلی از پیچیدگی رو کاهش می‌ده و داده‌ها و منطق اشتراکی بین کامپوننت‌ها رو ساده‌تر می‌کنه.

کارهایی مثل هماهنگ کردن فرم و کش، واکشی دوباره‌ی داده‌ها، مدیریت خطاها — بیشترشون به‌صورت خودکار انجام می‌شن. این یعنی می‌تونی تمرکزت رو بذاری روی طراحی رابط کاربری، نه جنگیدن با وضعیت‌های مختلف بین کامپوننت‌ها.

تجربه‌ی خودم این بوده که باعث می‌شه کامپوننت‌ها تمیزتر و با مسئولیت‌های مشخص‌تر ساخته بشن. اگه احساس می‌کنی مدیریت وضعیت‌های async توی پروژه‌ت داره دردسرساز می‌شه، حتماً یه بار React Query رو امتحان کن.

ویژگی‌های خفن دیگه‌ای هم داره که می‌تونی بیشتر بری سراغش: مثل صفحه‌بندی (pagination)، اسکرول بی‌نهایت، کار با چند API هم‌زمان، و ادغام با فریم‌ورک‌های معروف.

اگه دنبال ساخت رابط‌های کاربری داده‌محور با سرعت و راحتی بیشتر هستی، React Query گزینه‌ی خیلی خوبی برای پروژه‌ی بعدیته.

ممنونم که تا پایان این مطلب همراه بودید! امیدوارم براتون مفید بوده باشه و بتونه تو پروژه‌هاتون کمک‌تون کنه. 🙌