CODEWITHSUNDEEP
javascriptreactjsreact-admin
Hossein Fallah
Hossein Fallah

Reputation: 2539

How to extend data provider in react admin?

I'm using react admin. And I have created a DataProvider from their example implementation.

However, I had to change their login form from username to email. This means that now I should provide a custom Auth Provider.

Now in my authProvider.js I want to connect to API. Based on their recommendation, it's better to extend DataProvider for any communication with API.

Since login is not any of the existing methods in dataProvider, thus I need to add methods to it.

I added two methods for general purpose API call:

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:

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:

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. But I want to use the react-admin's internal pipeline and logic as much as I can. For example, I don't want to implement HTTP status check in my custom get and post methods in my dataProvider.js. They have this logic in their fetch.js file and I want to be able to use that.

Upvotes: 1

Views: 1243

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

You don't have to use the dataProvider for auth related requests. Use fetch or any libraries you want (axios or any other). For information, none of the authProvider we developer for clients used the dataProvider. They have two very distinct jobs

Upvotes: 1

Related Questions