GraphQL Fragments: प्रत्येक Component ला त्याचा डेटा स्वतःचा असू द्या

GraphQL queries सुरुवातीला स्वच्छ दिसतात. एकाच विनंतीमध्ये (request) तुम्हाला सर्व डेटा मिळतो. मग तुमचे ॲप वाढू लागते.

तुमच्या पेज क्वेरीमध्ये (page query) अनेक वेगवेगळ्या चाइल्ड कंपोनेंट्ससाठी (child components) फील्ड्स जमा होऊ लागतात. तुम्ही एका नवीन कंपोनेंटसाठी एक फील्ड जोडता. सहा आठवड्यांनंतर तुम्ही तो कंपोनेंट काढून टाकता. पण तुम्ही मुख्य क्वेरीमधून ते फील्ड काढायला विसरता. आता ते फील्ड काढणे सुरक्षित आहे की नाही, हे कोणालाच माहित नसते. क्वेरी सतत वाढत जाते.

Fragments हे यावर उपाय आहेत. बहुतेक टीम्स त्यांचा वापर फील्ड्स कॉपी आणि पेस्ट करण्यासाठी करतात. ही चुकीची पद्धत आहे. Fragments हे component ownership चे मॉडेल असायला हवेत.

Fragment म्हणजे एका विशिष्ट type साठी फील्ड्सचा एक नावाचा समूह होय.

उदाहरण:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

ज्या क्वेरीला User ची गरज आहे, तिथे तुम्ही हा fragment spread करता.

खरा फायदा तो fragment तुम्ही कुठे सेव्ह करता यावर अवलंबून असतो. ते एखाद्या shared फाईलमध्ये ठेवू नका. ज्या component मध्ये त्याचा वापर होतो, त्याच फाईलमध्ये तो fragment ठेवा.

याला co-location म्हणतात. प्रत्येक component आपल्या डेटाच्या गरजा स्वतः घोषित करतो.

जेव्हा एखाद्या component ला नवीन फील्डची गरज असते, तेव्हा तुम्ही ते त्याच्या fragment मध्ये जोडता. Parent query आपोआप अपडेट होते. जेव्हा तुम्ही एखादा component काढून टाकता, तेव्हा त्याचा fragment देखील काढून टाकता. यामुळे क्वेरी लहान होते. Parent component ला त्याच्या children च्या अंतर्गत (internal) फील्ड्सबद्दल जाणून घेण्याची गरज नसते.

Data masking मुळे हे अधिक चांगले होते. Masking सुरू असल्यास, component ला फक्त तेच फील्ड्स दिसतात जे त्याने स्वतःच्या fragment मध्ये मागितले आहेत. सर्व्हरने अतिरिक्त डेटा पाठवला तरी, तुमचा component तो वापरू शकत नाही.

यामुळे एक strict contract तयार होतो.

• TypeScript ला अचूकपणे माहित असते की प्रत्येक component कडे कोणता डेटा आहे.
• जर तुम्ही fragment मधून एखादे फील्ड काढले, तर TypeScript तुम्हाला प्रत्येक error दाखवते.
• Refactoring करणे आता संपूर्ण codebase मध्ये शोध घेण्याऐवजी केवळ एक साधा type-check बनून राहते.

Fragments चा वापर केव्हा करावा:

• जेव्हा अनेक components User किंवा Product सारख्या एकाच type चा वापर करतात.
• जेव्हा तुमच्या page queries खूप लांब असतात.
• जेव्हा तुम्ही चुकून तुमच्या queries मध्ये dead fields ठेवून देता.
• जेव्हा तुम्हाला तुमच्या डेटासाठी TypeScript safety हवी असते.

छोट्यापासून सुरुवात करा. असा एक component शोधा जो parent query मधून डेटा घेतो. त्याची फील्ड्स एका fragment मध्ये हलवा. तो fragment त्या component फाईलमध्ये ठेवा.

तुमचे ॲप जसजसे वाढेल, तसतसे Fragments हे सुनिश्चित करतात की तुमचे data fetching तुमच्या UI शी सुसंगत आहे.

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