react-router-fetch-data

Fetch data router for React-Router v4

• Fetch data in correct order from API
• Using standard "matchPattern" from "react-router"
• Declarative
• Only Server Side

Fetch data router:

import { fetchDataRouter, Match } from 'react-router-fetch-data';
 
const resolveFetchData = fetchDataRouter(
    <Match pattern = '/'             on = {actionCreators.fetchUser}/>,
    <Match pattern = '/'             on = {actionCreators.fetchForAll}/>,
    <Match pattern = '/app/'         on = {actionCreators.fetchApp} exactly = {true}/>,
    <Match pattern = '/app/config'   on = {actionCreators.fetchAppConfig}/>,
    <Match pattern = '/app/config/1' on = {actionCreators.fetchAppConfig1}/>,
    <Match pattern = '/app/:id'      on = {actionCreators.fetchForAllInApp}/>,
    <Match pattern = '/app/test'     on = {actionCreators.fetchAppTest}/>,
    <Match pattern = '/about'        on = {actionCreators.fetchAbout}/>,
);
 

or

const resolveFetchData = fetchDataRouter(
    {pattern: '/',             onMatch: actionCreators.fetchUser                     },
    {pattern: '/',             onMatch: actionCreators.fetchForAll                   },
    {pattern: '/app/',         onMatch: actionCreators.fetchApp,        exactly: true},
    {pattern: '/app/config',   onMatch: actionCreators.fetchAppConfig                },
    {pattern: '/app/config/1', onMatch: actionCreators.fetchAppConfig1               },
    {pattern: '/app/:id',      onMatch: actionCreators.fetchForAllInApp              },
    {pattern: '/app/test',     onMatch: actionCreators.fetchAppTest                  },
    {pattern: '/about',        onMatch: actionCreators.fetchAbout                    }
);

Resolve fetch data -> Render

function handler(req, res) {
    //...
    resolveFetchData(req.url).then((errors) => {
        //fetch-data errors/rejects 
        if(errors.length > 0) {
            console.warn(...errors);
        }
        const markup = ReactDOMServer.renderToStaticMarkup(
            <App/>
        );
        
        res.end(markup);
    });
}
 

Function signature Match.on

fetchExampleData({ params: Object, isExact: Boolean, pathname: String }) {
    //..
    return promise;
}