GraphQL Fragments: દરેક Component ને તેના ડેટાનો માલિક બનવા દો

GraphQL queries શરૂઆતમાં એકદમ ચોખ્ખી દેખાય છે. એક જ રિક્વેસ્ટથી તમારો બધો ડેટા મળી જાય છે. પછી જેમ જેમ તમારી એપ વધતી જાય છે...

તમારી પેજ ક્વેરી ઘણા અલગ-અલગ child components માટે fields એકત્રિત કરવા લાગે છે. તમે નવા component માટે એક field ઉમેરો છો. છ અઠવાડિયા પછી તમે તે component ડિલીટ કરો છો. તમે મુખ્ય ક્વેરીમાંથી તે field દૂર કરવાનું ભૂલી જાઓ છો. હવે કોઈને ખબર નથી હોતી કે તેને ડિલીટ કરવું સુરક્ષિત છે કે નહીં. ક્વેરી કાયમ માટે વધતી જાય છે.

Fragments આ સમસ્યાનું નિરાકરણ લાવે છે. મોટાભાગની ટીમો તેનો ઉપયોગ fields ને copy અને paste કરવાના રસ્તા તરીકે કરે છે. આ ખોટી રીત છે. Fragments એ component ownership માટેનું એક મોડેલ હોવું જોઈએ.

Fragment એ ચોક્કસ type માટેના fields નો એક નામ આપેલ સમૂહ (named group) છે.

Example: fragment UserBadge on User { id name avatarUrl }

તમે આ fragment ને એવી કોઈપણ ક્વેરીમાં spread કરો છો જેને User ની જરૂર હોય.

સાચું મૂલ્ય તમે fragment ને ક્યાં સેવ કરો છો તેના પર નિર્ભર છે. તેને કોઈ shared file માં ન રાખો. જે component તેનો ઉપયોગ કરતું હોય તે જ file માં fragment ને રાખો.

આને co-location કહેવામાં આવે છે. દરેક component તેની પોતાની ડેટા જરૂરિયાતો જાહેર કરે છે.

જ્યારે કોઈ component ને નવા field ની જરૂર હોય, ત્યારે તમે તેને તેના fragment માં ઉમેરો છો. Parent query આપમેળે અપડેટ થઈ જાય છે. જ્યારે તમે કોઈ component ડિલીટ કરો છો, ત્યારે તમે તેનું fragment પણ ડિલીટ કરો છો. ક્વેરી નાની થઈ જાય છે. Parent component એ તેના children ના internal fields વિશે જાણવાની જરૂર નથી.

Data masking આને વધુ સારું બનાવે છે. Masking સક્ષમ હોવા સાથે, component ફક્ત તે જ fields જોઈ શકે છે જે તેણે તેના પોતાના fragment માં માંગ્યા હોય. જો સર્વર વધારાનો ડેટા મોકલે તો પણ, તમારું component તેને એક્સેસ કરી શકતું નથી.

આ એક કડક કરાર (strict contract) બનાવે છે.

  • TypeScript ને ચોક્કસ ખબર હોય છે કે દરેક component પાસે કયો ડેટા છે.
  • જો તમે fragment માંથી કોઈ field દૂર કરો છો, તો TypeScript તમને દરેક ભૂલ (error) બતાવે છે.
  • Refactoring હવે આખા codebase માં શોધવાને બદલે એક સરળ type-check બની જાય છે.

Fragments નો ઉપયોગ ત્યારે કરો જ્યારે:

  • એકથી વધુ components User અથવા Product જેવા સમાન type નો ઉપયોગ કરતા હોય.
  • તમારી પેજ ક્વેરીઝ ખૂબ લાંબી હોય.
  • તમે ભૂલથી તમારી ક્વેરીઝમાં 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