This repository has been archived by the owner on May 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(recipes/making-an-api-call): update
- Loading branch information
Showing
4 changed files
with
350 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<!--ONE-DOCS-HIDE start--> | ||
[👈 Return to Overview](./README.md) | ||
<!--ONE-DOCS-HIDE end--> | ||
|
||
# Module Composition | ||
|
||
A key part of working with One App is module composition. Modules can be rendered inside one another by either using `ModuleRoute` or `RenderModule`. | ||
|
||
## `ModuleRoute` | ||
|
||
`ModuleRoute` from `holocron-module-route` allows modules to dynamically load other modules | ||
as a child route. This can be done on any module as routing is not limited to the route module: | ||
|
||
```jsx | ||
ParentModule.childRoutes = () => [ | ||
<ModuleRoute | ||
path="childModule" | ||
moduleName="ChildModule" | ||
greeting="hello" | ||
/>, | ||
]; | ||
``` | ||
|
||
When using ModuleRoute, additional props are passed through to the module via the `route` prop: | ||
|
||
```jsx | ||
const ChildModule = ({ route: { greeting } } = {}) => <h1>{greeting}</h1>; | ||
``` | ||
|
||
## `RenderModule` | ||
|
||
Holocron's `RenderModule` provides an alternate method to rendering another module: | ||
|
||
```jsx | ||
const ParentModule = () => ( | ||
<div> | ||
<h1>I am the parent module</h1> | ||
<RenderModule moduleName="ChildModule" props={{ greeting: 'hello' }} />; | ||
</div> | ||
); | ||
``` | ||
|
||
To use RenderModule we need to ensure that the module bundle has been correctly | ||
loaded into our client or server before it can be rendered. We can do this by | ||
dispatching either `loadModule` or `composeModules` in our parent modules `loadModuleData`. | ||
|
||
```jsx | ||
ParentModule.holocron = { | ||
loadModuleData: async ({ store: { dispatch }, ownProps }) => { | ||
await dispatch(composeModules([{ name: 'ChildModule' }])); | ||
// or | ||
// await dispatch(loadModule('ChildModule')); | ||
}, | ||
}; | ||
``` | ||
|
||
Both `loadModule` and `composeModules` will ensure that the modules client or server bundle has been loaded and the module can be rendered, however there are some minor differences between the two. | ||
|
||
`loadModule` takes the modules name as a single argument and will only ensure that module bundle has been loaded so the module can be successfully rendered. | ||
|
||
`composeModules` takes an array of objects, each one contains the name of the module required to load. It will then perform `loadModule` on each of those modules and in addition ensure that every modules `loadModuleData` is invoked. This is very important when server side rendering your modules as `loadModuleData` executes the asynchronous tasks that might be required to correctly render a module on the server. | ||
|
||
[☝️ Return To Top](#Making-An-Api-Call) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<!--ONE-DOCS-HIDE start--> | ||
[👈 Return to Overview](./README.md) | ||
<!--ONE-DOCS-HIDE end--> | ||
|
||
# POST To Module Routes | ||
|
||
To enable post set [`ONE_ENABLE_POST_TO_MODULE_ROUTES`](../api/server/Environment-Variables.md#ONE_ENABLE_POST_TO_MODULE_ROUTES) environment variable. | ||
Request body must be either a JSON object or FormData of less than 15KB in size and is passed as props to your module. | ||
|
||
Supported media types: | ||
- `application/json` | ||
- `application/x-www-form-urlencoded` | ||
|
||
|
||
[☝️ Return To Top](#POST) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters