Fragmentos de GraphQL: Deja que cada componente sea dueño de sus propios datos

Las consultas de GraphQL parecen limpias al principio. Una sola petición obtiene todos tus datos. Luego, tu aplicación crece.

La consulta de tu página empieza a recopilar campos para muchos componentes hijos diferentes. Añades un campo para un nuevo componente. Seis semanas después, eliminas ese componente. Olvidas eliminar el campo de la consulta principal. Ahora nadie sabe si es seguro borrarlo. La consulta crece indefinidamente.

Los fragmentos solucionan esto. La mayoría de los equipos los utilizan como una forma de copiar y pegar campos. Esta es la forma incorrecta. Los fragmentos deberían ser un modelo de propiedad de componentes.

Un fragmento es un grupo de campos con nombre para un tipo específico.

Ejemplo:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

Extiendes este fragmento en cualquier consulta que necesite un User.

El valor real reside en dónde guardas el fragmento. No los pongas en un archivo compartido. Pon el fragmento en el mismo archivo que el componente que lo utiliza.

Esto se llama co-location. Cada componente declara sus propias necesidades de datos.

Cuando un componente necesita un nuevo campo, lo añades a su fragmento. La consulta padre se actualiza automáticamente. Cuando eliminas un componente, eliminas su fragmento. La consulta se reduce. El componente padre no necesita conocer los campos internos de sus hijos.

El enmascaramiento de datos (data masking) hace que esto sea aún mejor. Con el enmascaramiento activado, un componente solo ve los campos que solicitó en su propio fragmento. Incluso si el servidor envía datos adicionales, tu componente no puede acceder a ellos.

Esto crea un contrato estricto.

  • TypeScript sabe exactamente qué datos tiene cada componente.
  • Si eliminas un campo de un fragmento, TypeScript te mostrará todos los errores.
  • La refactorización se convierte en una simple comprobación de tipos en lugar de una búsqueda por todo tu código base.

Usa fragmentos cuando:

  • Varios componentes utilizan el mismo tipo, como User o Product.
  • Tus consultas de página sean demasiado largas.
  • Dejes campos muertos accidentalmente en tus consultas.
  • Quieras la seguridad de TypeScript para tus datos.

Empieza poco a poco. Busca un componente que obtenga datos de una consulta padre. Mueve sus campos a un fragmento. Coloca ese fragmento en el archivo del componente.

Los fragmentos garantizan que la obtención de datos coincida con tu interfaz de usuario a medida que tu aplicación crece.

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