7.8 שליפת נתונים React Query תרגול
תרגול - שליפת נתונים - React Query (TanStack Query)¶
תרגיל 1 - שליפת נתונים בסיסית¶
צרו אפליקציה שטוענת ומציגה נתונים מ-API.
דרישות:
- השתמשו ב-JSONPlaceholder API (https://jsonplaceholder.typicode.com)
- הציגו רשימת פוסטים עם useQuery
- לחיצה על פוסט מציגה את הפרטים שלו (שליפה נפרדת)
- הציגו את התגובות (comments) של כל פוסט
- הוסיפו כפתור "רענן"
- הציגו סטטוס טעינה ושגיאה מתאימים
תרגיל 2 - CRUD מלא עם Mutations¶
צרו אפליקציית CRUD מלאה לניהול משימות.
דרישות:
- שליפת רשימת משימות עם useQuery
- יצירת משימה חדשה עם useMutation + invalidation
- עריכת משימה עם useMutation + invalidation
- מחיקת משימה עם useMutation + invalidation
- הצגת מצב loading לכל mutation בנפרד
- הצגת הודעות הצלחה/שגיאה
- אפשר להשתמש ב-API מדומה (mock) עם setTimeout
תרגיל 3 - עדכונים אופטימיסטיים¶
הוסיפו עדכונים אופטימיסטיים לאפליקציית המשימות.
דרישות:
- כשמסמנים משימה כהושלמה, ה-UI מתעדכן מיד (לפני אישור השרת)
- אם השרת מחזיר שגיאה, ה-UI חוזר למצב הקודם
- הוסיפו השהייה מלאכותית של 2 שניות כדי להדגים את האפקט
- גרמו לשגיאה אקראית (1 מתוך 5 פעמים) כדי לבדוק את ה-rollback
- הוסיפו Toast/הודעה כשיש שגיאה והמצב חוזר
תרגיל 4 - דפדוף¶
צרו רשימת משתמשים עם דפדוף.
דרישות:
- הציגו 10 משתמשים בכל עמוד
- כפתורי "הקודם" ו"הבא"
- הצגת מספר עמוד נוכחי ומספר עמודים כולל
- שמירת הנתונים הקודמים בזמן טעינת עמוד חדש (placeholderData)
- שקיפות (opacity) מופחתת בזמן טעינה
- Prefetch של העמוד הבא (לטעון מראש)
תרגיל 5 - גלילה אינסופית¶
צרו רשימת מוצרים עם גלילה אינסופית.
דרישות:
- השתמשו ב-useInfiniteQuery
- טעינה אוטומטית כשמגיעים לתחתית הרשימה (Intersection Observer)
- הצגת loading spinner בתחתית בזמן טעינה
- מניעת טעינה כפולה
- הצגת מספר המוצרים הנוכחי ומספר כולל
- כפתור "חזרה למעלה"
תרגיל 6 - אפליקציה מלאה עם React Query + Zustand¶
צרו אפליקציית בלוג עם React Query לשליפת נתונים ו-Zustand ל-UI state.
דרישות:
- React Query: שליפת פוסטים, שליפת פוסט בודד, יצירת פוסט, עריכה, מחיקה
- Zustand: theme, sidebar state, draft post (טיוטה)
- חיפוש פוסטים עם debounce
- סינון לפי קטגוריה
- מטמון חכם - staleTime של 5 דקות
- Prefetch כשמרחפים על לינק של פוסט
- דפדוף או גלילה אינסופית
שאלות¶
- מה ההבדל בין staleTime ל-gcTime? מה קורה כשנתונים הם stale?
- למה חשוב להשתמש ב-queryKey נכון? מה קורה אם שני queries שונים חולקים אותו key?
- מה היתרון של React Query על פני הוק useFetch מותאם אישית?
- מתי להשתמש ב-invalidateQueries ומתי ב-setQueryData?
- איך React Query ו-Zustand משלימים אחד את השני? מה כל אחד מנהל?