Estoy tratando de usar react-admin para proporcionar un usuario CRUD desde mi API (express)

Seguí los pasos de la documentación de react-admin. Creando mi propio DataProvider. Insertar el componente de administración me dice que está configurado correctamente. Agregar un componente secundario de Recurso con usuarios como nombre de recurso y ListGuesser como lista.

En este punto, recibo un brindis que dice que la respuesta es indefinida y un error de consola que dice Advertencia: falta la traducción de la clave: "la respuesta no está definida".

Puedo ver en las pestañas de la red que la solicitud se envía correctamente y recibe una respuesta 200 con los datos que esperaba

No puedo entenderlo y de donde viene

Aquí está mi 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;

Aquí está mi proveedor de datos

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

Captura de pantalla de mi 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)
0
kopo 15 oct. 2019 a las 10:49

1 respuesta

La mejor respuesta

Creo que te estás olvidando de devolver el resultado real:

Cambia tu código a:

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

Este bit es probablemente solo para rellenar la respuesta.

Un Promise en JavaScript es solo un objeto que en algún momento se resolverá en un valor. Cuando lo hace Promise.then, básicamente está devolviendo una nueva promesa que tendrá una devolución de llamada activada cuando se resuelva y esa devolución de llamada recibirá la propiedad resuelta. La nueva promesa que haga tendrá el valor de retorno basado en el resultado de la devolución de llamada dada. En su caso, la promesa resuelta final habría sido undefined porque no se devolvió nada en la devolución de llamada

0
apokryfos 15 oct. 2019 a las 08:52