GraphQL Fragments: प्रत्येक Component को अपना डेटा खुद संभालने दें

GraphQL queries शुरुआत में साफ़-सुथरी लगती हैं। एक ही रिक्वेस्ट से आपका सारा डेटा मिल जाता है। फिर आपका ऐप बढ़ता है।

आपकी page query कई अलग-अलग child components के लिए fields इकट्ठा करने लगती है। आप एक नए component के लिए एक field जोड़ते हैं। छह हफ्ते बाद आप उस component को हटा देते हैं। आप मुख्य query से उस field को हटाना भूल जाते हैं। अब किसी को नहीं पता कि उसे हटाना सुरक्षित है या नहीं। Query हमेशा के लिए बढ़ती जाती है।

Fragments इसे ठीक करते हैं। ज़्यादातर टीमें इनका उपयोग fields को copy और paste करने के तरीके के रूप में करती हैं। यह गलत तरीका है। Fragments को component ownership के मॉडल के रूप में इस्तेमाल किया जाना चाहिए।

एक fragment किसी विशिष्ट type के लिए fields का एक नामित समूह (named group) होता है।

Example:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

आप इस fragment को किसी भी ऐसी query में spread करते हैं जिसे User की आवश्यकता होती है।

असली वैल्यू इस बात से आती है कि आप fragment को कहाँ सेव करते हैं। उन्हें किसी shared file में न रखें। Fragment को उसी file में रखें जिसमें वह component है जो उसका उपयोग करता है।

इसे co-location कहा जाता है। प्रत्येक component अपनी डेटा आवश्यकताओं (data needs) को घोषित करता है।

जब किसी component को एक नए field की आवश्यकता होती है, तो आप इसे उसके fragment में जोड़ देते हैं। Parent query अपने आप अपडेट हो जाती है। जब आप एक component को हटाते हैं, तो आप उसके fragment को भी हटा देते हैं। Query छोटी हो जाती है। Parent component को अपने children के internal fields के बारे में जानने की आवश्यकता नहीं होती है।

Data masking इसे और भी बेहतर बनाता है। Masking सक्षम होने पर, एक component केवल उन्हीं fields को देखता है जिन्हें उसने अपने fragment में माँगा है। भले ही server अतिरिक्त डेटा भेजे, आपका component उसे access नहीं कर सकता।

यह एक सख्त अनुबंध (strict contract) बनाता है।

• TypeScript को ठीक से पता होता है कि प्रत्येक component के पास क्या डेटा है।
• यदि आप fragment से कोई field हटाते हैं, तो TypeScript आपको हर error दिखाता है।
• Refactoring पूरे codebase में खोज करने के बजाय एक सरल type-check बन जाता है।

Fragments का उपयोग तब करें जब:

• कई components एक ही type जैसे User या Product का उपयोग करते हैं।
• आपकी page queries बहुत लंबी हैं।
• आप गलती से अपनी queries में dead fields छोड़ देते हैं।
• आप अपने डेटा के लिए TypeScript safety चाहते हैं।

छोटी शुरुआत करें। एक ऐसा component ढूँढें जो parent query से डेटा प्राप्त करता है। उसके fields को एक fragment में ले जाएँ। उस fragment को component file में रखें।

Fragments यह सुनिश्चित करते हैं कि जैसे-जैसे आपका ऐप बढ़ता है, आपका data fetching आपके UI के अनुरूप रहे।

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