Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
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