RouterDataProvider

Import RouterDataProvider from catalyst-core in 0.3.x. Legacy 0.2.x applications import it from @tata1mg/router; do not install that package in a 0.3.x application.

The RouterDataProvider component wraps your application and manages data fetching for routes. It executes fetchers on route changes and provides data to child components.

Props

Prop	Type	Description
`initialState`	`object`	Initial data state, used to hydrate client with server data
`fetcherArgs`	`object`	Arguments passed to all fetcher functions
`config`	`object`	Global configuration options

Basic Usage

import { RouterDataProvider } from "catalyst-core";
import App from "@containers/App";

export const preparedRoutes = ({ routerInitialState }) => {
  return [
    {
      element: (
        <RouterDataProvider
          initialState={routerInitialState}
          fetcherArgs={{}}
          config={{}}
        >
          <App />
        </RouterDataProvider>
      ),
      children: routes,
    },
  ];
};

With Redux Store

Pass the Redux store through fetcherArgs to make it available in fetchers:

import { RouterDataProvider } from "catalyst-core";
import App from "@containers/App";

export const preparedRoutes = ({ store, routerInitialState }) => {
  return [
    {
      element: (
        <RouterDataProvider
          initialState={routerInitialState}
          fetcherArgs={{ store }}
          config={{}}
        >
          <App />
        </RouterDataProvider>
      ),
      children: routes,
    },
  ];
};

Access in fetchers:

HomePage.serverFetcher = async ({ params }, { store }) => {
  return store.dispatch(fetchPageData());
};