Router Data Provider

Introduction

The Router Data Provider is a component designed to facilitate data fetching and management within a React application using 1mg Router.

Installation

Ensure you have 1mg Router installed in your project:

npm install @tata1mg/router

Usage

RouterDataProvider

The RouterDataProvider component is responsible for rendering child components with router context and executing data fetchers on path change.

import { RouterDataProvider } from '@tata1mg/router';

<RouterDataProvider initialState={} fetcherArgs={} config={}>
    {/* Your components */}
</RouterDataProvider>

• initialState: Initial state of the data provider, mostly used to hydrate the client with data from the server.
• fetcherArgs: An object passed to all fetcher functions.
• config: Global configuration options for the data provider.

Defining Fetcher Functions

Fetcher functions should be attached to the component passed in routes array

const routes = [
    {
        path: "/",
        index: true,
        component: HomePage,
    },
    {
        path: "/cart",
        component: CartComponent,
        children: [{
          path:"",
          Component: CartChild
        },
        {
          path:"prescription",
          element: <Prescription/>
        }],
    },
    {
        path: "/health-products",
        component: HealthProducts,
    },
]

We can pass component to a route object in three ways: component, element, Component

  const HomePage = ()=><div>HomePage</div>
  //Fetcher functions
  HomePage.clientFetcher = (routerProps,fetcherArgs)=>{ return new Promise()}
  HomePage.serverFetcher = (serverRouterProps,fetcherArgs)=>{ return new Promise()}

Both clientFetcher and serverFetcher should always return a promise

routerProps

The routerProps object contains information about the current route, location, parameters, search parameters, and navigation functions. It is passed to clientFetcher function on the client side data fetching.

serverRouterProps

The serverRouterProps object contains information about the route, URL, and server request. It passed to the serverFetcher for server-side data fetching.

useCurrentRouteData

The useCurrentRouteData hook returns the current router context object with data, error, isFetching, and isFetched properties.

import { useCurrentRouteData } from "@tata1mg/router"

const currentRouteData = useCurrentRouteData()
const { isFetching, isFetched, error, data, refetch } = currentRouteData

• isFetching: Data fetching is in progress
• isFetched: Fetcher function is resolved/rejected
• error: Error object thrown from clientFetcher/serverFetcher
• data: data object returned from clientFetcher/serverFetcher
• refetch: A function that can be called to manually trigger a refetch of the data.

The refetch function can be used to explicitly request a fresh fetch of the data associated with the current route. It can be particularly useful for scenarios where you need to update the data without navigating away from the current route with updated payload.

// Example usage of refetch function
const handleRefresh = () => {
    currentRouteData.refetch(payload)
}

payload passed to refetch function is forwarded to clientFetcher/serverFetcher as third argument

useRouterData

The useRouterData hook returns a router context object with data of all the fetchers in the current route tree.

// route: /a/b
import { useRouterData } from '@tata1mg/router';

const routerData = useRouterData();
//Supposed you have /a route and /b as child route and attached fetchers to all the routes following is going to be the structure of routerData
{"/a/b":{isFetching , isFetched , error , data }, "index/a":{isFetching , isFetched , error , data }}

serverDataFetcher

The serverDataFetcher function is used to fetch data using server fetchers defined in routes. This is meant to be used on server

import { serverDataFetcher } from "@tata1mg/router"

const data = await fetchData(serverFetchDataProps, fetcherArgs)

• serverFetchDataProps: Object containing routes array, current url, and express request object.
• fetcherArgs: Arguments passed to fetcher functions.

Data Caching

RouterDataProvider supports data caching out of the box and will store fetched data in context so that you don't fetch data again on route change util required.

But for some reason if you need to disable caching in you application you can do it in following two ways:

• Using config props in RouterDataProvider component

<RouterDataProvider config={{disableCaching:true}}>
    {/* Your components */}
</RouterDataProvider>

This will disable data caching for all the pages in application.

• Using additional property in Route Object. If you want to disable data caching for a specific route or if you have disabled data caching globally and need to enable it for a specific route you can use this approach

const routes = [
    {
        path: "/",
        index: true,
        component: HomePage,
        disableCaching: true // This will disable data caching for this page
    },
    {
        path: "/health-products",
        component: HealthProducts,
        disableCaching: false // This will disable data caching for this page
    },
]

Please Note: The flag value passed in the route object will supersede the global configuration value.