GraphQL APIs VS REST APIs

من اكثر المشاكل التي تواجهنا في REST APIs هي تعدد المسارات و نقص/زيادة البيانات عن حاجتها، صحيح؟ حسنا يمكننا الابتعاد عن هذا ! في عالم تطوير الواجهات الخلفية (Backend)، اعتدنا لسنوات طويلة على بناء واجهات برمجية باستخدام REST API، تكلمنا عن REST APIs سابقا هنا:

• https://www.facebook.com/share/p/1FeqNeCgRm/
• https://www.facebook.com/share/p/1FL336xaKM/ 

هنا ظهر GraphQL، وهو عبارة عن لغة استعلام (Query Language) طوّرتها شركة فيسبوك عام 2015. المميز في GraphQL أنّه يسمح للعميل (Client) بطلب البيانات التي يحتاجها فقط، وبالشكل الذي يريده، دون الحاجة لإنشاء مسارات متعددة أو تحميل بيانات زائدة. 

الفروقات بين GraphQL و REST API

• في REST: 

1. لكل نوع من البيانات أو العملية مسار محدد.
2. قد يضطر العميل إلى استدعاء أكثر من Endpoint للحصول على البيانات المطلوبة.
3. أحياناً يتم جلب بيانات أكثر من اللازم (Over-Fetching) أو بيانات أقل من اللازم (Under-Fetching).

•  في GraphQL:

1. يوجد Endpoint واحد فقط (عادة /graphql).
2. العميل يحدد في الاستعلام ما هي الحقول التي يريدها تحديداً.
3. يمكن دمج أكثر من كيان (Entity) في استعلام واحد، مما يقلل عدد الطلبات للشبكة.

مميزات GraphQL

طبعا كل تقنية لها ميزات وسيئات تجعلنا نستخدمها في بعض الاوقات والبعض الاخر نستخدم غيرها، لذا الان نأتي الى مميزات GraphQL والتي جعلت انتشارها يتوسع بشكل سريع: 

1. تحكم كامل بالبيانات: العميل لا يستقبل إلا ما طلبه فقط.
2. تقليل عدد الطلبات: يمكن الحصول على بيانات معقدة من استعلام واحد.
3. قابلية التوسع بسهولة: عند إضافة حقول جديدة لا يتأثر العملاء القدامى.
4. أداة GraphiQL: واجهة رسومية لتجربة الاستعلامات بسهولة.

سلبيات GraphQL

لكن رغم قوته، إلا أن GraphQL ليس مثالياً دائماً، واحد اسباب ذلك وسلبياتها:

1. تعقيد التنفيذ: يحتاج إلى إعدادات إضافية مقارنة بالـ REST.
2. إدارة التخزين المؤقت (Caching) أصعب من REST، خاصة مع استعلامات معقدة.
3. الإفراط في المرونة: إذا لم يُضبط بشكل جيد، قد يطلب العميل بيانات ضخمة تُرهق الخادم.
4. غير مناسب لكل الحالات: أحياناً REST أبسط وأسرع للتطبيقات الصغيرة. 

استخدامات GraphQL

حسنا وهذا كله يأتينا الى سؤال، متى نستخدم GraphQL؟ عند بناء تطبيقات أمامية (Frontend) معقدة تحتاج بيانات متعددة في نفس الشاشة (مثل تطبيقات الموبايل أو الـ Single Page Applications).

 في المشاريع الكبيرة التي يتغير فيها هيكل البيانات باستمرار.

عندما نريد توفير تجربة مرنة للمطورين المستهلكين للـ API.

بينما قد يكون REST API أكثر من كافٍ في الأنظمة البسيطة أو الخدمات الصغيرة التي لا تتطلب مرونة عالية.

مثال كود بسيط في Node JS لتجربة GraphQL APIs

قم بانشاء بيئة NPM وتحميل المكتبات اللازمة:

• انشئ بيئة npm:

npm init -y

• حمل المكتبات:

npm install apollo-server graphql

انشئ ملف باسم schema.js واكتب به الكود التالي:

const { gql } = require("apollo-server");

const typeDefs = gql`
    type Robot {
        id: ID!
        name: String!
        status: Boolean
        battery: Int!
        speed: Int!
    }

    type Query {
        robots: [Robot!]!
        robot(id: ID!): Robot
    }

    type Mutation {
        setRobotSpeed(id: ID!, speed: Int!): Robot
        togglePower(id: ID!, on: Boolean): Robot
    }
`;

module.exports = typeDefs;
 

انشئ ملف باسم resolvers.js واكتب به الكود التالي:

const robots = new Map([
    ["1", { id: "1", name: "Niava", status: true, battery: 100, speed: 10 }],
    ["2", { id: "2", name: "NiavaBot", status: false, battery: 80, speed: 5 }],
]);

const validateSpeed = (speed) => {
    if (speed < 0 || speed > 100) return false;
    return true;
};

const resolvers = {
    Query: {
        robots: () => {
            return Array.from(robots.values());
        },

        robot: (_, { id }) => {
            return robots.get(id) || null;
        },
    },
    Mutation: {
        setRobotSpeed: (_, { id, speed }) => {
            validateSpeed(speed);
            const r = robots.get(id);
            if (!r) return null;
            r.speed = speed;
            robots.set(id, r);
            return r;
        },

        togglePower: (_, { id, on }) => {
            const r = robots.get(id);
            if (!r) return null;
            if (on && r.battery === 0) return null;
            r.status = on;
            robots.set(id, r);
            return r;
        },
    },
};

module.exports = resolvers;
 

انشئ ملف باسم index.js واكتب به الكود التالي:

const { ApolloServer } = require("apollo-server");
const typeDefs = require("./schema");
const resolvers = require("./resolvers");

const server = new ApolloServer({ typeDefs, resolvers });

server.listen({ port: 4000 }).then(({ url }) => {
    console.log("server running on port 4000, url:", url);
});
 

لتجربة السيرفر:

• افتح على متصفحك الرابط التالي:

http://localhost:4000

• يمكنك تجربة الquery كالمثال التالي:

query {
  robots {
    id
    name
    status
    x
    y
    battery
    speed
  }
} 

• يمكنك تجربة الmutation كالمثال التالي:

mutation {
  setRobotSpeed(id: "1", speed: 25) {
    id name speed
  }
} 

طبعا كما قلنا يمكنك جلب البيانات التي تحتاجها فقط، اي مثلا في الquery السابق يمكنك جلب ال id وال name فقط او اي بيانات تريدها، لا تحتاج لجلب البيانات او ب اي ترتيب محدد.

يمكنك تحميل الكود السابق كاملا مباشرة من الرابط التالي:

https://drive.google.com/file/d/1yV7StvHYqyJluvD__kzGsqcVQVVwe-Bv/view?usp=sharing

طبعا GraphQL ليس بديلاً كاملاً لـ REST، بل هو خيار آخر يعتمد على طبيعة مشروعك. إذا كان مشروعك يتطلب مرونة كبيرة، واستعلامات معقدة، وتجربة غنية على الواجهة الأمامية، فإن GraphQL سيكون أداة قوية جداً. أما إذا كان التطبيق بسيطاً بعدد محدود من البيانات، فقد يكون REST الخيار الأمثل والأسرع للتنفيذ.