دوره آموزش React Query - هر آنچه که نیازه از ری اکت کوئری بدانید !

تو این دوره آموزش React Query قراره با یک پروژه و API واقعی تمامی قابلیت های ری اکت کوئری را از صفر تا صد باهم یادبگیریم و من به عنوان مدرس این دوره تمام تلاشمو کردم تا مثل یک دوستی که کنار دستتون نشسته با زبانی ساده و مثال هایی ملموس تمامی قابلیت ها و اصول آخرین نسخه از React Query را بهتون یاد بدم.

در تهیه دوره React Query از 3 منبع خیلی مهم استفاده شده:

1. از مرجع اصلی، یعنی داکیومنت React Query
2. از تنها دوره رسمیه خود React Query و تنها دوره ری اکت کوئری موجود در وبسایت Udemy
3. و از همه مهمتر تجربه 3 ساله خودم که از روزهای اول انتشار React Query باهاش بودم و توی تمامی پروژه هام ازش استفاده کردم!

React Query به معنای واقعیه کلمه یکی از جذاب ترین لایبرری ها و ابزارهاییه که طی این سال ها باهاش کار کردم و هرچقدر از قدرت و مزایای این لایبرری دوست داشتنی بگم کم گفتم و از اونجایی که از بزرگترین طرفداران این ابزار هستم، تصمیم گرفتم اولین دوره آموزشی که توی وسپار منتشر میشه، دوره آموزش React Query باشه تا علاوه بر لذتی که روزانه از کدنویسی و کار با ری اکت کوئری میبرم، لذت تدریس ری اکت کوئری هم به روزهای کاریم اضافه بشه :)

حالا این React Query که اینقدر با هیجان ازش حرف میزنی چی هست ؟

React Query یا به عبارتی TanStack Query یک Library جهت ارتباط با سمت سرور هست و دقیقا همون ابزاریه که جای خالیش توی تمامی اپلیکیشن های ری اکتی حس میشه و نبودش باعث شده تا کلی کد بیهوده برای یکسری کارهای خیلی ساده و پایه ایی مثل کش کردن، مدیریت وضعیت های loading و error، دریافت خودکار داده ها از سمت سرور و ده ها مورد دیگه بنویسیم.

ری اکت کوئری اومد و این جای خالی رو پر کرد و با سینتکسی ساده همه چیزهایی که بهش نیاز داریم رو در اختیار ما گذاشت و کار با API و ارتباط با سمت سرور رو برای ما به کاری شیرین و لذت بخش تبدیل کرد چراکه با استفاده از React Query حجم کدی که مینویسیم به طرز چشمگیری کاهش پیدا میکنه، مدیریت api هامون بشدت راحت میشه و با تنها چند خط کد و بدون نیاز به هیچگونه کانفیگی میتونیم از قابلیت های خفنی مثل سیستم کش خودکار، دریافت داده بصورت خودکار، دریافت داده در پس زمینه، pagination و ده ها مورد دیگه استفاده کنیم.

بجای نوشتن کلی کد و reducer و کلی منطق برای پیاده سازی سیستم کش، سیستم تلاش مجدد، تایمر و کلی کد پیچیده async / await ( میتونم ده تا مثال دیگه هم بزنم ) کافیه از ابزارهایی که React Query در اختیارتون گذاشته استفاده کنید تا ببینید که چند خط کد ساده چه امکانات فراوانی رو میتونه در اختیارتون بزاره و چقدر کار مدیریت api ها و ارتباطات با سمت سرور را راحت تر و بهینه تر میکنه.

از چه منابعی جهت ساخت این دوره استفاده شده ؟

این دوره آموزش React Query با استفاده از 3 منبع مختلف تهیه شده که اولین و اصلی ترین منبع ما داکیومنت اصلیه خود ری اکت کوئری هستش. چراکه بهترین منبع و مرجع برای یادگیری هر زبان و ابزاری، داکیومنت اصلی اون زبان هستش که توسط سازندگان اصلیه اون زبان تهیه شده و ماهم برای ساخت این دوره نقطه به نقطه و واو به واو داکیومنت React Query را مطالعه کردیم و از این داکیومنت در ساخت دوره خودمون استفاده کردیم.

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

و در آخر منبع دیگه ایی که توی ساخت این دوره نقش بسزایی داشته، 3 سال تجربه خود من در استفاده از React Query بوده که یجورایی از اوایل انتشار این لایبرری دوست داشتنی ازش توی پروژه های مختلفی استفاده میکردم و تونستم بعد این سالها این لایبرری را با پوست و استخون خودم تجربه کنم 😃.

مسیر آموزشی دوره React Query به چه شکله ؟

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

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

آیا همین دوره کافی خواهد بود ؟

قطعا همین دوره React Query برای شما کافی خواهد بود چراکه من فقط به تجربه 3 ساله خودم از ری اکت کوئری اکتفا نکردم و مجدد سراغ داکیومنت ری اکت کوئری رفتم و بطور کامل اونرو مطالعه کردم و علاوه بر داکیومنت سراغ تنها دوره رسمی React Query و تنها دوره ری اکت کوئری در وبسایت udemy رفتم و اونهارو هم بطور کامل برسی کردم و در نهایت با استناد به همه این منابع و تجربیات خودم این دوره را ضبط کردم. بنابر این خیالتون از نظر محتوا و پر بودن دوره راحت باشه.

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

آیا این دوره React Query آپدیت هم میشه ؟

به محض انتشار نسخه ایی جدید از React Query این دوره بروزرسانی خواهد شد و تمامی مباحث جدید بصورت رایگان در اختیار شما قرار خواهد گرفت و پیش بینی میشه که اولین آپدیت ما خیلی نزدیک باشه چراکه درحال حاضر ما داریم نسخه 4 ری اکت کوئری را آموزش میدیم و نسخه 5 ری اکت کوئری فعلا در حالت beta قرار داره و به محض انتشار رسمی، این دوره آپدیت و قسمت های جدید به این دوره اضافه خواهند شد.

خب نسخه 5 ری اکت کوئری هم منتشر شد و ما یک قسمت جدید به دوره اضافه کردیم و تمامی تغییرات و امکانات جدیدی که به react query در این ورژن اضافه شده راهم برسی کردیم

یکم بیشتر از مزایای React Query برامون بگو ...

مزایا و تاثیر ری اکت کوئری توی پروژه هامون اونقدر زیاده که نمیشه با چند کلمه توصیفش کرد، ولی میشه گفت که ما توی پروژه هامون وقتی قرار با سمت سرور ارتباطی رو ایجاد کنیم و به عنوان مثال یک درخواست GET بزنیم تا لیستی از محصولات را بگیریم، باید کلی state تعریف کنیم و بصورت دستی همه اونهارو مدیریت کنیم تا بتونیم صرفا چندتا چیز ساده مثل data و وضعیت های loading و error را داشته باشیم که به شخصه برای من کاره حوصله سر بریه و زمانی بیشتر حوصله سر بر میشه که بخواهیم همین کارهارو مجددا یجای دیگه تکرار کنیم.

اما همه این اضافه کاری ها با استفاده از React Query از بین میره و ما صرفا آدرس API خودمون رو بهش میدیم و از شیر مرغ تا جان آدمیزاد رو خود ری اکت کوئری با ساده ترین سینتکس ممکن برای ما فراهم میکنه و مثالی از سینتکس و برخی از امکانات ری اکت کوئری را میتونید در ادامه ببینید:

• سازگار با تمام تکنولوژی های سمت سرور مثل RESTful APIs, GraphQL, WebSockets
• دریافت مجدد داده از سمت سرور بصورت خودکار ( Auto Refetching )
• درخواست های موازی ( Parallel Queries )
• پاکسازی خودکار حافظه کش ( Automatic Garbage Collection )
• پشتیبانی از حالت Offline
• امکان لغو و بعدا ادامه دادن درخواست ها ( Request Cancellation )
• سیستم کش خودکار
• پشتیبانی از SSR
• Prefetching
• Infinie Queries
• و چندین مورد دیگه ....