ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
148 lines • 6.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDataProvider = void 0;
const react_1 = require("react");
const react_query_1 = require("@tanstack/react-query");
const DataProviderContext_1 = __importDefault(require("./DataProviderContext.cjs"));
const defaultDataProvider_1 = require("./defaultDataProvider.cjs");
const validateResponseFormat_1 = __importDefault(require("./validateResponseFormat.cjs"));
const useLogoutIfAccessDenied_1 = __importDefault(require("../auth/useLogoutIfAccessDenied.cjs"));
const dataFetchActions_1 = require("./dataFetchActions.cjs");
const populateQueryCache_1 = require("./populateQueryCache.cjs");
/**
* Hook for getting a dataProvider
*
* Gets a dataProvider object, which behaves just like the real dataProvider
* (same methods returning a Promise). But it's actually a Proxy object,
* which validates the response format, and logs the user out upon error
* if authProvider.checkError() rejects.
*
* @return dataProvider
*
* @example Basic usage
*
* import * as React from 'react';
* import { useState } from 'react';
* import { useDataProvider } from 'react-admin';
*
* const PostList = () => {
* const [posts, setPosts] = useState([])
* const dataProvider = useDataProvider();
* useEffect(() => {
* dataProvider.getList('posts', { filter: { status: 'pending' }})
* .then(({ data }) => setPosts(data));
* }, [])
*
* return (
* <Fragment>
* {posts.map((post, key) => <PostDetail post={post} key={key} />)}
* </Fragment>
* );
* }
*
* @example Handling all states (loading, error, success)
*
* import { useState, useEffect } from 'react';
* import { useDataProvider } from 'react-admin';
*
* 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>
* )
* }
*/
const arrayReturnTypes = ['getList', 'getMany', 'getManyReference'];
const useDataProvider = () => {
const dataProvider = ((0, react_1.useContext)(DataProviderContext_1.default) ||
defaultDataProvider_1.defaultDataProvider);
const queryClient = (0, react_query_1.useQueryClient)();
const logoutIfAccessDenied = (0, useLogoutIfAccessDenied_1.default)();
const dataProviderProxy = (0, react_1.useMemo)(() => {
return new Proxy(dataProvider, {
get: (_, name) => {
if (typeof name === 'symbol' || name === 'then') {
return;
}
if (name === 'supportAbortSignal') {
return dataProvider.supportAbortSignal;
}
return (...args) => {
const type = name.toString();
if (typeof dataProvider[type] !== 'function') {
throw new Error(`Unknown dataProvider function: ${type}`);
}
try {
return dataProvider[type]
.apply(dataProvider, args)
.then(response => {
if (process.env.NODE_ENV === 'development' &&
dataFetchActions_1.reactAdminFetchActions.includes(type)) {
(0, validateResponseFormat_1.default)(response, type);
}
if (response?.meta?.prefetched) {
(0, populateQueryCache_1.populateQueryCache)({
data: response?.meta.prefetched,
queryClient,
});
}
return response;
})
.catch(error => {
if (process.env.NODE_ENV !== 'production' &&
// do not log AbortErrors
!isAbortError(error)) {
console.error(error);
}
return logoutIfAccessDenied(error).then(loggedOut => {
if (loggedOut)
return {
data: arrayReturnTypes.includes(type)
? []
: {},
};
throw error;
});
});
}
catch (e) {
if (process.env.NODE_ENV !== 'production') {
console.error(e);
}
throw new Error('The dataProvider threw an error. It should return a rejected Promise instead.');
}
};
},
});
}, [dataProvider, logoutIfAccessDenied, queryClient]);
return dataProviderProxy;
};
exports.useDataProvider = useDataProvider;
const isAbortError = error => error instanceof DOMException &&
error.name === 'AbortError';
//# sourceMappingURL=useDataProvider.js.map