GraphQL Fragments: اجازه دهید هر کامپوننت مالک داده‌های خود باشد

کوئری‌های GraphQL در ابتدا تمیز به نظر می‌رسند. با یک درخواست، تمام داده‌های خود را دریافت می‌کنید. اما بعد، اپلیکیشن شما رشد می‌کند.

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

Fragmentها این مشکل را حل می‌کنند. اکثر تیم‌ها از آن‌ها به عنوان راهی برای کپی و پیست کردن فیلدها استفاده می‌کنند؛ اما این روش اشتباه است. Fragmentها باید مدلی برای مالکیت کامپوننت باشند.

یک Fragment، مجموعه‌ای نام‌گذاری شده از فیلدها برای یک تایپ (Type) خاص است.

مثال:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

شما این Fragment را در هر کوئری که به User نیاز دارد، spread می‌کنید.

ارزش واقعی از محل ذخیره‌سازی Fragment ناشی می‌شود. آن‌ها را در یک فایل مشترک قرار ندهید. Fragment را در همان فایلی قرار دهید که کامپوننتِ استفاده‌کننده از آن قرار دارد.

به این کار co-location می‌گویند. هر کامپوننت نیازهای داده‌ای خود را اعلام می‌کند.

وقتی یک کامپوننت به فیلد جدیدی نیاز دارد، آن را به Fragment خود اضافه می‌کنید. کوئری والد به‌طور خودکار به‌روزرسانی می‌شود. وقتی یک کامپوننت را حذف می‌کنید، Fragment آن را هم حذف می‌کنید. کوئری کوچک می‌شود. کامپوننت والد نیازی ندارد از فیلدهای داخلی فرزندان خود باخبر باشد.

قابلیت Data masking این موضوع را حتی بهتر می‌کند. با فعال بودن masking، یک کامپوننت فقط فیلدهایی را می‌بیند که در Fragment خودش درخواست کرده است. حتی اگر سرور داده‌های اضافی بفرستد، کامپوننت شما نمی‌تواند به آن‌ها دسترسی داشته باشد.

این یک قرارداد سخت‌گیرانه ایجاد می‌کند.

  • TypeScript دقیقاً می‌داند هر کامپوننت چه داده‌هایی دارد.
  • اگر فیلدی را از یک Fragment حذف کنید، TypeScript تمام خطاها را به شما نشان می‌دهد.
  • بازنویسی کد (Refactoring) به جای جستجو در کل کد، به یک بررسی ساده‌ی تایپ (type-check) تبدیل می‌شود.

زمانی از Fragmentها استفاده کنید که:

  • چندین کامپوننت از یک تایپ مشابه مانند User یا Product استفاده می‌کنند.
  • کوئری‌های صفحه شما بیش از حد طولانی هستند.
  • به‌طور تصادفی فیلدهای مرده (dead fields) را در کوئری‌های خود باقی می‌گذارید.
  • می‌خواهید برای داده‌های خود از امنیت TypeScript بهره‌مند شوید.

از کوچک شروع کنید. یک کامپوننت را پیدا کنید که داده‌ها را از یک کوئری والد دریافت می‌کند. فیلدهای آن را به یک Fragment منتقل کنید. آن Fragment را در فایل همان کامپوننت قرار دهید.

Fragmentها تضمین می‌کنند که با رشد اپلیکیشن، دریافت داده‌های شما با رابط کاربری (UI) مطابقت داشته باشد.

Source: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359