React: create simple admin panel and get TypeError: headers is undefined

Question

I am new to React so this questions is probably very basic, but I'd like some help.

I wrote following code to implement simple admin panel:

import * as React from "react";

import { fetchUtils, Admin, Resource, ListGuesser } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';


const apiUrl = 'https://my-api';

const authToken =  "zvxvzx";


  const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }

    options.headers.set('Authorization', authToken);
    options.headers.set('Access-Control-Allow-Origin', "*");
    return fetchUtils.fetchJson(url, options).then(({ json }) => ({ data: json }));;
};


const dataProvider = simpleRestProvider(apiUrl, httpClient);

const App = () => (
    <Admin dataProvider={dataProvider} >
   
            <Resource name="requests" list={ListGuesser} />
        </Admin>
    );

export default App;

but when run it, i got following error and can not show any data in table: TypeError: headers is undefined

I would really appreciate if someone explained why headers is undefined, I just can't get that. Thanks for reading everyone!

Answer 1

My problem solved. There is several points:

1- No need to add then(({ json }) => ({ data: json })); to return fetchUtils.fetchJson(url, options). In other words App.js is:

import * as React from "react";
import jsonServerProvider from 'ra-data-json-server';

import { fetchUtils, Admin, Resource, EditGuesser } from 'react-admin';
import { RequestList } from './requests';
import authProvider from './authProvider';;
    

const apiUrl = 'http://my-app';
const authToken = "sfdasdfa";
    

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
  
    options.headers.set('Authorization', authToken);
    return fetchUtils.fetchJson(url, options)
};


const dataProvider = simpleRestProvider(apiUrl, httpClient);


const App = () => (
    <Admin authProvider={authProvider} dataProvider={dataProvider} customSagas={[ closeSidebarSaga ]}>
   
           
            <Resource name="requests" list={RequestList} />
        </Admin>
    );

export default App;

and request.js is

import * as React from "react";
import { List, Datagrid, TextField, EmailField, UrlField ,ImageField} from 'react-admin';
   
export const RequestList = props => (
    <List {...props}>      

        <Datagrid  >                
            <TextField source="id" label="id" /> }
           <TextField source="name"  />                    
        </Datagrid>
    </List>
);

2- My API is in JAVA and it is need to add following code when return result:

MultiValueMap<String, String> headers = new HttpHeaders();
headers.add("Content-Range", "requests 0-rowNUM/rowNUM");
headers.add("Access-Control-Expose-Headers", "Content-Range");
return new ResponseEntity<Object>(Object, headers, HttpStatus.OK);

rowNum == total number of requests.

I hopeful it is clear enough.