Frammenti GraphQL: lascia che ogni componente sia proprietario dei propri dati

Le query GraphQL sembrano pulite all'inizio. Una singola richiesta ottiene tutti i tuoi dati. Poi la tua app cresce.

La query della tua pagina inizia a raccogliere campi per molti diversi componenti figli. Aggiungi un campo per un nuovo componente. Sei settimane dopo elimini quel componente. Dimentichi di rimuovere il campo dalla query principale. Ora nessuno sa se sia sicuro eliminarlo. La query cresce all'infinito.

I frammenti risolvono questo problema. La maggior parte dei team li usa come un modo per copiare e incollare i campi. Questo è il modo sbagliato. I frammenti dovrebbero essere un modello per la proprietà dei componenti.

Un frammento è un gruppo nominato di campi per un tipo specifico.

Esempio: fragment UserBadge on User { id name avatarUrl }

Usi lo spread di questo frammento in qualsiasi query che necessiti di un User.

Il vero valore deriva da dove salvi il frammento. Non metterli in un file condiviso. Inserisci il frammento nello stesso file del componente che lo utilizza.

Questo si chiama co-location. Ogni componente dichiara le proprie necessità di dati.

Quando un componente ha bisogno di un nuovo campo, lo aggiungi al suo frammento. La query genitore si aggiorna automaticamente. Quando elimini un componente, elimini il suo frammento. La query si restringe. Il componente genitore non ha bisogno di conoscere i campi interni dei suoi figli.

Il data masking rende tutto questo ancora migliore. Con il masking abilitato, un componente vede solo i campi richiesti nel proprio frammento. Anche se il server invia dati extra, il tuo componente non può accedervi.

Questo crea un contratto rigoroso.

  • TypeScript sa esattamente quali dati ha ogni componente.
  • Se rimuovi un campo da un frammento, TypeScript ti mostra ogni errore.
  • Il refactoring diventa un semplice controllo dei tipi invece di una ricerca in tutto il codebase.

Usa i frammenti quando:

  • Più componenti utilizzano lo stesso tipo, come User o Product.
  • Le query della tua pagina sono troppo lunghe.
  • Lasci accidentalmente campi inutilizzati nelle tue query.
  • Vuoi la sicurezza di TypeScript per i tuoi dati.

Inizia in piccolo. Trova un componente che riceve dati da una query genitore. Sposta i suoi campi in un frammento. Inserisci quel frammento nel file del componente.

I frammenti assicurano che il recupero dei dati corrisponda alla tua UI man mano che l'app cresce.

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