غوص عميق في GraphQL: ما بعد الأساسيات

ما هو GraphQL؟

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

GraphQL مقابل REST

• جلب البيانات: مع REST قد تحتاج لعدّة طلبات إلى نقاط نهاية مختلفة لتجميع بيانات عرض واحد (مثلًا: /users/1 و/users/1/posts). مع GraphQL يمكنك الحصول على كل ما تحتاجه في طلب واحد.
• الإفراط/النقص في الجلب: كثيرًا ما تعيد REST بيانات أكثر مما تحتاج أو أقل. تحل GraphQL ذلك بالسماح للعميل بتحديد ما يريد تمامًا.
• مخطط قوي الأنماط: تُبنى واجهات GraphQL على مخطط قوي الأنماط يعمل كعقد بين العميل والخادم، مما يسهل تطوير الواجهة دون كسر العملاء الحاليين.

المفاهيم الأساسية في GraphQL

لغة تعريف المخطط (SDL)

المخطط هو قلب أي واجهة GraphQL. يعرّف أنواع البيانات الممكن الاستعلام عنها. مثال بسيط:

type Query {
  hello: String
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  email: String
  posts: [Post]
}

type Post {
  id: ID!
  title: String
  content: String
}

يعرّف هذا المخطط نوع Query بحقلين: hello وuser. كما يعرّف نوعي User وPost مع حقولهما. تشير ! إلى أن الحقل غير قابل للإلغاء.

الاستعلامات (Queries)

تُستخدم الاستعلامات لجلب البيانات من الخادم، وتطابق بنية الاستعلام شكل البيانات المطلوبة.

query GetUserWithPosts {
  user(id: "1") {
    id
    name
    posts {
      title
    }
  }
}

يعيد هذا الاستعلام كائن JSON يحوي id وname وقائمة posts (مع title فقط) للمستخدم ذي المعرف "1".

التعديلات (Mutations)

تُستخدم التعديلات لتغيير البيانات على الخادم، وهي مشابهة لطلبات POST وPUT وDELETE في REST.

mutation CreatePost {
  createPost(title: "New Post", content: "This is the content.") {
    id
    title
  }
}

ينشئ هذا التعديل منشورًا جديدًا ويعيد id وtitle الخاصين به.

الاشتراكات (Subscriptions)

الاشتراكات طريقة للحفاظ على اتصال آني مع الخادم ليدفع البيانات إلى العميل عند حدوث أحداث معيّنة، وهو مفيد لتطبيقات الدردشة أو التنبيهات الحية.

subscription NewPostSubscription {
  newPost {
    id
    title
  }
}

بناء خادم GraphQL بسيط باستخدام Apollo Server

يُعد Apollo Server مكتبة شائعة لبناء خوادم GraphQL في Node.js.

1. التثبيت:

   npm install @apollo/server graphql
   

2. إنشاء الخادم: مثال أساسي لخادم GraphQL باستخدام Apollo Server:

   import { ApolloServer } from '@apollo/server';
   import { startStandaloneServer } from '@apollo/server/standalone';
   
   // 1. Define your schema
   const typeDefs = `#graphql
     type Query {
       hello: String
     }
   `;
   
   // 2. Define your resolvers
   const resolvers = {
     Query: {
       hello: () => 'Hello, GraphQL!',
     },
   };
   
   // 3. Create an instance of ApolloServer
   const server = new ApolloServer({
     typeDefs,
     resolvers,
   });
   
   // 4. Start the server
   const { url } = await startStandaloneServer(server, {
     listen: { port: 4000 },
   });
   
   console.log(`🚀 Server ready at: ${url}`);
   

يُنشئ هذا خادمًا يحوي استعلام hello واحدًا. عند تشغيله ستكون لديك واجهة GraphQL على المنفذ 4000، ويمكنك استكشافها عبر Apollo Studio Sandbox في المتصفح.

توفّر GraphQL طريقة قوية ومرنة لبناء الواجهات البرمجية، مما يمنح العملاء تحكمًا أكبر في البيانات التي يجلبونها ويُمكّن تطبيقات أكثر كفاءة وأداءً.