گراف‌کیو‌ال چیست؟

برام مواردی پیش اومدن که لازم بوده برای کسی در مورد گراف‌کیو‌ال یا GraphQL توضیح بدم. اینکه چرا خوبه و کجاها میتونه خیلی کمک کنه.

من اینجا اول در مورد خود گراف‌کیو‌ال توضیح میدم، و تو قدم بعدی نحوه‌ی پیاده سازی یک سرور گراف‌کیو‌ال رو.

گراف کیو اِل چی هست؟

خیلی خلاصه «یه زبان کوئری گرفتن برای ای‌پی‌آی». ولی این توضیح هم خیلی کوتاهه هم اطلاعات کافی نمیده، مگه اینه اول بدونیم کامل خود گراف‌کیو‌ال چی هست.

گراف‌کیو‌ال یه زبانه برای ای‌پی‌آی که با دادن یک توضیح کامل از دیتایی که مد نظرتون هست، اونچه که خواستید رو در اختیارتون میذاره. در واقع به کلاینت کمک میکنه تا دقیقا بگه که چه چیزی رو میخواد و دقیقا همونچیز رو برمیگردونه.

یک مثال

فرض کنیم که یه ای‌پی‌آی مبتنی بر REST داریم. همچین چیزی:

GET /products

برای یادآوری، این سبک نوشتن یعنی شما یک درخواست GET رو مثلا به یه آدرسی مثل http://localhost:3000/products میفرستید.

درخواست رو براش میفرستیم و همچین جوابی میگیریم:

[
  {
    &quotid&quot: 1234,
    &quotname&quot: &quotAspire M5&quot,
    &quotbrand&quot: &quotAcer&quot,
    &quotcategory&quot: &quotLaptop and Computers&quot,
    &quotfeatures&quot: {
      &quotweight&quot: 1.23,
      &quotdimensions&quot: {
        &quotheight&quot: 23.4,
        &quotwidth&quot: 18.5,
        &quotlength&quot: 18.3
      }
    },
    &quotspecs&quot: {
      &quotram&quot: 16,
      &quotcpu&quot: 3.5,
      &quotcpu_count&quot: 8,
      &quotthread_count&quot: 8
    },
    &quotprice&quot: 699.99
  },
  {...}
]

خب اینا اطلاعات یه سری لپتاپ هستن (مثلا) و ما میخوایم اینارو تو صفحه محصولاتمون نشون بدیم. اما ایده اینه که تو صفحه‌ی اصلی، تمام اطلاعات لپتاپ‌ها رو نذاریم، بلکه فقط مواردی که مورد نیاز ما هستن رو نشون میدیم. مثلا اسم لپتاپ و قیمتش. بعد که یوزر روی محصول کلیک کرد، مابقی اطلاعات رو نشون بدیم.

اینجا به دوتا نکته توجه کنید:

1. ما تمام اطلاعاتی که تو پاسخ به ما داده شده رو نیاز نداریم، فقط یک بخشیش مورد نیاز ماست و
2. ما برای صفحه اختصاصی محصول، باید یک درخواست دیگه به مثلا GET /products/1234بفرستیم تا اطلاعات محصول رو مجدد دریافت کنیم.

اینجا یکی از جاهاییه که گراف‌کیو‌ال به کمک ما میاد!

مقدمه

فقط چیزهایی که لازم هست رو درخواست میدیم

گراف‌کیو‌ال یک زبان کوئریه. یعنی باید بهش بگید دقیقا چی میخواید تا اونهم دقیقا همون رو بهتون بده. اما چطور این کار رو انجام بدیم؟ این دقیقا همون ویژگی اصلی گراف‌کیو‌ال هست، یعنی شما انتخاب میکنی که چه فیلدهایی باید برای شما ارسال بشن. فکر کنم یه مثال بتونه خوب نشون بده که چطور میشه. تجسم کنید که ما توی گراف‌کیو‌ال میتونیم چنین چیزی رو برای سرورمون بفرستیم:

query {
  products {
    id
    name
    price
  }
}

و در جوابش سرور گراف‌کیو‌ال به ما این رو میده:

[
  {
    &quotid&quot: 1234,
    &quotname&quot: &quotAspire M5&quot,
    &quotprice&quot: 699.99
  },
  {
    ...
  }
]

به همین سادگی! اما سوال اینه که چطور میشه اطلاعات فقط یک لپتاپ رو بدست آورد؟

اینم خیلی سادست!

query {
  product(id: &quot1234&quot) {
    id
    name
    brand
    category
    price
    features {
      weight
      dimensions {
        width
        height
        length
      }
    }
    specs {
      ram
      cpu
      cpu_count
      thread_count
    }
  }
}

و جوابش:

{
  &quotid&quot: 1234,
  &quotname&quot: &quotAspire M5&quot,
  &quotbrand&quot: &quotAcer&quot,
  &quotcategory&quot: &quotLaptop and Computers&quot,
  &quotprice&quot: 699.99,
  &quotfeatures&quot: {
    &quotweight&quot: 1.23,
    &quotdimensions&quot: {
      &quotwidth&quot: 18.5,
      &quotheight&quot: 23.4,
      &quotlength&quot: 18.3
    }
  },
  &quotspecs&quot: {
    &quotram&quot: 16,
    &quotcpu&quot: 3.5,
    &quotcpu_count&quot: 8,
    &quotthread_count&quot: 8
  }
}

اما یک نکته دیگه راجع به گراف‌کیو‌ال موند.

فقط یه یک آدرس درخواست میدیم!

این قسمت خوب قضیست. توی گراف‌کیو‌ال، دقیقا بر عکس ای‌پی‌آی‌های REST، ما فقط یک Endpoint داریم که بهش درخواست میدیم. همینطور همه‌ی این درخواست‌ها رو فقط با یک Verb میفرستیم! یعنی دیگه خبری از Get برای گرفتن اطلاعات، Post برای ساختشون و مابقی برای بقیه‌ی کارها نیست!

توی گراف‌کیو‌ال همه‌ی درخواست‌ها به همچین آدرسی ارسال میشن:

POST /graphql

و نوع درخواست ما، یا همون Content-Typeکه توی Header میذاریم، به جای application/json، application/graphql میشه.

در نتیجه سرور متوجه میشه که با یک درخواست گراف‌کیو‌ال طرفه.

آشنایی با گراف‌کیو‌ال

گراف‌کیو‌ال، یک زبان مخصوص برای تعریف شکل داده‌هاست که سمت سرور اجرا میشه و خروجی لازم رو تحویل میده. چیزی که مهمه اینه که گراف‌کیو‌ال برای خودش یک Type System داره که باید در موردش حتما بدونیم.

یک سرور گراف‌کیو‌ال، اصولا با ساختن تایپ‌ها یا types شروع میشه که توی هر تایپ، فیلدهای خاصی وجود داره. در نهایت به هر فیلد، یک فانکشن تخصیص داده میشه که این اتفاق سمت موتور میوفته، ما فقط فانکشن‌ها رو تعریف میکنیم و بهشون لاجیک میدیم.

برای مثلا، یک سرور گراف‌کیو‌ال که که بهمون اطلاعات یک پست وبلاگ رو میده، حتما این دو تایپ رو داره:

type Query {
  post: PostType
}

type PostType {
  title: String
  comments_count: Int
}

که شما در نهایت با فرستادن یک درخواست مثل

{
  post {
    comments_count
  }
}

میتونید یک جواب شبیه به

{
  &quotpost&quot: {
    &quotcomments_count&quot: 43
  }
}

رو دریافت کنید...

ادامه‌ی مطلب و آموزش‌های کاملتر رو تو وبسایت خودم میتونید داشته باشید.