[英]How to extend data provider in react admin?
I'm using react admin .我正在使用react admin 。 And I have created a DataProvider
from their example implementation .我从他们的示例实现中创建了一个DataProvider
。
However, I had to change their login form from username
to email
.但是,我不得不将他们的登录表单从username
更改为email
。 This means that now I should provide a custom Auth Provider .这意味着现在我应该提供一个自定义的Auth Provider 。
Now in my authProvider.js
I want to connect to API.现在在我的authProvider.js
我想连接到 API。 Based on their recommendation, it's better to extend DataProvider
for any communication with API.根据他们的建议,最好扩展DataProvider
以与 API 进行任何通信。
Since login
is not any of the existing methods in dataProvider
, thus I need to add methods to it.由于login
不是dataProvider
任何现有方法,因此我需要向它添加方法。
I added two methods for general purpose API call:我为通用 API 调用添加了两种方法:
const dataProvider = {
// default methods => getList, create, ect.
get: (url) => {
return httpClient(`${apiUrl}/${url}`, {
method: 'GET'
});
},
post: (url, params) => {
return httpClient(`${apiUrl}/${url}`, {
method: 'POST',
body: JSON.stringify(params)
});
}
And then inside my authProvider.js
I use it:然后在我的authProvider.js
使用它:
const authProvider = {
// authentication
login: params => {
dataProvider.post('/login', params).then(result => {
console.log(result);
});
},
Now I'm stuck at this point on how to wire them together.现在我被困在如何将它们连接在一起的问题上。 I receive this error when I press login
button on my login form:当我按登录表单上的login
按钮时收到此错误:
TypeError: Cannot read property 'then' of undefined
(anonymous function)
node_modules/ra-core/esm/auth/useLogin.js:39
36 | var nextSearch = locationState && locationState.nextSearch;
37 | var login = useCallback(function (params, pathName) {
38 | if (params === void 0) { params = {}; }
> 39 | return authProvider.login(params).then(function (ret) {
| ^ 40 | dispatch(resetNotification());
41 | var redirectUrl = pathName
42 | ? pathName
submit
src/Auth/LoginForm.js:67
64 |
65 | const submit = values => {
66 | setLoading(true);
> 67 | login(values, redirectTo)
| ^ 68 | .then(() => {
69 | setLoading(false);
70 | })
What should I return from my custom methods?我应该从我的自定义方法返回什么? How can I wire them together?我怎样才能将它们连接在一起?
Update I know I can use Promise
with resolve
and reject
methods.更新我知道我可以将Promise
与resolve
和reject
方法结合使用。 But I want to use the react-admin
's internal pipeline and logic as much as I can.但我想尽可能多地使用react-admin
的内部管道和逻辑。 For example, I don't want to implement HTTP status check in my custom get
and post
methods in my dataProvider.js
.例如,我不想在我的dataProvider.js
自定义get
和post
方法中实现 HTTP 状态检查。 They have this logic in their fetch.js
file and I want to be able to use that.他们的fetch.js
文件中有这个逻辑,我希望能够使用它。
You don't have to use the dataProvider for auth related requests.您不必将 dataProvider 用于与身份验证相关的请求。 Use fetch or any libraries you want (axios or any other).使用 fetch 或任何你想要的库(axios 或任何其他)。 For information, none of the authProvider we developer for clients used the dataProvider.有关信息,我们为客户开发的 authProvider 都没有使用 dataProvider。 They have two very distinct jobs他们有两个截然不同的工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.