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.

$3

Ensure you have 1mg Router installed in your project:

``bash
npm install @tata1mg/router
`

Usage

$3

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

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


{/ Your components /}

`

- 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.

$3

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

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

`

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

`jsx

const HomePage = ()=>

`

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.

$3

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

`jsx
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.

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

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

$3

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

`jsx
// 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 }}
`

$3

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

`jsx
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.

$3

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

`jsx

{/ Your components /}

`

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

`jsx
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.