Lección 291: Fragmentos (Fragments) y su uso en GraphQL

Los fragmentos (o Fragments) en GraphQL son bloques de código que te permiten reutilizar grupos concretos de campos en las consultas.

Problema de duplicación en las consultas

Imagina que tenemos un esquema que representa la entidad User con los campos id, name, email y profilePicture. Supongamos que queremos obtener información sobre los autores de posts y comentarios. La consulta podría verse así:

query GetPostsAndComments {
  posts {
    id
    title
    author {
      id
      name
      email
      profilePicture
    }
  }
  comments {
    id
    text
    author {
      id
      name
      email
      profilePicture
    }
  }
}

Fíjate que el bloque con los campos del usuario (author) se repite dos veces.

No solo queda pesado, sino que también puede causar errores: si tienes que añadir o cambiar algún campo, tendrás que hacerlo en todos los sitios correspondientes (y a ver si no te olvidas de alguno).

Solución: usar fragmentos

Los fragmentos permiten sacar la parte común a un bloque aparte para reutilizarla. Así es como podríamos reescribir la consulta anterior usando fragmentos:

query GetPostsAndComments {
  posts {
    id
    title
    author {
      id
      name
      email
      profilePicture
    }
  }
  comments {
    id
    text
    author {
      id
      name
      email
      profilePicture
    }
  }
}

Genial, ¿no? El fragmento UserFields define la lista de campos que puedes reutilizar una y otra vez en cualquier query o mutation donde aparezca la entidad User.

Sintaxis y estructura de los fragmentos

Un fragmento se declara usando la palabra clave fragment, seguida de su nombre, el tipo al que pertenece y la lista de campos:

fragment NombreFragmento on Tipo {
  campo1
  campo2
  ...
}

Para usar un fragmento dentro de una consulta, basta con indicar su nombre precedido por tres puntos (...):

{
  entity {
    ...NombreFragmento
  }
}

Tomemos otro ejemplo. Tenemos el tipo Book, que describe libros:

type Book {
  id: ID!
  title: String!
  author: User!
  publishedYear: Int
}

Si la consulta trata sobre la lista de libros y sus autores, podemos declarar un fragmento para el autor:

fragment AuthorFields on User {
  name
  email
}

query GetBooks {
  books {
    id
    title
    author {
      ...AuthorFields
    }
    publishedYear
  }
}

Así evitamos tener que listar los campos del autor (name, email) en cada consulta.

Ventajas de usar fragmentos

1. Menos duplicación de código
   Cuantas menos copias del mismo código, menos probabilidad de errores y desajustes.
2. Facilidad de mantenimiento
   Actualizar o añadir un campo en un fragmento impacta automáticamente en todas las consultas donde se use.
3. Código más limpio y legible
   Las consultas quedan más cortas y son más fáciles de entender.
4. Mayor consistencia
   Un fragmento único con una estructura de campos definida garantiza que todas las consultas usen los mismos datos.

Limitaciones y consejos al trabajar con fragmentos

Aunque los fragmentos son útiles, es importante entender sus limitaciones:

• Los fragmentos solo funcionan dentro de un mismo tipo o interface. Si quieres usar un fragmento para distintos tipos, tendrás que definir fragmentos separados para cada uno.
• Demasiados fragmentos pueden complicar la comprensión del esquema. No fragmentes todo por sistema. Lo óptimo es usar fragmentos para grupos grandes y frecuentemente repetidos de campos.

Práctica: Crear y usar fragmentos

Paso 1: Creamos un esquema sencillo de GraphQL

type User {
  id: ID!
  name: String!
  email: String!
}

type Comment {
  id: ID!
  text: String!
  author: User!
}

type Query {
  comments: [Comment!]!
}

Paso 2: Escribimos un fragmento para User

fragment UserBasicInfo on User {
  id
  name
  email
}

Paso 3: Usamos el fragmento en la consulta

query GetCommentsWithAuthors {
  comments {
    id
    text
    author {
      ...UserBasicInfo
    }
  }
}

Paso 4: Añadimos una nueva consulta

Imagina que quieres añadir otra query que muestre la lista de usuarios. El fragmento vuelve a ser imprescindible:

query GetAllUsers {
  users {
    ...UserBasicInfo
  }
}

Herramientas útiles para trabajar con fragmentos de GraphQL

1. GraphQL Playground
   Si estás desarrollando un GraphQL API, GraphQL Playground te ayuda a probar consultas y fragmentos en una interfaz cómoda.
2. Apollo Client
   Apollo Client gestiona automáticamente el caché de datos basado en fragmentos. Esto es especialmente útil en el frontend.

Práctica final

Imagina que al tipo User se le añade un nuevo campo profilePicture. Basta con actualizar el fragmento:

fragment UserBasicInfo on User {
  id
  name
  email
  profilePicture
}

Ahora esa actualización se reflejará en todas las consultas donde se use el fragmento. ¿No es una maravilla?

La próxima clase tocará enfoques más complejos y potentes, como la carga por lotes (Batch Loading). Pero antes de seguir, asegúrate de que entiendes bien los fragmentos y de que estás listo para usarlos en proyectos reales.