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"