REST API - GRAPHQL - tRPC أجي تفهم الفرق بينهم

Typescript ولا عندو إقبال كبير بزاف, و هادشي بسباب الخاصية اللي كايمتاز بها على Javascript , اللي سميتها static typing , و المعنى ديالها هو أنه كل متغير نشئتيه خاصك تحدد ليه النوع ديالو (مثلا واش String ولا Number ...) و أيضا كل Function كتبتيها خاصك تحدد نوع المتغيرات اللي كاتقبل و كذلك نوع داكش اللي غاترد ليك.

هادشي إقدر إباليك فيه خدمة زايدة لكن كايقدمليك الحماية من الأخطاء اللي تقدر التاخدليك وقت كبير باش تلقاها, مثلا Function اللي كاتقبل فالمداخيل متغيرات من نوع Number و انت عطيتيها String و بما أن في Javascript إلى درتي Number + String غايعطيك النتيجة بوجهو حمر ههههه فبكل تأكيد أنت في مأزق.

• مثلا :

1 + "1" // 11

Typescript غاينبهك بالخطئ على الفور قبل ما تشغل الكود , هادشي داخل في ما يسمى ب Type safety.

Type safety :

المعنى ديالها عميق شويا و ما عندهاش علاقة غير ب Typescript , لكن بشرح بسيط , هي الحماية في التعامل مع أنواع المتغيرات, مثلا واحد المتغير اللي من نوع String غايبقى دائما من نوع String و عمرنا ما نغيرولو النوع عن طريق الخطئ أو نستعملوه في غير محلو.

شنو علاقة هادشي بال APIs و GRAPHQL و tRPC ؟؟؟؟

كيف ما كانعرفو كاملين, Rest هي الطريقة الأقدم و الأكثر إستعمالا في إنشاء ل APIs , لكن مكاتقدمش لينا Type safety في السنوات الأخيرة خرج ما يسمى ب GRAPHQL اللي هو أيضا طريقة لإنشاء ل APIs.

الهدف منو هو الحصول على طريقة منظمة و نقية لإنشاء ل APIs طريقة اللي كاتضمن لينا Type Safety بمعنى أن Server غاينبهني إلى أرسلت شي طلب خاطئ, بحيث أن كل من ل Backend و ل Frontend كايتافقو على كفاش غاتكون Data و كذلك نوع المعلومات اللي غايتطلبو و اللي غايترسلو.

في REST API خاص المبرمج اللي قاد ل Backend, يقاد أيضا Documentation كايشرح فيها طريقة العمل بال API مثلا شنو الرابط أو ل Endpoint اللي خاصك تستخدم باش تحصل على كل نوع من Data و أيضا شنو ل params اللي كايقبل كل واحد.

هنا فين كاينة الجمالية ديال GRAPHQL ما تحتاش ل شرح عن طريقة إستخدام ل API , أيه أ سيدي , كل ما خاصك هو endpoint واحد اللي غالبا كايكون على هاد الشكل https://domain/graphql .

_ غناخدو فهاد المثال API كايعطيك معلومات عن القارات و الدول و العملات ديالهم: https://countries.trevorblades.com

باش تعرف الخطاطة و Schema اللي خاصك تتبع , يا إما :

• كادير ل endpoint في المتصفح و غايطلع ليك ما يسمى ب GraphQL Explorer و كاتلقى فالجنب زر مكتوب عليه SCHEMA , اللي غايطلع ليك الخطاطة ديال ل API اللي من خلالها غاتعرف كيفاش تخدم بيه.

• أو بإمكانك تستخدم شي برنامج مثل Postman باش تطلب من server يرسل ليك Schema.

خاص الطلب إكون من نوع POST , لأن جميع الطلبات اللي كايترسلو ل graphql server خاصها تكون من نوع POST , و كل طلب كايكون كايحمل معلومات اللي كاتسمى Query

1. باش تطلب Schema المتبعة لطلب المعلومات, كاترسل ليه هاد ل query :

{
  __schema {
    queryType {
      fields {
        name
      }
    }
  }
}

مثال :

2. باش تطلب Schema المتبعة لإرسال المعلومات, كاترسل ليه هاد ل query:

{
 __schema {
   mutationType {
     fields {
       name
     }
   }
 }
}

3. أو بإمكانك تطلب Schema كاملها بكلشي, بإستخدام هاد ل query :

fragment FullType on __Type {
  kind
  name
  fields(includeDeprecated: true) {
    name
    args {
      ...InputValue
    }
    type {
      ...TypeRef
    }
    isDeprecated
    deprecationReason
  }
  inputFields {
    ...InputValue
  }
  interfaces {
    ...TypeRef
  }
  enumValues(includeDeprecated: true) {
    name
    isDeprecated
    deprecationReason
  }
  possibleTypes {
    ...TypeRef
  }
}
fragment InputValue on __InputValue {
  name
  type {
    ...TypeRef
  }
  defaultValue
}
fragment TypeRef on __Type {
  kind
  name
  ofType {
    kind
    name
    ofType {
      kind
      name
      ofType {
        kind
        name
        ofType {
          kind
          name
          ofType {
            kind
            name
            ofType {
              kind
              name
              ofType {
                kind
                name
              }
            }
          }
        }
      }
    }
  }
}
query IntrospectionQuery {
  __schema {
    queryType {
      name
    }
    mutationType {
      name
    }
    types {
      ...FullType
    }
    directives {
      name
      locations
      args {
        ...InputValue
      }
    }
  }
}

كيف قلنا من خلال هاد Schema بإمكانك تعرف كيفاش غاتخدم بال API بلا ما تحتاج شي Documentation. لكن المشكل ديال Graphql هو الصعوبة ديالو, ماشي غير أجي و قاد API بيه, و واخا تقادو غاتلقاه تقيل بزاف, حيت خاصك فهم عميق لكيفاش كايخدم باش تقدر تقاد API سريع , بحيث أن المبرمجين كايقولو باللي :

GraphQL هو أسهل طريقة لصنع الجحيم

هاد الجملة كاتشرح الصعوبة اللي كايتضمنها إنشاء API بإستخدام GraphQl . هنا فين كايجي الدور ديال tRPC .

شنو هو tRPC ؟؟؟؟

tRPC حتا هو طريقة لإنشاء ل APIs اللي كاتمتاز ب Type safety و بدون الصعوبة و التعقيدات ديال GraphQl, لكن, ثم لكن, باش تقاد API ب tRPC خاصك تستعمل Typescript في ل Backend و كذلك في ال Frontend.

إنشاء مشروع بإستعمال tRPC :

أسهل و أشهر طريقة لإنشاء مشروع بإستعمال tRPC هي إستعمال npx create-t3-app. كايتم إنشاء مشروع بإستخدام Nextjs و كايعطيك CLI اللي من خلالو إمكلك تختار التقنيات و الأدوات اللي بغيتي تضيف لهاد المشروع مثل : Typescript - tRPC - Tailwindcss - Prisma.

كل ما عليك هو تمشي ل Terminal و تكتب :

npx create-t3-app my-app

باش تختار الأدوات اللي بغيتي كاتستخدم الأرقام 1 2 3 4 .

النهاية :

التكنلوجات و الأدوات كتار و دائما كاين الجديد , هادشي كايدوخ لكن حنا كمبرمجين خاصنا نتبعو الجديد و نجربو الخدمة بيه و نشوفو واش غايناسبنا و واش كايقدم شي إضافة .... المهم كانتمنا تكونو ستافدتو من هاد المقال , إلى عجبك شاركو مع الأصدقاء ديالك.