Skip to main content
πŸ‘€ Interested in the latest enterprise backend features of refine? πŸ‘‰ Join now and get early access!
Version: 4.xx.xx
Source Code

useDataProvider

useDataProvider is a React hook that returns the dataProvider which is passed to <Refine> component.

It is useful when you have multiple data providers and you want to access one of them.

Usage​

Let's say we have two data providers:

import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

const App = () => {
return (
<Refine
dataProvider={{
default: dataProvider("API_URL"),
second: dataProvider("SECOND_API_URL"),
}}
>
{/* ... */}
</Refine>
);
};

export default App;

Now we can access the data providers with the useDataProvider hook:

import { useDataProvider } from "@refinedev/core";

const dataProvider = useDataProvider();

const defaultDataProvider = dataProvider(); // return default data provider
const secondDataProvider = dataProvider("second"); // return second data provider

API​

Properties​

PropertyDescriptionTypeDefault
dataProviderNameThe name of the data provider you want to accessstringdefault

Return value​

DescriptionType
Data ProviderData Provider