load(functionToLoad)

Loads CMS data asynchronously.

CMS data (like any Obj, Widget or Binary) needs to be loaded from the cloud service before it can be used. When rendering content inside a React component, all CMS data is loaded automatically using Scrivito.connect

Sometimes, however, you may want to access CMS data outside of rendering, for example inside an event handler like onClick. This is where Scrivito.load comes in: It loads CMS data and allows you to work asynchronously with the loaded data.

If you wrap a function with Scrivito.load, you will get a Promise back. The Promise allows you to attach callbacks. Scrivito.load executes the passed-in function and loads all the required data. Once all data has been loaded, the attached callbacks are run. The value returned by your function is forwarded to the callbacks.

Here is a simple example:

Copy
Scrivito.load(() => 
  Scrivito.Obj.root().id()
).then(id => 
  console.log(id)
);

The example code loads the ID of Obj.root. A callback is attached, which prints the ID to the browser console. 

The function passed in to Scrivito.load may be simple, like in the example: It loads just a single piece of data. Of course, Scrivito.load can also be used to load large amounts of data. Also, the passed-in function may perform more complex computations. 

In order to load all the required data, Scrivito.load may have to execute the passed-in function multiple times. Therefore, the function must be "pure" (free of side effects). It must only read data. It must not modify data, interact with the browser, or trigger network requests. This is why, in the example above, the call to console.log is not made inside Scrivito.load but using an asynchronous callback attached via then.

Again, please note that you don't need to use this method when rendering inside of React components. They will load the required data automatically using Scrivito.connect.

Params

  • functionToLoad (Function) – The data to be loaded. Please make sure that this function is pure, meaning that it does not perform I/O and is free of side effects. 

Returns

A Promise. The resolved value will be the value returned by the given function.