GraphQL Fragments: প্রতিটি Component-কে তার নিজস্ব Data-র মালিক হতে দিন

GraphQL queries শুরুতে দেখতে বেশ পরিচ্ছন্ন মনে হয়। একটি রিকোয়েস্টেই আপনি আপনার সমস্ত data পেয়ে যান। তারপর যখন আপনার অ্যাপ বড় হতে থাকে...

আপনার পেজ কোয়েরি (page query) তখন অনেকগুলো ভিন্ন ভিন্ন চাইল্ড কম্পোনেন্টের (child components) জন্য ফিল্ড সংগ্রহ করতে শুরু করে। আপনি একটি নতুন কম্পোনেন্টের জন্য একটি ফিল্ড যোগ করেন। ছয় সপ্তাহ পর আপনি সেই কম্পোনেন্টটি মুছে ফেলেন। কিন্তু আপনি মেইন কোয়েরি থেকে সেই ফিল্ডটি সরিয়ে নিতে ভুলে যান। এখন কেউ জানে না যে সেটি মুছে ফেলা নিরাপদ কি না। এভাবে কোয়েরিটি ক্রমাগত বড় হতে থাকে।

Fragments এই সমস্যার সমাধান করে। বেশিরভাগ টিম এগুলোকে ফিল্ড কপি এবং পেস্ট করার মাধ্যম হিসেবে ব্যবহার করে। এটি ভুল পদ্ধতি। Fragments হওয়া উচিত component ownership-এর একটি মডেল।

একটি fragment হলো একটি নির্দিষ্ট type-এর জন্য ফিল্ডের একটি নামযুক্ত গ্রুপ (named group of fields)।

Example:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

যে কোনো কোয়েরিতে যেখানে User প্রয়োজন, সেখানে আপনি এই fragment-টি spread করতে পারেন।

আসল সুবিধাটি আসে আপনি fragment-টি কোথায় সেভ করছেন তার ওপর ভিত্তি করে। এগুলো কোনো shared file-এ রাখবেন না। যে component এটি ব্যবহার করছে, fragment-টি সেই একই ফাইলে রাখুন।

একে বলা হয় co-location। প্রতিটি component তার নিজস্ব data-র প্রয়োজনীয়তা ঘোষণা করে।

যখন একটি component-এর নতুন একটি ফিল্ড প্রয়োজন হয়, আপনি সেটি তার fragment-এ যোগ করেন। তখন parent query স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। যখন আপনি একটি component মুছে ফেলেন, তখন তার fragment-টিও মুছে ফেলেন। ফলে কোয়েরিটি ছোট হয়ে আসে। Parent component-এর তার চাইল্ডদের অভ্যন্তরীণ (internal) ফিল্ড সম্পর্কে জানার প্রয়োজন হয় না।

Data masking এই প্রক্রিয়াটিকে আরও উন্নত করে। Masking সক্রিয় থাকলে, একটি component শুধুমাত্র সেই ফিল্ডগুলোই দেখতে পায় যা সে তার নিজস্ব fragment-এ চেয়েছিল। সার্ভার অতিরিক্ত data পাঠালেও আপনার component সেটি অ্যাক্সেস করতে পারে না।

এটি একটি কঠোর চুক্তি (strict contract) তৈরি করে।

• TypeScript ঠিক জানে যে প্রতিটি component-এর কাছে কী data আছে।
• আপনি যদি কোনো fragment থেকে একটি ফিল্ড সরিয়ে ফেলেন, TypeScript আপনাকে প্রতিটি error দেখিয়ে দেবে।
• Refactoring তখন পুরো codebase-এ খোঁজাখুঁজির বদলে একটি সহজ type-check-এ পরিণত হয়।

Fragments ব্যবহার করুন যখন:

• একাধিক component একই type (যেমন User বা Product) ব্যবহার করে।
• আপনার page queries অনেক বেশি লম্বা হয়ে যায়।
• আপনি ভুলবশত আপনার কোয়েরিতে dead fields রেখে দেন।
• আপনি আপনার data-র জন্য TypeScript safety চান।

ছোট থেকে শুরু করুন। এমন একটি component খুঁজে বের করুন যা একটি parent query থেকে data গ্রহণ করে। এর ফিল্ডগুলোকে একটি fragment-এ সরিয়ে নিন। সেই fragment-টি component ফাইলটিতেই রাখুন।

অ্যাপ বড় হওয়ার সাথে সাথে Fragments নিশ্চিত করে যে আপনার data fetching যেন আপনার UI-এর সাথে সামঞ্জস্যপূর্ণ থাকে।

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