آموزش React Query/TanStack Query: React Server State Management

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

ایجاد کوئری ها و حالت های بارگیری/خطا Creating Queries and Loading / Error states

• مقدمه ای بر React Query Introduction to React Query

• مقدمه ای بر این دوره Introduction to this Course

• مهم: React Query نسخه 3 در مقابل نسخه 4 IMPORTANT: React Query version 3 vs. version 4

• پروژه اول: Blog-em Ipsum First project: Blog-em Ipsum

• (اختیاری) عیب یابی: Creative-react-app و React Query 4.10+ (optional) TROUBLESHOOTING: create-react-app and React Query 4.10+

• ایجاد پرس و جو با useQuery Creating Queries with useQuery

• (اختیاری) عیب یابی: Node نسخه 17 و بالاتر (optional) TROUBLESHOOTING: Node v. 17 and above

• رسیدگی به وضعیت های بارگیری و خطا Handling Loading and Error States

• React Query Dev Tools React Query Dev Tools

• staleTime در مقابل cacheTime staleTime vs cacheTime

ایجاد کوئری ها و حالت های بارگیری/خطا Creating Queries and Loading / Error states

صفحه بندی، پیش واکشی و جهش Pagination, Pre-fetching and Mutations

• مقدمه ای بر آزمون های کد Intro to Code Quizzes

• آزمون کد! ایجاد پرس و جو برای نظرات وبلاگ Code Quiz! Create Query for Blog Comments

• کلیدهای پرس و جو Query Keys

• صفحه بندی Pagination

• پیش واکشی داده ها Pre-fetching Data

• isLoading در مقابل isFetching isLoading vs isFetching

• مقدمه ای بر جهش ها Intro to Mutations

• حذف پست با useMutation Delete Post with useMutation

• آزمون کد! جهش برای به روز رسانی عنوان پست Code Quiz! Mutation to Update Post Title

• خلاصه: React Query Basics Summary: React Query Basics

صفحه بندی، پیش واکشی و جهش Pagination, Pre-fetching and Mutations

پرس و جوهای بی نهایت برای بارگیری داده ها "در زمان مقرر" Infinite Queries for Loading Data "Just in Time"

• مقدمه ای بر بی نهایت اسکرول Introduction to Infinite Scroll

• آزمون کد! Infinite SWAPI را برای React Query تنظیم کنید Code Quiz! Set up Infinite SWAPI for React Query

• مقدمه ای برای useInfiniteQuery Intro to useInfiniteQuery

• تصحیح سخنرانی زیر: «useInfiniteQuery» نه «useInfiniteScroll»! CORRECTION to following lecture: `useInfiniteQuery` not `useInfiniteScroll`!

• نمودار اسکرول بی نهایت Infinite Scroll Diagram

• useInfiniteQuery Call را بنویسید Write useInfiniteQuery Call

• مؤلفه InfiniteScroll InfiniteScroll Component

• استفاده از حالت های واکشی InfiniteQuery و خطا useInfiniteQuery Fetching and Error states

• آزمون کد! گونه های بی نهایت Code Quiz! Infinite Species

• خلاصه: بی نهایت اسکرول Summary: Infinite Scroll

پرس و جوهای بی نهایت برای بارگیری داده ها "در زمان مقرر" Infinite Queries for Loading Data "Just in Time"

React Query در برنامه بزرگتر: راه اندازی، متمرکز سازی، قلاب های سفارشی React Query in Larger App: Setup, Centralization, Custom Hooks

• معرفی اپلیکیشن Lazy Days Spa Intro to Lazy Days Spa App

• یادداشت هایی در مورد ESLint و قالب بندی زیباتر Notes on ESLint and Prettier Formatting

• پلاگین React Query ESLint! React Query ESLint plugin!

• جهت کد برنامه Lazy Days Spa Lazy Days Spa App Code Orientation

• به‌روزرسانی رابط کاربری چاکرا: «تراز کردن» به جای «textAlign». Chakra UI update: `align` instead of `textAlign`

• React Query را نصب و راه اندازی کنید Install and set up React Query

• یادآوری: سرور را قبل از سخنرانی بعدی راه اندازی کنید! REMINDER: start the server before the next lecture!

• قلاب درخواست سفارشی: useTreatments Custom Query Hook: useTreatments

• داده های بازگشتی Fallback Data

• نشانگر واکشی متمرکز با useIsFetching Centralized Fetching indicator with useIsFetching

• onError Handler برای useQuery onError Handler for useQuery

• به روز رسانی: روش جایگزین برای تعیین کنترل کننده خطای جهانی UPDATE: alternative way to specify global error handler

• پیش‌فرض onError برای Query Client onError Default for Query Client

• آزمون کد! قلاب سفارشی برای useStaff Code Quiz! Custom Hook for useStaff

• خلاصه: راه اندازی برنامه بزرگتر، متمرکز سازی، قلاب های سفارشی Summary: Larger App Setup, Centralization, Custom Hooks

React Query در برنامه بزرگتر: راه اندازی، متمرکز سازی، قلاب های سفارشی React Query in Larger App: Setup, Centralization, Custom Hooks

ویژگی های پرس و جو I: پیش واکشی و صفحه بندی Query Features I: Pre-Fetching and Pagination

• افزودن داده به حافظه پنهان Adding Data to the Cache

• درمان های پیش از واکشی (مفاهیم) Pre-Fetching Treatments (concepts)

• درمان‌های پیش از واکشی (نحوه نحو) Pre-Fetching Treatments (syntax)

• مقدمه استفاده از Appointments Hook سفارشی Intro to useAppointments Custom Hook

• useQuery برای useAppointments useQuery for useAppointments

• کلیدهای پرس و جو به عنوان آرایه های وابستگی Query Keys as Dependency Arrays

• آزمون کد! قرارهای قبل از واکشی Code Quiz! Pre-Fetch Appointments

• خلاصه: ویژگی های پرس و جو I Summary: Query Features I

ویژگی های پرس و جو I: پیش واکشی و صفحه بندی Query Features I: Pre-Fetching and Pagination

ویژگی های Query II: تبدیل و واکشی مجدد داده ها Query Features II: Transforming and Re-Fetching Data

• فیلتر کردن داده ها با useQuery گزینه را انتخاب کنید Filtering Data with the useQuery select Option

• آزمون کد! انتخابگر برای استفاده کارکنان Code Quiz! Selector for useStaff

• مقدمه ای برای واکشی مجدد Intro to Re-Fetch

• گزینه های واکشی مجدد را به روز کنید Update Re-Fetch Options

• گزینه های واکشی مجدد جهانی Global Re-Fetch Options

• لغو پیش‌فرض‌های واکشی مجدد و نظرسنجی Overriding Re-Fetch Defaults and Polling

• نظرسنجی: بازیابی خودکار در یک بازه زمانی Polling: Auto Re-Fetching at an Interval

• خلاصه: Query Features II Summary: Query Features II

ویژگی های Query II: تبدیل و واکشی مجدد داده ها Query Features II: Transforming and Re-Fetching Data

React Query و Authentication React Query and Authentication

• مقدمه ای برای React Query و Authentication Intro to React Query and Authentication

• useAuth، useUser و useQuery useAuth, useUser and useQuery

• Auth را با React Query ادغام کنید Integrate Auth with React Query

• ماندگاری داده های کاربر در محل ذخیره سازی Persist User Data in localStorage

• FillData از localStorage برای useQuery initialData from localStorage for useQuery

• پرسش‌های وابسته: ملاقات‌های کاربر Dependent Queries: userAppointments

• Query Client removeQueries روش Query Client removeQueries method

• خلاصه: React Query و Auth Summary: React Query and Auth

React Query و Authentication React Query and Authentication

جهش: استفاده از React Query برای به روز رسانی داده ها در سرور Mutations: Using React Query to Update Data on the Server

• مقدمه ای بر جهش ها و تنظیمات جهانی جهش ها Introduction to Mutations and Mutations Global Settings

• به روز رسانی: روش دیگری برای تعیین کنترل کننده خطای جهانی جهش UPDATE: another way to specify global mutation error handler

• قلاب جهش سفارشی: useReserveAppointments Custom Mutation Hook: useReserveAppointments

• اختیاری: TypeScript برای تابع 'mutate' OPTIONAL: TypeScript for `mutate` Function

• باطل کردن پرس و جو پس از جهش Invalidating Query after Mutation

• پیشوندهای کلید پرس و جو Query Key Prefixes

• آزمون کد! جهش برای لغو یک قرار Code Quiz! Mutation to Cancel an Appointment

• حافظه پنهان کاربر و Query را با پاسخ جهش به روز کنید Update User and Query Cache with Mutation Response

• معرفی به‌روزرسانی‌های خوش‌بینانه در React Query Intro to Optimistic Updates in React Query

• مهم! به روز رسانی به سخنرانی بعدی IMPORTANT! Update to following lecture

• ایجاد یک پرس و جو "قابل لغو" Making a Query "Cancel-able"

• نوشتن به روز رسانی خوش بینانه Writing Optimistic Update

• خلاصه: جهش Summary: Mutations

جهش: استفاده از React Query برای به روز رسانی داده ها در سرور Mutations: Using React Query to Update Data on the Server

تست React Query Testing React Query

• مقدمه ای برای تست React Query Intro to Testing React Query

• راه اندازی تست، از جمله Mock Service Worker Testing Setup, including Mock Service Worker

• درخواست مشتری و ارائه دهنده در تست ها Query Client and Provider in Tests

• آزمایش داده های پرس و جو ارائه شده Testing Rendered Query Data

• آزمون کد! آزمایش داده های کارکنان ارائه شده Code Quiz! Test Rendered Staff Data

• تست خطاهای پرس و جو Testing Query Errors

• آزمون کد! خطاهای پرس و جو کارکنان Code Quiz! Staff Query Errors

• آزمایش جهش ها Testing Mutations

• آزمون کد! تست لغو جهش قرار Code Quiz! Test Cancel Appointment Mutation

• مقدمه ای برای تست قلاب های سفارشی Intro to Testing Custom Hooks

• لطفاً بخوانید: به روز رسانی به سخنرانی زیر PLEASE READ: update to the following lecture

• فیلتر قرارهای آزمایشی Test Appointments Filter

• آزمون کد! فیلتر کارکنان تست Code Quiz! Test Staff Filter

• خلاصه: تست React Query Summary: Testing React Query

تست React Query Testing React Query

جایزه Bonus

• کوپن! Coupons!

جایزه Bonus