useDataProvider
React-admin stores the dataProvider
object in a React context, so itβs available from anywhere in your application code. The useDataProvider
hook exposes the Data Provider to let you call it directly.
For instance, here is how to query the Data Provider for the current user profile:
import { useState, useEffect } from 'react';
import { useDataProvider } from 'react-admin';
import { Loading, Error } from './MyComponents';
const UserProfile = ({ userId }) => {
const dataProvider = useDataProvider();
const [user, setUser] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState();
useEffect(() => {
dataProvider.getOne('users', { id: userId })
.then(({ data }) => {
setUser(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
})
}, []);
if (loading) return <Loading />;
if (error) return <Error />;
if (!user) return null;
return (
<ul>
<li>Name: {user.name}</li>
<li>Email: {user.email}</li>
</ul>
)
};
But the recommended way to query the Data Provider is to use the dataProvider method hooks (like useGetOne
for instance).
Tip: The dataProvider
returned by the hook is actually a wrapper around your Data Provider. This wrapper logs the user out if the dataProvider returns an error, and if the authProvider sees that error as an authentication error (via authProvider.checkError()
).
Tip: If you use TypeScript, you can specify a record type for more type safety:
dataProvider.getOne<Product>('users', { id: 123 })
.then(({ data }) => {
// \- type of data is Product
// ...
})