GraphQL Fragments: ஒவ்வொரு Component-உம் அதன் தரவைச் சொந்தமாக வைத்திருக்கட்டும்

GraphQL queries ஆரம்பத்தில் பார்ப்பதற்குத் தெளிவாக இருக்கும். ஒரே ஒரு request மூலம் உங்கள் அனைத்துத் தரவுகளையும் பெற முடியும். ஆனால், உங்கள் app வளர வளர நிலை மாறும்.

உங்கள் page query பலவிதமான child components-களுக்கான fields-களைச் சேகரிக்கத் தொடங்கும். ஒரு புதிய component-க்காக நீங்கள் ஒரு field-ஐச் சேர்க்கிறீர்கள். ஆறு வாரங்களுக்குப் பிறகு அந்த component-ஐ நீக்குகிறீர்கள். ஆனால், முக்கிய query-யிலிருந்து அந்த field-ஐ நீக்க மறந்துவிடுகிறீர்கள். இப்போது அதை நீக்குவது பாதுகாப்பானதா என்று யாருக்கும் தெரியாது. இதனால் query முடிவில்லாமல் வளர்ந்து கொண்டே இருக்கும்.

Fragments இதைச் சரிசெய்கின்றன. பெரும்பாலான குழுக்கள் இவற்றை fields-களை copy மற்றும் paste செய்வதற்கான ஒரு வழியாகப் பயன்படுத்துகின்றன. இது தவறான வழி. Fragments என்பது component ownership-க்கான ஒரு மாதிரியாக (model) இருக்க வேண்டும்.

ஒரு fragment என்பது ஒரு குறிப்பிட்ட type-க்கான பெயரிடப்பட்ட fields தொகுப்பாகும்.

உதாரணம்: fragment UserBadge on User { id name avatarUrl }

User தேவைப்படும் எந்தவொரு query-யிலும் இந்த fragment-ஐ நீங்கள் spread செய்யலாம்.

இதன் உண்மையான மதிப்பு நீங்கள் fragment-ஐ எங்கே சேமிக்கிறீர்கள் என்பதில் உள்ளது. அவற்றை ஒரு shared file-இல் வைக்காதீர்கள். அந்த fragment-ஐப் பயன்படுத்தும் component இருக்கும் அதே file-இல் அதைச் சேமிக்கவும்.

இது co-location என்று அழைக்கப்படுகிறது. ஒவ்வொரு component-உம் அதன் சொந்தத் தரவுத் தேவைகளைத் தானே அறிவித்துக் கொள்கிறது.

ஒரு component-க்கு புதிய field தேவைப்படும்போது, அதை அதன் fragment-இல் சேர்க்கலாம். එවිට parent query தானாகவே புதுப்பிக்கப்படும். நீங்கள் ஒரு component-ஐ நீக்கும்போது, அதன் fragment-ஐயும் நீக்கிவிடலாம். இதனால் query அளவு குறையும். parent component தனது children-களின் உட்புற fields பற்றித் தெரிந்து கொள்ள வேண்டிய அவசியமில்லை.

Data masking இதை இன்னும் சிறப்பாக்குகிறது. Masking வசதி செயல்படுத்தப்பட்டால், ஒரு component தனது fragment-இல் கேட்ட field-களை மட்டுமே பார்க்கும். சர்வர் கூடுதல் தரவை அனுப்பினாலும், உங்கள் component அதை அணுக முடியாது.

இது ஒரு கண்டிப்பான ஒப்பந்தத்தை (strict contract) உருவாக்குகிறது.

  • ஒவ்வொரு component-இடமும் என்ன தரவு உள்ளது என்பதை TypeScript துல்லியமாகத் தெரிந்து கொள்ளும்.
  • ஒரு fragment-லிருந்து நீங்கள் ஒரு field-ஐ நீக்கினால், TypeScript அனைத்துத் தவறுகளையும் (errors) உங்களுக்குக் காட்டும்.
  • Refactoring என்பது முழு codebase-ஐத் தேடுவதற்குப் பதிலாக, ஒரு எளிய type-check ஆக மாறிவிடும்.

எப்போது fragments-களைப் பயன்படுத்த வேண்டும்:

  • User அல்லது Product போன்ற ஒரே type-ஐப் பல components பயன்படுத்தும்போது.
  • உங்கள் page queries மிக நீளமாக இருக்கும்போது.
  • உங்கள் queries-இல் தேவையில்லாத (dead) fields-களைத் தெரியாமல் விட்டுவிடுகிறீர்கள் என்றால்.
  • உங்கள் தரவுகளுக்கு TypeScript safety தேவைப்படும்போது.

சிறிய அளவில் தொடங்குங்கள். ஒரு parent query-யிலிருந்து தரவைப் பெறும் ஒரு component-ஐக் கண்டறியுங்கள். அதன் fields-களை ஒரு fragment-ஆக மாற்றவும். அந்த fragment-ஐ அந்த component file-லேயே வைக்கவும்.

உங்கள் app வளரும்போது, உங்கள் தரவுப் பெறுதல் (data fetching) உங்கள் UI-உடன் ஒத்துப்போவதை fragments உறுதி செய்கின்றன.

ஆதாரம்: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359