AUTH_ERROR не вызывается для пользовательского dataProvider - PullRequest
Новая
       12

AUTH_ERROR не вызывается для пользовательского dataProvider

0 голосов
/ 08 июля 2019

Когда я использую компонентact-admin <List> <Edit>, AUTH_ERROR вызывается в моем authProvider.

Но когда я использую dataProvider в пользовательском компоненте, AUTH_ERROR не вызывается.

Как указано в документации, если какие-либо вызовы API возвращают какую-либо ошибку, authProvider перехватит ее с типом AUTH_ERROR.

Я использую dataProvider по умолчанию, как в учебнике: 

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

А в моем пользовательском компоненте вот как я вызываю 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);

И, конечно, мой authProvider настроен так: 

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

В моем примере мой API возвращает HTTP 401, и в консоли я никогда не получаю «здесь» или «там», поэтому я не могу выполнить пользовательское действие над AUTH_ERROR.

Есть идеи, что я делаю не так?

1 Ответ

0 голосов
/ 09 июля 2019

Я выяснил, как обращаться с FETCH_ERROR.Док сказал: React-admin components don’t call the dataProvider function directly. Они используют withDataProvider.Итак, вот решение с моим примером ниже: 

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