نوشتن کوئری های پیچیده تر در GraphQL

نوشتن کوئری های پیچیده تر در GraphQL

در جلسه قبل با شیوه نوشتن کوئری در GraphQL آشنا شدیم. در این جلسه قصد داریم با استفاده از Fragment ها و Variable ها، کوئری های خود را ارتقا داده و از نوشتن کدهای اضافی جلوگیری کنیم. همچنین Operation name ها را تشریح خواهیم کرد. در نهایت به بررسی مبحث Directive ها خواهیم پرداخت.

Fragment ها:

فرض کنید در پروژه، صفحه پیچیده ای داشته و در این صفحه نیاز به مقایسه ی دو موجودیت در کنار یکدیگر داشته باشیم. در این صورت باید برای هر دو موجودیت فیلدهای یکسانی را دریافت کنیم. برای این کار، ابتدا برای هر یک از این موجودیت ها، یک Alias تعریف کرده و برای هر یک فیلدهای مورد نظر را انتخاب می کنیم. این کار باعث ایجاد کدهای تکراری بسیاری در پروژه خواهد شد. راه حل این مساله استفاده از Fragment ها است. Fragment ها گروهی از فیلدها هستند که می توان آن ها را به جای نوشتن یک به یک فیلدها استفاده کرد. برای درک بهتر مثال زیر را در نظر بگیرید:

query {
  character1: character(id: 1) {
      ...comparisonFragment
  }
  
  character2: character(id: 2){
    ...comparisonFragment
  }
}

fragment comparisonFragment on Character {
  id
  name
  status
}

در مثال بالا با استفاده از کلید واژه Fragment، یک Fragment به نام comparisonFragment تعریف شده است. دقت کنید که این Fragment روی نوع Character تعریف شده است. برای استفاده از آن کافی است از علامت سه نقطه (چیزی شبیه به spread operator در جاوااسکریپت!)، آن را در کوئری ها استفاده کنید.

Operation name ها:

اگر دقت کرده باشید، تا اینجا برای هر کوئری ای که نوشتیم از کلمه کلیدی query استفاده کردیم. به این عملگر، operation type گفته می شود. علاوه بر query، operation type های دیگری مثل mutation (که در جلسه های بعد توضیح داده خواهد شد) وجود دارند. می توان برای هر یک از operation ها، یک نام در نظر گرفت که به آن operation name گفته می شود. برای درک بهتر به مثال زیر توجه کنید:

query characterNameAndStatus {
  character1: character(id: 1) {
  id
  name
  status
  }
}

در مثال بالا، یک operation name به عنوان characterNameAndStatus در نظر گرفته شده است.

اگر قصد استفاده از variable ها را داشته باشیم، بایستی از operation name ها استفاده کنیم. همچنین در هنگام توسعه کد، استفاده از operation name ها باعث ایجاد کدی خواناتر خواهد شد.

Variable ها:

در زمان استفاده از argument ها، باید برای هر argument یک مقدار تخصیص داده شود. اگر این مقادیر به صورت دستی به کوئری اضافه شود، امکان استفاده مجدد از این کوئری وجود نخواهد داشت. همچنین در سطح کد، استفاده از string literal ها و اضافه کردن مقادیر پیشنهاد نمی شود. با استفاده از Variable ها در GraphQL می توان مقادیر را به صورت متغیر در نظر گرفت. برای استفاده از Variable ها در کوئری با استفاده از علامت $ به صورت زیر عمل میکنیم:

query characterNameAndStatus($characterId: ID!) {
  character1: character(id: $characterId) {
    id
    name
  }
}

دقت کنید که نوع variable تعریف شده باید مطابق با نوع argument استفاده شده در آن باشد. با استفاده از variable می تواند به صورت اجباری یا اختیاری باشد. برای اجباری کردن آن باید از علامت ! استفاده کرد. با توجه به مثال بالا در اینجا استفاده از ! اجباریست.

حال برای مقداردهی این متغیرها کافی است تا یک JSON به عنوان variable به کوئری اضافه شود. برای اضافه کردن آن می توانید به صورت زیر عمل کنید:

متغیرها می توانند به صورت پیش فرض مقداردهی شوند. برای این کار کافی است در operation تعریف شده، مقدار پیش فرض به آن اختصاص داده شود. به مثال زیر دقت کنید:

query characterNameAndStatus($characterId: ID = 1) {
  character1: character(id: $characterId) {
    id
    name
  }
}

در مثال بالا، اگر مقداری برای characterId در نظر گرفته نشود، مقدار آن به صورت پیش فرض برابر با ۱ خواهد بود.

Directive ها:

با کمک variable ها توانستیم به جای ساختن کوئری های ایستا، کوئری هایی پویا بسازیم. اما با استفاده از Directive ها این امکان را داریم تا ساختار خروجی کوئری را کنترل کنیم. از directive های پیش فرض در GraphQL دو نمونه ی include@ و skip@ هستند. برای درک بهتر به مثال زیر توجه کنید:

query characterNameAndStatus($characterId: ID = 1, $withStatus: Boolean = false) {
  character1: character(id: $characterId) {
    id
    name
    status @include (if: $withStatus)
  }
}

 در این مثال از directive ی با عنوان include@ استفاده شده است. به کمک این directive و با استفاده از متغیر withStatus (که از نوع Boolean است)، می توانیم status را به ساختار کوئری اضافه و یا از آن حذف کنیم. در صورتی که این مقدار true باشد، خروجی به همراه فیلد status خواهد بود. در غیر این صورت status در خروجی نمایش داده نخواهد شد (دقت کنید که مقدار پیش فرض این متغیر برار با true است).

در این جلسه با شیوه نوشتن کوئری های پیچیده تر به کمک fragment ها، variable ها و directive ها پرداختیم. در جلسه بعد به معرفی mutation ها و شیوه تغییر داده ها در سرور خواهیم پرداخت.

 

شاد و پیروز باشید.

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: