Loading-Data.md

👈 Return to Overview

Loading Data

When Holocron Modules are composed and loaded on the Server and Client, the loadModuleData Module Lifecycle Hook is called to load any async requests. On the Server only, the fetchClient injected into the loadModuleData Hook may be customized using createSsrFetch.

Contents

• Loading Data
  • Module.loadModuleData
  • Module.appConfig.createSsrFetch
  • Holocron Module Configuration
    • Module.holocron.loadModuleData

Module.loadModuleData

☠ Module.loadModuleData has been relocated to Module.holocron.loadModuleData

Module.appConfig.createSsrFetch

Please see createSsrFetch in the App Configuration section.

Holocron Module Configuration

Please see the Holocron Module Configuration from the Holocron API Docs for more information about other properties.

Modules can trigger a server side redirect from loadModuleData by throwing an error that has the property abortComposeModules set to true and a redirect property containing an object with an HTTP status code (status) and the destination URL (url).

Module.holocron.loadModuleData

Runs On

• ✅ Server
• ✅ Browser

Shape

HelloWorldModule.holocron = {
  loadModuleData: async ({
    store, fetchClient, ownProps, module,
  }) => {
    const res = await fetchClient('https://example-api.com/data');
    const data = await res.json();
    if (data.redirect) {
      const redirectError = new Error(`Redirect user to ${data.redirect.url}`);
      redirectError.abortComposeModules = true;
      redirectError.redirect = { status: 302, url: data.redirect.url };
      throw redirectError;
    }
  },
};

Arguments

Argument	Type	Description
store	Redux Store	Redux store containing getState, dispatch and other methods.
fetchClient	fetch	ES6 Fetch API Compatible Client.
ownProps	React Props	React Props for the Holocron Module.
module	Module	The instantiated Holocron Module.

The loadModuleData Module Lifecycle Hook, is executed on the Server and Browser when a Module is loaded in either environment. This method is executed and resolved before any React Components are rendered inside a Holocron Module.

In practice, we may dispatch Redux actions and make async/await requests to populate our Module's reducers before any React Components are rendered:

// Runs on both Server and Browser
HelloWorldModule.holocron = {
  loadModuleData: async ({ store, fetchClient, ownProps }) => {
    store.dispatch({ type: 'LOADING_API' });
    const response = await fetchClient('https://api.example.com', ownProps.options);
    const data = await response.json();
    store.dispatch({ type: 'LOADED_API', data });
  },
};

📘 More Information

• Example: SSR Frank
• Customize SSR Fetch Client: Module.appConfig.createSsrFetch
• Docs: Redux Store
• Docs: ES6 Fetch

☝️ Return To Top