React-admin: Missing headers object in data provider
Asked Answered
K

0

6

I am trying to create a custom data provider for my API. I am able to login and GET_LIST but unable to process the received data. I have adapted the required output format for the API responses and also included the Content-Range header.

With Postman all headers are returned but they seems to be missing in the "response" I am receiving in the convertHTTPResponse method.

Since headers are emtpy, the list won't appear and showing the error:

Warning: Missing translation for key: "Cannot read property 'hasOwnProperty' of undefined"

Certainly something obvious for experimented devs, please help!

Edit: Fixed it by saving the headers before converting the res.json()

myDataProvider.js

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
    let url = '';
    const token = localStorage.getItem('token');
    const options = {
        headers: new Headers({
            Accept: 'application/json',
            Authorization: 'Bearer ' + token
        }),
    };
    switch (type) {
        case GET_LIST:
            {
                const {
                    page,
                    perPage
                } = params.pagination;
                const {
                    field,
                    order
                } = params.sort;
                const query = {
                    sort: JSON.stringify([field, order]),
                    range: JSON.stringify([
                        (page - 1) * perPage,
                        page * perPage - 1,
                    ]),
                    filter: JSON.stringify(params.filter),
                };
                url = `${apiUrl}/${resource}?${stringify(query)}`;
                break;
            }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }

    let headers;
    return fetch(url, options)
        .then(res => {
            headers = res.headers;
            return res.json();
        })
        .then(response => {
            //console.log(headers);
            switch (type) {
                case GET_LIST:
                    return {
                        data: response.data.map(resource => ({ ...resource, id: resource.uuid })),
                        total: parseInt(headers.get('content-range').split('/').pop(), 10)
                    };
                default:
                    return {
                        data: response
                    };
            }
        });
};

API call URL:

http://localhost:9000/users?filter={}&range=[0,9]&sort=['uuid','DESC']

Result with Postman:

{
    "data": [
        {
            "uuid": "ff1xxa-ddsa-4232-b453-ed44e4dfc11d",
            "email": "[email protected]",
            "created_at": "2019-03-27T23:11:48.000Z",
            "updated_at": "2019-03-27T23:11:48.000Z",
        }
    "total": 74,
    "limit": 9,
    "offset": 0,
    "order": "DESC",
    "sort": "uuid",
    "success": true
}

Request Headers with Postman:

Authorization:"Bearer token123"
cache-control:"no-cache"
Postman-Token:"5e0442c7-698d-46e2-8656-50f4b10de970"
User-Agent:"PostmanRuntime/7.6.1"
Accept:"*/*"
Host:"localhost:9000"
cookie:"connect.sid=s%3AmfwRL0cVcIcBhqqGy1w6epkxjEh0nRzr.cP03XewB3Na%2B6esVOvN%2FBE5gL8gQvO%2BbWCIkC5Vbq44"
accept-encoding:"gzip, deflate"

Response Headers with Postman:

Access-Control-Allow-Origin:"*"
Access-Control-Expose-Headers:"Content-Range,X-Content-Range"
X-DNS-Prefetch-Control:"off"
X-Frame-Options:"SAMEORIGIN"
Strict-Transport-Security:"max-age=15552000; includeSubDomains"
X-Download-Options:"noopen"
X-Content-Type-Options:"nosniff"
X-XSS-Protection:"1; mode=block"
Content-Range:"users 0-9/74"
Content-Type:"application/json; charset=utf-8"
Content-Length:"13063"
ETag:"W/"3307-8yJ9evfC/wq64GCJcSnFIwWEGC8""
Date:"Thu, 11 Apr 2019 14:03:13 GMT"
Connection:"keep-alive"
Kopeck answered 11/4, 2019 at 13:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.