How to fix:Response is undefined in react-admin - node.js

Question

I'm trying to use react-admin to provide a user CRUD from my API (express)
I followed the steps from react-admin documentation.
Creating my own DataProvider.
Inserting Admin component tells me it is properly setup.
Adding a child Ressource component with users as the ressource name and ListGuesser as the list.
At this point I get a toast saying response in undefined and a console error saying Warning: Missing translation for key: "response is undefined"
I can see in the network tabs that the request is properly sent and receives a 200 response with the data I expected
I cannot understand it and where it comes from
Here is my adminComponent
import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin'
import myDataProvider from './myDataProvider'
import './adminHomepage.css'
let myProvider = myDataProvider('http://localhost:8666')
function AdminHomepage(props) {
return (
<Admin dataProvider={myProvider}>
<Resource name="users" list={ListGuesser} />
</Admin>
);
}
export default AdminHomepage;
Here is my dataProvider
import useAuth from "../../hooks/useAuth";
import { stringify } from 'query-string';
import {
fetchUtils,
GET_LIST,
GET_ONE,
CREATE,
UPDATE,
DELETE,
GET_MANY_REFERENCE
} from 'ra-core';
const { getToken } = useAuth();
export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
const convertDataRequestToHttp = (type, resource, params) => {
let url = "";
const options = {};
options.headers = new Headers({ Authorization : getToken(), Accept: "application/json" })
switch (type) {
case GET_LIST: {
url = `${apiUrl}/${resource}/`;
break;
}
case GET_ONE: {
url = `${apiUrl}/${resource}/${params.id}`;
break;
}
case CREATE: {
url = `${apiUrl}/${resource}/${params.id}`;
options.method = "POST";
options.body = JSON.stringify(params.data);
break;
}
case UPDATE: {
url = `${apiUrl}/${resource}/${params.id}`;
options.method = "PUT";
options.body = JSON.stringify(params.data);
break;
}
case DELETE: {
url = `${apiUrl}/${resource}/${params.id}`;
options.method = "DEL";
break;
}
default: {
throw new Error(`Unsupported request type ${type}`);
}
}
return { url, options };
};
const convertHttpResponse = (response, type, resource, params) => {
const { headers, json } = response;
switch (type) {
case GET_LIST:
case GET_MANY_REFERENCE: {
if (!headers.has("content-range")) {
throw new Error(
"Content-Range is missing from header, see react-admin data provider documentation"
);
}
let ret = {
data: json.users,
total: parseInt(
headers
.get("Content-Range")
.split(" ")
.pop()
)
};
console.log("RETURN", ret)
return ret
}
case CREATE: {
return { data: { ...params.data, id: json.id } };
}
default: {
return { data: json };
}
}
};
return (type, resource, params) => {
const { url, options } = convertDataRequestToHttp(type, resource, params);
return httpClient(url, options).then(response => {
console.log(response)
convertHttpResponse(response, type, resource, params);
});
};
};
Screenshot of my error
Warning: Missing translation for key: "response is undefined"
in Notification (created by Connect(Notification))
in Connect(Notification) (created by WithStyles(Connect(Notification)))
in WithStyles(Connect(Notification)) (created by Context.Consumer)
in Context.Consumer (created by translate(WithStyles(Connect(Notification))))
in translate(WithStyles(Connect(Notification))) (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by Route)
in Route (created by withRouter(WithStyles(Layout)))
in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout))))
in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme)
in LayoutWithTheme (created by Route)
in Route (created by CoreAdminRouter)
in CoreAdminRouter (created by Connect(CoreAdminRouter))
in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
in getContext(Connect(CoreAdminRouter)) (created by Route)
in Route (created by CoreAdminBase)
in CoreAdminBase (created by withContext(CoreAdminBase))
in withContext(CoreAdminBase) (at adminHomepage.js:11)
in AdminHomepage (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route (at App.js:17)
in App (at src/​index.js:7)

Answer 1

I think you're forgetting to return the actual result back:
Change your code to:
return (type, resource, params) => {
const { url, options } = convertDataRequestToHttp(type, resource, params);
return httpClient(url, options).then(response => {
console.log(response)
return convertHttpResponse(response, type, resource, params);
});
}
This bit is probably just to pad the answer.
A Promise in JavaScript is just an object which will at some point get resolved to a value. When you do Promise.then you're basically returning a new promise which will have a callback triggered when resolved and that callback will receive the resolved property. The new promise your make will have the return value based on the result of the callback given. In your case the final resolved promise would have been undefined because nothing was returned in the callback