AUTH_ERROR not called on custom dataProvider

Question

When I use the react-admin component <List> <Edit> the AUTH_ERROR is called in my authProvider.

But when I'm using the dataProvider in a custom component, the AUTH_ERROR is not called.

As stated in the documentation, if any API calls return any error, the authProvider will catch it with type AUTH_ERROR.

I'm using the default dataProvider like in the tutorial :

const API_URL = process.env.REACT_APP_API_URL;

const convertDataProviderRequestToHTTP = (type, resource, params) => {
    let url = '';
    const token = localStorage.getItem('token');
    const options = {
        headers: new Headers({
            'Accept': 'application/ld+json',
            'Content-Type': 'application/ld+json',
            'Authorization': `Bearer ${token}`,
        }),
    };
    switch (type) {
        case 'GET_GENERAL': {
            url = `${API_URL}/${resource}?${stringify(params)}`;
            break;
        }
        case GET_ONE:
            url = `${API_URL}/${resource}/${params.id}`;
            break;
        case UPDATE:
            url = `${API_URL}/${resource}/${params.id}`;
            options.method = 'PUT';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${API_URL}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        default:
            throw new Error(`Unsupported fetch action type ${type}`);
    }

    return {url, options};
};

const convertHTTPResponseToDataProvider = (response, type, resource, params) => {
    const {json} = response;
    switch (type) {
        case GET_LIST:
        case GET_MANY_REFERENCE:
            let data = json['hydra:member'];
            return {
                data: data,
                total: json['hydra:totalItems'],
            };
        case CREATE:
            return {data: json};
        default:
            return {data: json};
    }
};

export default (type, resource, params) => {
    const {fetchJson} = fetchUtils;
    const {url, options} = convertDataProviderRequestToHTTP(type, resource, params);
    return fetchJson(url, options)
        .then (response => {console.log(response) ; return response})
        .then(response => convertHTTPResponseToDataProvider(response, type, resource, params));
};

And in my custom component here's how I call the dataProvider :

class MyClass extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
        };
    }

    componentDidMount() {
        dataProvider('GET_GENERAL', 'myRessource', {
            "perPage": 1,
            "page": 1,
            "oneField.id": 123,
            "twoField.id": 132,
            "threeField.id": 145,
        })
            .then(response => response.data)
            .then((response) => {
                    this.setState({data: response});
            })
    };
 render() {
        const {data} = this.state;
        return <div>{data.field}</div>
 }
}

const enhance = compose(
    withStyles(styles),
    connect(mapStateToProps, {customAction}),
    translate
);

export default enhance(MyClass);

And of course my authProvider is configured like that :

    // ...
    if (type === AUTH_ERROR) {
        const {status} = params;
        if (status === 401 || status === 403) {
            console.log('here');
            return Promise.reject();
        }
        console.log('there');
        return Promise.resolve();
    }
    // ...

In my example, my API returns HTTP 401, and in the console I never get 'here' or 'there', so I can't perform custom action on AUTH_ERROR.

Any ideas what am I doing wrong ?

Answer 1

I Figure out how to handle the FETCH_ERROR. The doc said : React-admin components don’t call the dataProvider function directly. They use withDataProvider. So here's the solution with my example below :

class MyClass extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
        };
    }

    componentDidMount() {
        const { dataProvider } = this.props;
        dataProvider('GET_GENERAL', 'myRessource', {
            "perPage": 1,
            "page": 1,
            "oneField.id": 123,
            "twoField.id": 132,
            "threeField.id": 145,
        })
            .then(response => response.data)
            .then((response) => {
                    this.setState({data: response});
            })
    };
 render() {
        const {data} = this.state;
        return <div>{data.field}</div>
 }
}

const enhance = compose(
    withStyles(styles),
    withDataProvider,
    connect(mapStateToProps, {customAction}),
    translate
);

export default enhance(MyClass);