معرفی دوره

در دنیای مدرن توسعه فرانت‌اند، مدیریت وضعیت سرور (Server State) همواره یکی از چالش‌های اصلی برنامه‌نویسان React بوده است. این دوره به شما کمک می‌کند تا با ابزار قدرتمند React Query و نسخه‌ی جدید آن یعنی TanStack Query آشنا شوید و یاد بگیرید چگونه داده‌های سرور را به‌صورت بهینه فراخوانی، کش، بروزرسانی و هماهنگ کنید. در طی این مسیر، از مفاهیم پایه تا پیاده‌سازی پروژه‌های عملی پیش خواهیم رفت تا تسلط واقعی بر این کتابخانه‌ها پیدا کنید.

چه خواهید آموخت

• مفاهیم اصلی Server State در React و تفاوت آن با State محلی.
• نصب و پیکربندی React Query / TanStack Query در پروژه‌های CRA و Next.js.
• خواندن داده‌ها با useQuery و مدیریت کش داخلی.
• بروزرسانی داده‌ها به کمک useMutation و پیاده‌سازی Optimistic Updates.
• مکانیزم‌های Refetching و Invalidation برای تازه نگه داشتن داده‌ها.
• استفاده از ویژگی‌های پیشرفته مانند useInfiniteQuery برای بارگذاری ناهمزمان (infinite scrolling) و صفحهبندی (pagination).
• انتزاع و بهینه‌سازی عملکرد با QueryClient و Query Keys.
• پیاده‌سازی پروژه واقعی با تمرکز روی بهترین شیوه‌ها و الگوهای طراحی.

مزایا و ویژگی‌های کلیدی

• کاهش کدهای boilerplate برای فراخوانی و مدیریت داده‌ها.
• افزایش کارایی با مکانیزم‌های هوشمند کش و بروزرسانی تدریجی.
• پشتیبانی کامل از SSR و SSG در Next.js با مهاجرت آسان به TanStack Query.
• تجربه کاربری بهینه با بارگذاری سریع‌تر و جلوگیری از flicker در UI.
• سازگاری بالا با کتابخانه‌های محبوب دیگر مانند Axios و Fetch API.
• ابزار مانیتورینگ و DevTools مخصوص برای Debugging راحت‌تر.

پیش‌نیازها

• آشنایی پایه با React (Hooks، State، Props).
• درک مقدماتی از Promise و توابع ناهمزمان (Async/Await).
• آشنایی با Fetch API یا Axios برای فراخوانی HTTP.
• درک ابتدایی از TypeScript (در صورت تمایل به استفاده از نسخه تایپ شده).

مخاطبان دوره

• توسعه‌دهندگان React که به‌دنبال بهینه‌ترین روش مدیریت داده‌های سرور هستند.
• فول‌استک دولوپرهایی که از Next.js برای SSR و SSG استفاده می‌کنند.
• هر کسی که می‌خواهد تجربه کاربری سریع‌تر و پایدارتری را در اپلیکیشن‌های وب فراهم کند.

سرفصل‌های دوره

• ماژول 1: آشنایی و راه‌اندازی
  • معرفی React Query و تاریخچه TanStack Query
  • نصب و پیکربندی اولیه
  • ساخت اولین QueryClient
• ماژول 2: خواندن و کشینگ داده‌ها
  • useQuery و فواید آن
  • تنظیم گزینه‌های cacheTime و staleTime
  • Refetch On Window Focus و Interval Polling
• ماژول 3: mutations و بروزرسانی داده‌ها
  • useMutation و شیوه استفاده
  • Optimistic Updates و Error Handling
  • Invalidation و Refetch پس از Mutation
• ماژول 4: پیشرفته‌ترین یوتیلیتی‌ها
  • useInfiniteQuery برای بارگذاری ناهمزمان
  • Pagination با React Query
  • Parallel & Dependent Queries
• ماژول 5: پروژه عملی
  • طراحی یک داشبورد واقعی با کاربران و لاگ فعالیت
  • یکپارچه‌سازی با Auth و مدیریت دسترسی
  • بهینه‌سازی نهایی و انتشار

مثال‌های عملی

فرض کنید می‌خواهید فهرست پست‌ها را از یک API واکشی کنید. با React Query کافی است:

const { data, isLoading, error } = useQuery('posts', fetchPosts);

با اینکار کش هوشمند راه‌اندازی می‌شود و در مراجعات بعدی تا زمانی که staleTime منقضی نشده، از داده‌های ذخیره‌شده استفاده می‌کند. برای بروزرسانی یک پست:

const mutation = useMutation(updatePost, { onSuccess: () => queryClient.invalidateQueries('posts') });

با فراخوانی mutation.mutate({ id: 1, title: 'جدید' })، پس از موفقیت‌آمیز بودن عملیات، کوئری «posts» دوباره فراخوانی می‌شود تا آدرس جدید در UI نمایش داده شود.

برای پیاده‌سازی infinite scroll:

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery('comments', fetchComments, { getNextPageParam: last => last.nextCursor });

در این مثال، با رسیدن به انتهای لیست می‌توانید متد fetchNextPage را صدا بزنید تا به‌صورت خودکار داده‌های بعدی بارگذاری شود.

در طول دوره، این سناریوها را با پروژه‌های دنیای واقعی تمرین می‌کنید تا آماده تولید اپلیکیشن‌های مقیاس‌پذیر باشید.