Passing arguments to 'loader'

Question

I have a parent component A, creating a child component B. This child component's definition is imported using Loadable. In the following, component B is the Catalog.

Now I want to fetch some initial data before rendering this component, as it is described in the doc. Here's what I have :

const Catalog = Loadable.Map({
    loader: {
        Catalog: () => import('./Catalog'),
        initialData: () => fetchCatalogInitialData(foo1, foo2),
    },
    loading: () => {return <div>foo</div>},
    render(loaded, props) {
        let Catalog = loaded.Catalog.default;
        let initialData = loaded.initialData;
        return  <Catalog {...props} initialData={initialData} />;
    },
});

I'd like fetchCatalogInitialData to be called with parameters, i.e a URL, a token, etc. Is this doable in a nice way?

score 0 · Answer 1 · answered May 21 '18 at 21:24

As far as I know, this is not doable without forking the library. There are a few rejected PRs (example) that attempt to do this that the maintainer has rejected. To be fair, the rationale the author provides is as follows:

Your loader should be as static as possible or it's impossible to do things like server-side rendering reliably. I know that it is very limiting, but it's on purpose.

If you're not doing SSR, forking may be the best solution.

Passing arguments to 'loader'

1 Answers1