CODEWITHSUNDEEP
react-admin
Nathan Kjos
Nathan Kjos

Reputation: 35

Rewriting the Dataprovider for multiple api requests broke it and now returns the error "Cannot read property 'hasOwnProperty' of undefined"

I am using the react-admin package and it has come to my attention that I needed to rewrite my functioning data provider to merge two different api request results into one array of data before passing the data to the resource component that would display it. After my rewrite I console log the data being returned and it is correct, but no matter what I have tried I always get the "Cannot read property 'hasOwnProperty' of undefined" error before my console.log of the data, and then I get the same error message a few seconds later, and nothing gets displayed.

in dataprovider.js (displays the data in the resource component)

export default (type, resource, params) => {
    var apiUrl = `https://request1url.com/api`;
    let query = '';
    let url = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            url = `${apiUrl}${query}`;
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }

    return fetch(url, options)
        .then(res => {
            return res.json()
        })
        .then(json => {
            var data = [];
            var result = json.data.result;
                for(var i = 0; i < result.length; i++){
                    result[i].id = i
                    data.push(result[i])
                }
            }
            console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                case GET_ONE:
                return {
                    data: data,
                }
                default:
                    return { data: data};
            }
        });
};

in NEWdataprovider.js (rewrite)

export default (type, resource, params) => {
    const apiRequests = ['https://request1url.com/api','https://request2url.com/api'];
    let query = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }
    var req1 = fetch(`${apiRequests[0]}${query}`, options).then(function(response){ 
        return response.json()
    });
    var req2 = fetch(`${apiRequests[1]}${query}`, options).then(function(response){
        return response.json()
    });
    Promise.all([req1,req2]).then(function(values){
        var data = [];
        var result1 = values[0].data.result;
        var result2 = values[1].data.result;
        for(var i = 0; i < result1.length; i++){
            result1[i].id = i
            data.push(result1[i])
        }
        for(var j = 0; j < result2.length; j++){
            result2[j].id = j
            data.push(result2[j])
        }
        console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                default:
                    return { data: data};
            }
        });
};

in App.js

<Admin dataProvider={dataProvider}>
  <Resource name="errors" list={errors} />
  <Resource name="people" list={people} />
</Admin>
);

in the console.log the data logged is the correct format, and data to be displayed, but with the original dataprovider it displayed the list of items, and the new dataprovider returns the error message "Cannot read property 'hasOwnProperty' of undefined"

Upvotes: 2

Views: 718

Answers (1)

Shawn K
Shawn K

Reputation: 778

Your dataprovider needs to return a promise. Per the docs...

/**
 * Query a data provider and return a promise for a response
 *
 * @example
 * dataProvider(GET_ONE, 'posts', { id: 123 })
 *  => Promise.resolve({ data: { id: 123, title: "hello, world" } })
 *
 * @param {string} type Request type, e.g GET_LIST
 * @param {string} resource Resource name, e.g. "posts"
 * @param {Object} payload Request parameters. Depends on the action type
 * @returns {Promise} the Promise for a response
 */
const dataProvider = (type, resource, params) => new Promise();

Try return Promise.all() instead. 

export default (type, resource, params) => {
    const apiRequests = ['https://request1url.com/api','https://request2url.com/api'];
    let query = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }
    var req1 = fetch(`${apiRequests[0]}${query}`, options).then(function(response){ 
        return response.json()
    });
    var req2 = fetch(`${apiRequests[1]}${query}`, options).then(function(response){
        return response.json()
    });
    return Promise.all([req1,req2]).then(function(values){
        var data = [];
        var result1 = values[0].data.result;
        var result2 = values[1].data.result;
        for(var i = 0; i < result1.length; i++){
            result1[i].id = i
            data.push(result1[i])
        }
        for(var j = 0; j < result2.length; j++){
            result2[j].id = j
            data.push(result2[j])
        }
        console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                default:
                    return { data: data};
            }
        });
};

Upvotes: 2

Related Questions