AUTH_ERROR not called on custom dataProvider - react-admin

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);