Content Island: Entidades relacionadas – Incluir contenido

Una de las características más potentes de Content Island es que te permite anidar entidades.

Por ejemplo: una entidad Curso puede tener un listado de entidades Lección.

Esto es muy útil cuando tenemos contenido jerárquico.

Hasta ahora, Content Island priorizaba el rendimiento y cargaba estas relaciones de forma lazy: si un curso tenía una lista de lecciones, se devolvían solo los IDs de esas lecciones.

Sin embargo, hay escenarios donde resulta más práctico traer las entidades completas de una vez. Un caso claro: si estás definiendo un Theme para tu web, quizá quieras cargar fuentes, colores y demás objetos de estilo en una sola petición. Para eso hemos añadido la opción Include Related Content.

TL;DR

Ahora en Content Island, al usar getContent o getContentList, puedes elegir:

• cargar solo la entidad principal y los IDs de sus referencias (lazy), o
• incluir también las entidades relacionadas (eager).

Esto se configura tanto en la UI (modal de generación de contrato) como en las llamadas, añadiendo el parámetro includeRelatedContent: true.

El ejemplo

Imagina que tenemos una entidad Lección con estos campos:

• title: título de la lección.
• slug: fragmento de URL amigable.
• content: contenido de la lección.
• video: enlace al vídeo.

Y una entidad Curso con:

• title: título del curso.
• slug: fragmento de URL amigable.
• thumbnail: imagen de preview.
• lessons: listado de lecciones.

Como ves, un curso tiene una lista de lecciones asociadas. Vamos a ver cómo consumir esto desde nuestra aplicación.

UI

Lo primero es definir la interfaz de la entidad Curso en código.
Content Island puede generarla automáticamente: basta con ir al tab Model, ir a la entidad y pinchar en el icono de TypeScript.

Por defecto, el código se genera en modo lazy (el campo de lecciones contiene una lista de IDs de lecciones).
Si activamos la opción Include related content (first level only), el contrato se actualiza y el campo de lista de lecciones pasa a ser un array de lecciones.

Nota: por rendimiento, solo se cargan objetos anidados de primer nivel.
Si una lección a su vez tiene referencias, estas no se expanden automáticamente.

Implementación

Vale, ya tenemos el nuevo modelo. ¿Cómo hacemos para que el cliente de la API se traiga también las lecciones?

Hasta ahora, en modo lazy, haríamos:

export async function getTraining(id: string): Promise<Training> {
  const training = await client.getContent<Training>({
    id,
  });
  return training;
}

Si queremos incluir las lecciones en la misma petición, basta con añadir una línea:

export async function getTraining(id: string): Promise<Training> {
  const training = await client.getContent<Training>({
    id,
+    includeRelatedContent: true
  });
  return training;
}

Esto que hemos visto aplica también a getContentList

Conclusiones

Hay escenarios en los que es preferible cargar los datos relacionados de forma anticipada, en lugar de hacerlo de manera perezosa. Esto puede mejorar el rendimiento y simplificar la lógica de la aplicación, especialmente cuando se trabaja con datos jerárquicos o anidados.

En Content Island te damos ahora los dos sabores para que tu elijás que opción es la que mejor se adapta a tus necesidades.