لماذا بدأت تعلم TanStack Query

بدأت اليوم تعلم TanStack Query.

إنها تغير طريقة بناء تطبيقات React.

يعتقد الكثير من المطورين أنها أداة لإدارة الحالة (state management) مثل Redux، لكنها ليست كذلك؛ فهي تحل مشكلة مختلفة تماماً.

تتعامل تطبيقات React مع نوعين من الحالة (state):

• حالة واجهة المستخدم (UI state): الأزرار، والنوافذ المنبثقة (modals)، وحقول الإدخال. • حالة الخادم (Server state): البيانات القادمة من واجهات برمجة التطبيقات (APIs) مثل المستخدمين أو المنتجات.

يستخدم معظم المطورين useState أو useEffect أو Redux لإدارة حالة الخادم، وهذا الأمر يصبح فوضوياً بسرعة. فالبيانات الخاصة بالخادم صعبة التعامل لأنها تتغير، وتحتاج إلى تخزين مؤقت (caching)، وقد تتعرض للفشل.

TanStack Query هي أداة لإدارة حالة الخادم، وهي تتولى هذه المهام بدلاً منك:

• جلب البيانات • تخزين الاستجابات مؤقتاً • تحديث البيانات القديمة • إعادة جلب البيانات في الخلفية • معالجة الأخطاء • حالات التحميل • منطق إعادة المحاولة

ستتوقف عن كتابة منطق التحميل ومعالجة الأخطاء يدوياً؛ كل ما عليك فعله هو إخبار التطبيق بالبيانات التي تحتاجها.

تقوم الأداة بإنشاء طبقة تخزين مؤقت (cache) ذكية بين واجهة المستخدم وواجهة برمجة التطبيقات (API) الخاصة بك.

عندما تطلب واجهة المستخدم بيانات ما، تتحقق الأداة من التخزين المؤقت أولاً. إذا كانت البيانات موجودة، فستعرضها فوراً، مما يجعل تطبيقك يبدو سريعاً.

كما تقوم الأداة بتحديث البيانات في الخلفية، مما يحافظ على حداثة واجهة المستخدم دون حدوث وميض (flickering) مزعج.

إنها تتعامل مع المواقف المعقدة تلقائياً:

• تعيد جلب البيانات عند إعادة التركيز على النافذة (refocus). • تعيد جلب البيانات عند إعادة الاتصال بالشبكة. • تعرض البيانات المخزنة مؤقتاً عندما يكون الاتصال بالإنترنت ضعيفاً.

بدلاً من كتابة hooks معقدة باستخدام useEffect ، يمكنك استخدام سطر واحد بسيط:

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});

هذا كل ما تحتاجه.

توجد أدوات أخرى:

• Redux Toolkit: جيدة لمنطق واجهة المستخدم المعقد ولكنها ليست مثالية لحالة الخادم. • SWR: بديل خفيف الوزن للتخزين المؤقت السهل. • Apollo Client: الأفضل لواجهات برمجة تطبيقات GraphQL.

استخدم TanStack Query إذا كنت تعمل مع REST APIs وتريد واجهة مستخدم سريعة وبكود أقل.

تطوير الواجهات الأمامية الحديثة يتمحور حول الأداء ومزامنة البيانات. تتولى TanStack Query الأجزاء الصعبة حتى تتمكن من التركيز على الميزات.

ليس الهدف هو كتابة كود أقل، بل بناء أنظمة أكثر ذكاءً.

المصدر: https://dev.to/usama_dev/why-i-started-learning-react-query-tanstack-query-today-5ceg