أساسيات GraphQL لمطوّري React

توفّر REST نقاط نهاية ذات بنية ثابتة: يعيد GET /users/:id كائن المستخدم بالكامل، بصرف النظر عما يحتاج إليه العميل. بينما تتيح GraphQL للعملاء تحديد الحقول المطلوبة بدقة، مما يلغي الجلب الزائد، أي جلب بيانات أكثر من اللازم، والجلب الناقص، أي جلب بيانات غير كافية يتطلب عدة طلبات.

يمكن لاستعلام GraphQL واحد جلب مستخدم ومنشوراته ومؤلف كل منشور في رحلة ذهاب وإياب واحدة.

تُعرَّف كل واجهة API في GraphQL بواسطة مخطط مكتوب بلغة تعريف المخطط (SDL). يعلن المخطط عن الأنواع وحقولها وأنواع الجذر Query وMutation وSubscription التي يمكن للعملاء استخدامها.

المخطط هو العقد بين العميل والخادم. ويمكن لفريقي الواجهة الأمامية والخلفية العمل بالتوازي بعد الاتفاق على المخطط.

يحدّد استعلام GraphQL الحقول: { user(id: "1") { name email posts { title } } }. تتنقل الحقول المتداخلة عبر العلاقات في طلب واحد. وتعيد الأسماء المستعارة تسمية الحقول: { me: user(id: "1") { name } }. كما تعيد الأجزاء المقتبسة استخدام تحديدات الحقول عبر استعلامات متعددة.

تجعل المتغيرات الاستعلامات قابلة لإعادة الاستخدام: query GetUser($id: ID!) { user(id: $id) { name } } مع المتغيرات: { id: "1" }.

يملك كل حقل في مخطط GraphQL دالة resolver على الخادم. عندما يستعلم العميل عن user.name، يجلب resolver الخاص بـ user كائن المستخدم، بينما يعيد resolver الخاص بـ name، أو resolver الافتراضي، قيمة حقل name.

تتيح هذه المعالجة على مستوى الحقل جلب البيانات المطلوبة فقط بدقة في GraphQL.

إذا استعلمت عن قائمة تضم 100 منشور، وكان كل منشور يتضمن مؤلفه، فسيؤدي التنفيذ الساذج إلى تشغيل 100 استعلام منفصل إلى قاعدة البيانات لجلب المؤلفين. تجعل مشكلة N+1 واجهات GraphQL بطيئة من دون تحسين.

تحل DataLoader مشكلة N+1 عبر تجميع جميع عمليات البحث عن المؤلفين في استعلام واحد إلى قاعدة البيانات، باستخدام ذاكرة تخزين مؤقت لكل طلب ودالة تجميع.

تُعد Apollo Studio وGraphQL Playground واجهتي مستخدم تعملان في المتصفح لاستكشاف GraphQL API بشكل تفاعلي. وتكملان الحقول تلقائيًا من المخطط، وتعرضان نتائج الاستعلامات، وتُظهران توثيق الأنواع ضمنيًا.

يُعد استخدام بيئة التشغيل التفاعلية أسرع طريقة لفهم GraphQL API غير المألوف قبل كتابة كود العميل.

تتيح GraphQL APIs مخططها الخاص عبر استعلام استبطان: { __schema { types { name } } }. ويمكن للعملاء الاستعلام عن المخطط نفسه لاكتشاف الأنواع والحقول والوسائط المتاحة.

تستخدم أدوات توليد الكود مثل graphql-codegen الاستبطان لتوليد أنواع TypeScript المطابقة لمخطط API تلقائيًا.

تُعدّل GraphQL mutations البيانات: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. وتنشئ الاشتراكات اتصالًا دائمًا (عادةً عبر WebSocket) وتدفع التحديثات: subscription { postAdded { id title } }.

تستخدم أنواع الجذر الثلاثة (Query وMutation وSubscription) صيغة اختيار الحقول نفسها.

يتفوق GraphQL في التطبيقات ذات متطلبات البيانات المعقدة والمتداخلة، أو التي تتضمن أنواعًا متعددة من العملاء (الهاتف المحمول والويب والتلفاز) وتحتاج إلى مجموعات مختلفة من الحقول، أو واجهات API سريعة التطور حيث يُفضَّل إهمال الحقول على إصدار نقاط نهاية جديدة.

يُعد REST أبسط في واجهات CRUD ذات أشكال موارد مسطحة ومتوقعة، كما يوفر خصائص ممتازة للتخزين المؤقت عبر HTTP باستخدام ETags وترويسات التخزين المؤقت.

يُعد Apollo Client عميل GraphQL الأكثر غنى بالميزات، إذ يوفر ذاكرة تخزين مؤقت مُطبَّعة، وإدارة للحالة المحلية، والاشتراكات، وروابط لمعالجة الأخطاء. أما URQL فهو أخف وزنًا، ويستخدم ذاكرة مؤقتة للمستندات وواجهة برمجية أبسط. ويُعد React Query مع graphql-request أبسط نهج للاستعلامات والطفرات الأساسية دون ميزات متقدمة للتخزين المؤقت.

اختاروا بناءً على متطلبات التخزين المؤقت لديكم: استخدموا الذاكرة المؤقتة المُطبَّعة للكيانات المشتركة بين الاستعلامات (Apollo)، وذاكرة المستندات المؤقتة الأبسط للاستعلامات المستقلة (URQL أو React Query).

مثال بسيط على SDL: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }. تشير علامات التعجب إلى الحقول غير القابلة للقيمة الفارغة.

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

ماذا يعني مصطلح «over-fetching» في سياق المقارنة بين REST وGraphQL؟

يتيح GraphQL للعملاء طلب الحقول التي يحتاجون إليها بالضبط (من دون جلب زائد أو ناقص) باستخدام لغة استعلام يحددها المخطط. وتجيب المحلِّلات عن كل حقل، بينما يحل DataLoader مشكلة N+1. ويتيح الاستبطان توليد أنواع TypeScript. ويُعد Apollo Client وURQL وReact Query عملاء GraphQL الرئيسيين المتوافقين مع React.

اختاروا GraphQL لمتطلبات البيانات المعقدة والمتداخلة ومتعددة العملاء، واختاروا REST لعمليات CRUD البسيطة ذات الأشكال المتوقعة.