Fragments za GraphQL: Ruhusu Kila Component Imiliki Data Yake

Query za GraphQL zinaonekana safi mwanzoni. Ombi moja hupata data zako zote. Kisha programu yako inakua.

Query ya ukurasa wako inaanza kukusanya 'fields' kwa ajili ya 'child components' nyingi tofauti. Unaongeza 'field' kwa ajili ya component mpya. Wiki sita baadaye unafuta component hiyo. Unasahau kuondoa 'field' hiyo kwenye query kuu. Sasa hakuna anayejua kama ni salama kuifuta. Query inaendelea kukua milele.

Fragments hurekebisha hili. Timu nyingi huzitumia kama njia ya kunakili na kubandika 'fields'. Hii si njia sahihi. Fragments zinapaswa kuwa mfano wa umiliki wa component.

Fragment ni kikundi cha 'fields' kilichopewa jina kwa ajili ya aina (type) fulani.

Mfano:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

Unasambaza (spread) fragment hii kwenye query yoyote inayohitaji User.

Thamani halisi inatokana na mahali unapohifadhi fragment. Usiziweke kwenye faili la pamoja. Weka fragment kwenye faili lilelile la component inayaitumia.

Hii inaitwa co-location. Kila component inatangaza mahitaji yake ya data yenyewe.

Wakati component inapohitaji 'field' mpya, unaiongeza kwenye fragment yake. Query ya mzazi (parent query) inajisasisha yenyewe moja kwa moja. Unapofuta component, unafuta fragment yake. Query inapungua ukubwa. Component ya mzazi haihitaji kujua kuhusu 'internal fields' za watoto wake.

Data masking inafanya hili kuwa bora zaidi. Masking ikiwa imewashwa, component inaona tu 'fields' ambazo iliuziomba kwenye fragment yake yenyewe. Hata kama seva inatuma data ya ziada, component yako haiwezi kuifikia.

Hii inatengeneza mkataba thabiti.

  • TypeScript inajua sawia data gani kila component inayo.
  • Ukiondoa 'field' kwenye fragment, TypeScript inakuonyesha kila kosa (error).
  • Refactoring inakuwa ukaguzi rahisi wa aina (type-check) badala ya kutafuta kwenye codebase yako nzima.

Tumia fragments wakati:

  • Component nyingi zinatumia aina (type) ile ile kama User au Product.
  • Query zako za ukurasa ni ndefu sana.
  • Unaaacha 'dead fields' kwenye query zako kwa bahati mbaya.
  • Unataka usalama wa TypeScript kwa ajili ya data zako.

Anza kidogo. Tafuta component moja inayopata data kutoka kwenye query ya mzazi. Hamisha 'fields' zake kwenda kwenye fragment. Weka fragment hiyo kwenye faili la component.

Fragments zinahakikisha upataji wa data (data fetching) unaendana na UI yako wakati programu yako inakua.

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