Content Island: Related Entities - Include Content

One of the most powerful features of Content Island is that it allows you to nest entities.

For example: a Course entity can have a list of Lesson entities.

This is very useful when we have hierarchical content.

Until now, Content Island prioritized performance and loaded these relationships in a lazy way: if a course had a list of lessons, only the IDs of those lessons were returned.

However, there are scenarios where it is more practical to bring in the entire entities at once. A clear case: if you are defining a Theme for your website, you may want to load fonts, colors and other styling objects in a single request. For that we have added the Include Related Content option.

TL;DR

Now in Content Island, when using getContent or getContentList, you can choose:

• load only the main entity and the IDs of its references (lazy), or.
• include also the related entities (eager).

This is configured both in the UI (contract generation modal) and in the calls, adding the includeRelatedContent: true parameter.

The example

Imagine we have a Lesson entity with these fields:

• title: lesson title.
• slug: Friendly URL snippet.
• content: lesson content.
• video: link to the video.

And a Course entity with:

• title: course title.
• slug: friendly URL fragment.
• thumbnail: preview image.
• lessons: list of lessons.

As you can see, a course has a list of associated lessons. Let's see how to consume this from our application.

UI

The first thing is to define the interface of the Course entity in code.

Content Island can generate it automatically: just go to the tab Model, go to the entity and click on the TypeScript icon.

By default, the code is generated in lazy mode (the lesson field contains a list of lesson IDs).
If we activate the Include related content (first level only) option, the contract is updated and the lesson list field becomes an array of lessons.

Note: for performance reasons, only first level nested objects are loaded.
If a lesson in turn has references, these are not automatically expanded.

Implementation

Ok, we have the new model, how do we make the API client bring the lessons as well?

So far, in lazy mode, we would do:

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

If we want to include the lessons in the same request, just add a line:

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

This also applies to getContentList.

Conclusions

In some cases, it’s better to load related data upfront rather than lazily. Doing so can boost performance and simplify your application logic, especially when dealing with hierarchical or nested content. With Content Island, you now have both options available—so you can choose the approach that best fits your needs.