الاستعلامات اللانهائية وأنماط الترقيم

مع تطور التطبيقات، تتوقف القوائم عن العمل كبيانات بسيطة. تصبح خلاصات الأخبار أطول، وتمتد نتائج البحث عبر صفحات متعددة، ويتوقع المستخدمون التمرير باستمرار دون فقدان السياق. ما كان يعمل في البداية كـfetch page 1 ، ثمpage 2 سرعان ما يصبح ذلك مصدراً للضغط على بنية النظام. يتم التعامل مع كل عملية جلب للصفحة كحدث منفصل، ويصبح المكون مسؤولاً عن دمج النتائج معاً، وتتبع حالة الترقيم، ومنع الطلبات المكررة أو غير المرتبة.

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

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

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

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

استعلامات لا نهائية: عرض هادئ من ذاكرة تخزين مؤقتة متنامية

يمثل الاستعلام اللانهائي مجموعة بيانات قابلة للتوسيع تدريجيًا. فبدلاً من التعامل مع "الصفحة 1، الصفحة 2، الصفحة 3" كعمليات جلب منفصلة، ​​يُصمم React Query القائمة كسلسلة مرتبة من الصفحات المخزنة معًا في ذاكرة التخزين المؤقت. يتم جلب كل صفحة بشكل مستقل، لكن ذاكرة التخزين المؤقت تعرضها لواجهة المستخدم كصورة واحدة متكاملة.

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

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

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