لماذا نستخدم مكتبة لإدارة حالة الخادم مثل React Query؟

Question

Accepted Answer

**مكتبات إدارة حالة الخادم** (React Query/TanStack Query، SWR، RTK Query) متخصصة في إدارة **البيانات المجلوبة من الخادم** — حيث تتعامل معها كذاكرة تخزين مؤقتة تبقى متزامنة مع المصدر البعيد. وهي تتعامل مع التخزين المؤقت وحالات التحميل/الخطأ وإعادة الجلب وإزالة التكرار تلقائياً، مما يحل محل كمية ضخمة من الكود اليدوي. ## المشكلة: بيانات الخادم ليست مثل حالة الواجهة بيانات الخادم **مملوكة للخادم** ومجرد مخبأة على العميل، لذا يمكن أن تصبح **قديمة**. إدارتها يدويا تعني إعادة تطبيق التخزين المؤقت وتتبع التحميل/الخطأ وإعادة الجلب والمحاولات الجديدة وإزالة التكرار لكل نقطة نهاية — أمر عرضة للأخطاء ومكرر. ## ما يوفره React Query في ربط واحد ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // cache key queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // consider fresh for 1 min }); if (isLoading) return ; if (error) return ; return ; } ``` هذا الربط الواحد يوفر: ```text ✓ Caching — data cached by queryKey, shared across components ✓ Loading/error — isLoading/error states managed for you ✓ Deduplication — same query in 5 components = ONE network request ✓ Background refetch— refetch on window focus/reconnect to stay fresh ✓ Stale-while-revalidate — show cached data instantly, refetch in background ✓ Retries — auto-retry failed requests ✓ Pagination/infinite scroll, prefetching, cache invalidation ``` ## الطلبات + إلغاء صلاحية الذاكرة ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` بعد الطلب، تقوم بإلغاء صلاحية الاستعلام ذي الصلة والذاكرة تعيد الجلب — مما يحافظ على تطابق الواجهة مع الخادم. ## يقلل من احتياجات "الحالة العامة" لديك ```text Much of what people put in Redux is actually SERVER state. Moving it to React Query often shrinks global state to just true UI state (theme, modals, filters) — simplifying the whole app. ``` ## لماذا يهم مكتبات إدارة حالة الخادم تحل مشكلة تتعامل معها الأدوات العامة (Redux و useState) بشكل سيء: إبقاء ذاكرة التخزين المؤقت للعميل متزامنة مع البيانات البعيدة. وهي تستبدل مئات الأسطر من منطق الجلب/التخزين المؤقت/التحميل اليدوي بربط تصريحي، وتوفر السلوك المتقدم (إزالة التكرار، إعادة الجلب في الخلفية، العفا عن الكود-أثناء-إعادة-التحقق) الذي يصعب بناؤه بشكل صحيح يدويا. الاعتراف بأن حالة الخادم تستحق أداة مخصصة خاصة بها — وأن اعتماد واحدة غالبا ما يبسط الحالة العامة بشكل كبير — هي أحد أكثر رؤى معمارية الواجهة الأمامية الحديثة تأثيرا.