التخزين المؤقت والتحديثات الخلفية باستخدام React Query

في معظم تطبيقات الويب، غالبًا ما تُجلب البيانات نفسها عدة مرات - على سبيل المثال، عند إعادة زيارة المستخدم لصفحة ما، أو التبديل بين علامات التبويب، أو التفاعل مع مكونات تعتمد على نفس المورد. بدون آلية تخزين مؤقت، يُطلق كل تفاعل طلب شبكة جديدًا، مما يُهدر عرض النطاق الترددي ويُبطئ الواجهة.

الأساليب التقليدية باستخدامfetch أوAxios لا تُعالج هذه المشكلة تلقائيًا. غالبًا ما يلجأ المطورون إلى تخزين البيانات يدويًا في وحدة تخزين عالمية أو محلية لتجنب الاستدعاءات غير الضرورية - وهو حل بديل سرعان ما يصبح فوضويًا وغير موثوق.

كيف يحل React Query المشكلة

يُغيّر React Query هذا الأمر بإضافة طبقة تخزين مؤقت مُدمجة . بمجرد جلب البيانات، تُخزّن تلقائيًا في الذاكرة ويُعاد استخدامها فورًا عند طلبها مرة أخرى. والأفضل من ذلك، يُحافظ React Query على مزامنة ذاكرة التخزين المؤقت مع خادم ، مما يُعيد جلب البيانات في الخلفية عند الحاجة، مثلاً عند استعادة تركيز علامة تبويب المتصفح أو بعد فترة "قديمة" قابلة للتخصيص.

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

يستخدم React QueryqueryKey كمعرّف فريد لكل استعلام مُخزّن مؤقتًا. عند طلب مفتاح نفسه مجددًا، يُعيد React Query النتيجة المُخزّنة مؤقتًا فورًا، مع إمكانية تحديثها اختياريًا في الخلفية.

كما أنه يدير الوقت القديم ووقت التخزين المؤقت تلقائيًا: