JavaScript SDK

Lazy loading

Entities have the option to lazy load properties and relations. Although there is support for this, always try to load the necessary members using the right load configuration and load options, to reduce overhead.

However, sometimes entities are passed between components and the required members might not be there. In these situations, lazy loading is a valid use case.

When a member is lazy loaded, they are fetched from the server by doing some IO. Then the member is added to the entity instance.

To lazy load one or more members, there is always a required call to the server. Try to group as many lazy loading as possible in one go, as explained in the following instructions.

Lazy loading always checks whether the members are already present, and if they are no IO will be done. The SDK will never overwrite loaded members, only add members that are not loaded.

Preconditions

To be able to lazy load members, the entity must exist in Content Hub. There is no point in trying to lazy load members on a newly created entity instance, as there are no missing members anyway. Refer to the following enum code for lazy-loading.

enum MemberLoadOption {
  /**
   * Restricts getting members to members that are already loaded.
   */
  LocalOnly = 0,
  /**
   * Allows members to be lazy loaded when needed.
   * For performance reasons, this should be used wisely.
   */
  LazyLoading = 1
}

Lazy loading a single member

To lazy load and return a property:

import { IProperty } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/property";

var titleProperty : IProperty = await entity.getPropertyAsync("Title", MemberLoadOption.LazyLoading);

To lazy load a property and return its value directly:

string title = await titleProperty.GetPropertyValueAsync<string>("Title"));

To lazy load and return a relation:

import { IRelation } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/relation"; //RelationRole and MemberLoadOption are optional arguments in the function below and can be used separated by a comma after AssetTypeToAsset. var relation: IRelation = await entity.getRelationAsync("AssetTypeToAsset");

Note

There are more overloads for loading properties and relations. See the API reference for a complete overview.

Lazy loading multiple members

To lazy load multiple properties in one call:

var propertyLoadOption = new PropertyLoadOption("propertyName1", "propertyName2");
await entity.LoadPropertiesAsync(propertyLoadOption);

To lazy load multiple relations in one call:

var relationLoadOption = new RelationLoadOption("relationName1", "relationName2");
await entity.LoadRelationsAsync(relationLoadOption);

To lazy load multiple properties and relations in one call:

var propertyLoadOption = new PropertyLoadOption("propertyName1", "propertyName2");
var relationLoadOption = new RelationLoadOption("relationName1", "relationName2");
await entity.LoadMembersAsync(propertyLoadOption, relationLoadOption);

If you have suggestions for improving this article, let us know!