JSON React layouts data loader

Component middleware for JSON React layouts which enables data loading via the React SSR Data Loader library.

Usage

1import { init } from 'json-react-layouts-data-loader'
2import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader'
3
4interface MyServices {
5    // Put the services you want available to components
6}
7
8const resources = new DataLoaderResources<MyServices>()
9const {
10    getMiddleware,
11    createRegisterableComponentWithData,
12    createRegisterableCompositionWithData,
13} = init<MyServices>(resources)
14
15const layout = LayoutRegistration()
16    .registerComponents(registrar =>
17        registrar
18            // Register your components, then register the component data loading middleware
19            .registerMiddleware(getMiddleware('component')),
20    )
21    .registerCompositions(registrar =>
22        registrar
23            // Register your compositions, then register the composition data loading middleware
24            .registerMiddleware(getMiddleware('composition')),
25    )
26
27// Data-loading component.
28export const testComponentWithDataRegistration = createRegisterableComponentWithData(
29    'test-with-data',
30    {
31        // You provide this function to load the data
32        loadData: props => {},
33    },
34    (props, data) => {
35        if (!data.loaded) {
36            return <div>Loading...</div>
37        }
38
39        return <TestComponentWithData data={data.result} />
40    },
41)
42
43// Data-loading composition.
44const testCompositionWithDataRegistration = createRegisterableCompositionWithData<'main'>()(
45    'test-with-data', //                                Composition content areas ^^^^^^
46    {
47        // You provide this function to load the data
48        loadData: props => {},
49    },
50    ({ main }, props, data) => {
51    // ^^^^ Receive content areas here.
52        if (!data.loaded) {
53            return <div>Loading...</div>
54        }
55
56        return (
57            <>
58                <TestComponentWithData data={data.result} />
59                {main}
60            </>
61        )
62    },
63)

FAQ

My data load function references global variables and does not update when they change

If you reference global variables in your data load function the data will not be re-fetched when that variable changes. This is because the data loader assumes if the arguments are the same, the result of the load function will be the same as the current data and do nothing.

You can use the useRuntimeParams function to merge additional varibles to the data loader props when it re-renders so it can fetch the updated data as expected. For example if you had state stored in redux.

React hooks are supported inside this function.

1import { init } from 'json-react-layouts-data-loader'
2import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader'
3
4export const testComponentWithDataRegistration = createRegisterableComponentWithData(
5    'test-with-data',
6    {
7        getRuntimeParams: (props, services) => services.store.getState().myAdditionalState
8        // You provide this function to load the data
9        loadData: props => {
10            // Now the global state is visible to the data loader and will make up the cache key so changes to myAdditionalState will cause the data to be re-loaded
11            props.myAdditionalState
12        },
13    },
14    (props, data) => {
15        if (!data.loaded) {
16            return <div>Loading...</div>
17        }
18
19        return <TestComponentWithData data={data.result} />
20    },
21)