GraphQL Fragments: دع كل مكون يمتلك بياناته الخاصة

تبدو استعلامات GraphQL نظيفة في البداية؛ فطلب واحد يجلب لك كل بياناتك. ولكن بعد ذلك، يبدأ تطبيقك في النمو.

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

تعالج الـ Fragments هذه المشكلة. تستخدمها معظم الفرق كوسيلة لنسخ ولصق الحقول، وهذا هو الأسلوب الخاطئ. يجب أن تكون الـ Fragments نموذجاً لملكية المكونات (component ownership).

الـ fragment عبارة عن مجموعة مسمّاة من الحقول لنوع (type) معين.

مثال:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

تقوم بنشر (spread) هذا الـ fragment في أي استعلام يحتاج إلى User.

تكمن القيمة الحقيقية في المكان الذي تحفظ فيه الـ fragment. لا تضعها في ملف مشترك، بل ضع الـ fragment في نفس الملف الذي يحتوي على المكون الذي يستخدمه.

يُسمى هذا "التمركز المشترك" (co-location). حيث يعلن كل مكون عن احتياجاته الخاصة من البيانات.

عندما يحتاج مكون ما إلى حقل جديد، تضيفه إلى الـ fragment الخاص به، ويتم تحديث استعلام الأب تلقائياً. وعندما تحذف مكوناً، تحذف الـ fragment الخاص به، فيتقلص حجم الاستعلام. لا يحتاج المكون الأب إلى معرفة الحقول الداخلية لمكوناته الفرعية.

تجعل تقنية "إخفاء البيانات" (Data masking) الأمر أفضل. فمع تفعيل الـ masking، لا يرى المكون إلا الحقول التي طلبها في الـ fragment الخاص به. وحتى لو أرسل الخادم بيانات إضافية، فلن يتمكن مكونك من الوصول إليها.

هذا ينشئ عقداً صارماً:

  • يعرف TypeScript بالضبط البيانات التي يمتلكها كل مكون.
  • إذا قمت بإزالة حقل من fragment، فسيظهر لك TypeScript كل الأخطاء الناتجة.
  • تصبح عملية إعادة الهيكلة (Refactoring) مجرد عملية تحقق من النوع (type-check) بدلاً من البحث في كامل قاعدة الكود الخاصة بك.

استخدم الـ fragments عندما:

  • تستخدم مكونات متعددة نفس النوع مثل User أو Product.
  • تكون استعلامات الصفحة طويلة جداً.
  • تترك حقولاً غير مستخدمة (dead fields) في استعلاماتك عن طريق الخطأ.
  • تريد ضمان سلامة البيانات باستخدام TypeScript.

ابدأ بخطوات صغيرة. ابحث عن مكون واحد يحصل على بيانات من استعلام أب، وانقل حقوله إلى fragment، ثم ضع هذا الـ fragment في ملف المكون نفسه.

تضمن الـ Fragments توافق عملية جلب البيانات مع واجهة المستخدم (UI) مع نمو تطبيقك.

Source: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359