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
☠
Module.loadModuleData
has been relocated toModule.holocron.loadModuleData
Please see createSsrFetch
in the App Configuration section.
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
).
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